Switch between charts

dist/assets/styles.css

@@ -8,6 +8,14 @@ body {
   margin-bottom: .4rem;
 }
 
+.chart {
+  display: none;
+}
+
+#cases {
+  display: block;
+}
+
 svg {
   display: block;
   margin: 0 auto;

dist/index.html

@@ -21,19 +21,19 @@ <h1>COVID-19 cases by US state since their 100th reported case</h1>
         Developed by <a href='https://cwitulski.com'>Christopher Witulski</a>.
       </p>
       <p>
-        <a href="index.html" class="btn btn-default">Total cases</a>
-        <a href='scaled_cases.html' class='btn btn-primary'>Cases by population</a>
-        <a href='deaths.html' class='btn btn-primary'>Total deaths</a>
-        <a href='averages.html' class='btn btn-primary'>Daily new cases</a>
-        <a href='scaled_averages.html' class='btn btn-primary'>Daily new cases per 100k</a>
+        <span id="casesButton" class="btn btn-default">Total cases</span>
+        <span id="casesScaledButton" class='btn btn-primary'>Cases by population</span>
+        <span id="deathsButton" class='btn btn-primary'>Total deaths</span>
+        <span id="dailyButton" class='btn btn-primary'>Daily new cases</span>
+        <span id="dailyScaledButton" class='btn btn-primary'>Daily new cases per 100k</span>
       </p>
     </div>
 
-    <div id="cases"></div>
-    <div id="casesScaled"></div>
-    <div id="deaths"></div>
-    <div id="daily"></div>
-    <div id="dailyScaled"></div>
+    <div id="cases" class="chart"></div>
+    <div id="casesScaled" class="chart"></div>
+    <div id="deaths" class="chart"></div>
+    <div id="daily" class="chart"></div>
+    <div id="dailyScaled" class="chart"></div>
 
     <p>
       This chart tracks cases of COVID-19 across the USA from the date when each state first had at least 100 reported

script.js

@@ -9,3 +9,34 @@ window.CasesScaledChart = CasesScaledChart;
 window.DeathsChart = DeathsChart;
 window.DailyChart = DailyChart;
 window.DailyScaledChart = DailyScaledChart;
+
+var buttons = document.getElementsByClassName("btn");
+var charts = document.getElementsByClassName("chart");
+
+var buttonListener = function() {
+  console.log(this.id);
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].classList.remove("btn-default");
+    buttons[i].classList.add("btn-primary");
+    this.classList.remove('btn-primary');
+    this.classList.add('btn-default');
+
+    if (charts[i].id + "Button" == this.id) {
+      charts[i].style.display = "block";
+    } else {
+      charts[i].style.display = "none";
+    }
+
+  }
+}
+
+for (let i = 0; i < buttons.length; i++) {
+  console.log(buttons[i]);
+  buttons[i].addEventListener("click", buttonListener);
+}
+
+var casesButton = document.getElementById("casesButton");
+var casesScaledButton = document.getElementById("casesScaledButton");
+var deathsButton = document.getElementById("deathsButton");
+var dailyButton = document.getElementById("dailyButton");
+var dailyScaledButton = document.getElementById("dailyScaledButton");

src/CasesScaledChart.js

@@ -3,7 +3,6 @@ import { Chart } from "./Chart.js";
 
 export default class CasesScaledChart extends Chart {
   constructor(id, title, margin) {
-    console.log(id, margin);
     super(id, title, margin);
   }
 

src/Chart.js

@@ -38,7 +38,6 @@ export class Chart {
   setRanges() {}
 
   createSVG(id, margin) {
-    console.log(id)
     return d3.select('#' + id)
       .append('svg')
       .attr('width', '100%')