Yet Another Interdisciplinary Researcher

 

Difference between revisions of "Web Element: Data"

(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
+
  <head>
<script type="text/javascript"charset="utf-8">
+
    <!--Load the AJAX API-->
d3.text("data.csv", function(data) {
+
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
var parsedCSV = d3.csv.parseRows(data);
+
    <script type="text/javascript">
var container = d3.select("body")
+
 
.append("table")
+
google.charts.load('current', {packages: ['corechart', 'line']});
.selectAll("tr")
+
google.charts.setOnLoadCallback(drawCrosshairs);
.data(parsedCSV).enter()
+
 
.append("tr")
+
function drawCrosshairs() {
.selectAll("td")
+
      var data = new google.visualization.DataTable();
.data(function(d) { return d; }).enter()
+
      data.addColumn('number', 'Time');
.append("td")
+
      data.addColumn('number', 'Confirmed');
.text(function(d) { return d; });
+
 
});
+
      data.addRows([
</script>
+
        [11, 1], [12, 1], [13, 5], [14, 5], [15, 6], [16, 18], [17, 47], [18, 98], [19, 192], [20, 359], [21, 670], [22, 947]
</html>
+
      ]);
<html>
+
 
<div id="observablehq-dd583a19"></div>
+
      var options = {
<script type="module">
+
        hAxis: {
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
+
          title: 'Time'
import define from "https://api.observablehq.com/@yy/covid-19-fatality-rate.js?v=3";
+
        },
const inspect = Inspector.into("#observablehq-dd583a19");
+
        vAxis: {
(new Runtime).module(define, name => (name === "chart") && inspect());
+
          title: 'Population'
</script>
+
        },
 +
      };
 +
 
 +
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
 +
 
 +
      chart.draw(data, options);
 +
      chart.setSelection([{row: 38, column: 1}]);
 +
 
 +
    }
 +
    </script>
 +
  </head>
 +
 
 +
  <body>
 +
    <!--Div that will hold the pie chart-->
 +
    <div id="chart_div"></div>
 +
  </body>
 
</html>
 
</html>

Revision as of 12:18, 22 March 2020