add charts for "by year" and "over time" #7

IQSS · Jun 6, 2022 · 650911f · 650911f
1 parent 095488c
commit 650911f
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 0 deletions.
diff --git a/charts.html b/charts.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dataverse Installations by Year and Over Time</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
+    <link rel="stylesheet" href="css/charts.css" />
+  </head>
+  <body>
+    <div id="chartByYear" class="chart"></div>
+    <div id="chartOverTime" class="chart"></div>
+    <script src="js/charts.js"></script>
+  </body>
+</html>
diff --git a/css/charts.css b/css/charts.css
@@ -0,0 +1,34 @@
+html,
+body {
+  font-family: sans-serif;
+}
+
+.chart {
+  padding: 20px;
+}
+
+table {
+  width: 100%;
+}
+
+.chartTitle {
+  text-align: center;
+}
+
+.bars td {
+  vertical-align: bottom;
+  text-align: center;
+}
+
+.bars div:hover {
+  opacity: 0.6;
+}
+
+.barColor {
+  background: #C55B28;
+}
+
+.barDate {
+  padding: 2px;
+  display: inline-block;
+}
diff --git a/js/charts.js b/js/charts.js
@@ -0,0 +1,80 @@
+// inspired by https://codepen.io/Muthukrishnan/pen/vGoZVz
+let url = "data/data.json";
+
+fetch(url).then(function (response) {
+  response.text().then(function (text) {
+    var byYear = {};
+    var byYearData = [];
+    var overTimeData = [];
+
+    obj = JSON.parse(text);
+    installations = obj.installations;
+
+    https: for (const installation of installations) {
+      let launch_year = installation.launch_year;
+      if (byYear[launch_year] == undefined) {
+        byYear[launch_year] = [];
+      }
+      byYear[launch_year].push(installation.name);
+    }
+
+    let runningTotal = 0;
+    for (const [year, installations] of Object.entries(byYear)) {
+      let countByYear = {};
+      countByYear["year"] = year;
+      countByYear["count"] = installations.length;
+      byYearData.push(countByYear);
+      runningTotal += installations.length;
+      let overTimeByYear = {};
+      overTimeByYear["year"] = year;
+      overTimeByYear["count"] = runningTotal;
+      overTimeData.push(overTimeByYear);
+    }
+
+    var byYearJson = {};
+    byYearJson.title = "Dataverse Installations by Year";
+    byYearJson.data = byYearData;
+    byYearJson.divId = "chartByYear";
+    addChart(byYearJson);
+
+    var overTimeJson = {};
+    overTimeJson.title = "Dataverse Installations Over Time";
+    overTimeJson.data = overTimeData;
+    overTimeJson.divId = "chartOverTime";
+    addChart(overTimeJson);
+  });
+});
+
+function addChart(chartJson) {
+  var chartDiv = document.createElement("div");
+  var barChart = document.createElement("table");
+  var titleRow = document.createElement("tr");
+  var titleData = document.createElement("td");
+  titleData.setAttribute("colspan", chartJson.data.length + 1);
+  titleData.setAttribute("class", "chartTitle");
+  titleData.innerText = chartJson.title;
+  titleRow.appendChild(titleData);
+  barChart.appendChild(titleRow);
+  chartDiv.appendChild(barChart);
+
+  var barRow = document.createElement("tr");
+
+  for (var i = 0; i < chartJson.data.length; i++) {
+    barRow.setAttribute("class", "bars");
+    var barData = document.createElement("td");
+    var bar = document.createElement("div");
+    bar.setAttribute("class", "barColor");
+    bar.style.height = chartJson.data[i]["count"] / 4 + "em";
+    barData.innerText = chartJson.data[i]["count"];
+    barData.appendChild(bar);
+    var yearSpan = document.createElement("span");
+    yearSpan.className = "barDate";
+    yearSpan.innerText = chartJson.data[i]["year"];
+    barData.appendChild(yearSpan);
+    barRow.appendChild(barData);
+  }
+
+  barChart.appendChild(barRow);
+  chartDiv.appendChild(barChart);
+  document.getElementById(chartJson.divId).innerHTML = chartDiv.outerHTML;
+}