Bio
B'log
Research
Teaching

Difference between revisions of "Web Element: Data"
 
(58 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{|
 +
| width=50% |
 
<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']});
−
.selectAll("tr")
+
      google.charts.setOnLoadCallback(drawVisualization);
−
.data(parsedCSV).enter()
+
 
−
.append("tr")
+
      function drawVisualization() {
−
.selectAll("td")
+
        // Some raw data (not necessarily accurate)
−
.data(function(d) { return d; }).enter()
+
        var data = google.visualization.arrayToDataTable([
−
.append("td")
+
          ['Day', 'Cumulative', 'Daily'],
−
.text(function(d) { return d; });
+
        // Day 1 = March 10, 2020
−
});
+
[1, 1, 1],
−
</script>
+
[2, 1, 0],
−
</html>
+
[3, 5, 4],
−
<html>
+
[4, 5, 0],
−
<div id="observablehq-dd583a19"></div>
+
[5, 6, 1],
−
<script type="module">
+
[6, 18, 12],
−
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
+
[7, 47, 29],
−
import define from "https://api.observablehq.com/@yy/covid-19-fatality-rate.js?v=3";
+
[8, 98, 51],
−
const inspect = Inspector.into("#observablehq-dd583a19");
+
[9, 192, 94],
−
(new Runtime).module(define, name => (name === "chart") && inspect());
+
[10, 359, 167],
−
</script>
+
[11, 670, 311],
 +
[12, 947, 277],
 +
[13, 1236, 289],
 +
[14, 1529, 293],
 +
[15, 1872, 343],
 +
[16, 2433, 561],
 +
[17, 3629, 1196],
 +
[18, 5698, 2069],
 +
[19, 7402, 1704],
 +
[20, 9217, 1815],
 +
[21, 10827, 1410],
 +
[22, 13531, 2904],
 +
[23, 15679, 2148],
 +
[24, 18135, 2456],
 +
[25, 20921, 2786],
 +
[26, 23934, 3013],
 +
[27, 27069, 3135],
 +
[28, 30217, 3148],
 +
[29, 34109, 3892],
 +
[30, 38226, 4117],
 +
[31, 42282, 4056],
 +
[32, 47029, 4747],
 +
[33, 52167, 5138],
 +
[34, 56956, 4789],
 +
[35, 61049, 4093],
 +
[36, 65111, 4062],
 +
[37, 69392, 4281],
 +
[38, 74193, 4801],
 +
[39, 78546, 4353],
 +
[40, 82329, 3783],
 +
[41, 86306, 3977],
 +
[42, 90980, 4674],
 +
[43, 95591, 4611],
 +
[44, 98674, 3083],
 +
[45, 101790, 3116],
 +
]);
 +
 
 +
// Set chart options
 +
        var options = {
 +
          title : 'COVID-19 Cases in Turkey',
 +
fontName: 'Old Standard TT',
 +
vAxis: {
 +
          title: 'Cases',  
 +
//          maxValue: '20000',
 +
// scaleType: 'log',
 +
            },
 +
          hAxis: {title: 'Day'},
 +
          seriesType: 'bars',
 +
          series:{
 +
          0: {type: 'line',
 +
            color: '#982F00',
 +
                lineWidth: 3,
 +
//             pointSize: 4,
 +
                },
 +
          1: {type: 'bars', color: 'black'},},
 +
//       'width':300,
 +
          'height':300,
 +
//       crosshair: { trigger: 'both', opacity: 0.5 },
 +
//        trendlines: { 1: {} }    // Draw a trendline for data series 1,
 +
          };
 +
 
 +
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div_1'));
 +
        chart.draw(data, options);
 +
      }
 +
    </script>
 +
  </head>
 +
 
 +
<body>
 +
<div id="chart_div_1"></div>
 +
</body>
 
</html>
 
</html>
 +
|
 +
 
<html>
 
<html>
 
   <head>
 
   <head>
Line 31: Line 104:
 
     <script type="text/javascript">
 
     <script type="text/javascript">
  
−
      // Load the Visualization API and the corechart package.
 
 
       google.charts.load('current', {'packages':['corechart']});
 
       google.charts.load('current', {'packages':['corechart']});
−
 
−
      // Set a callback to run when the Google Visualization API is loaded.
 
 
       google.charts.setOnLoadCallback(drawChart);
 
       google.charts.setOnLoadCallback(drawChart);
  
−
      // Callback that creates and populates a data table,
 
−
      // instantiates the pie chart, passes in the data and
 
−
      // draws it.
 
 
       function drawChart() {
 
       function drawChart() {
 +
        var data = google.visualization.arrayToDataTable([
 +
          ['Total cases', 'Daily cases'],
 +
//[1, 1],
 +
//[1, 0],
 +
//[5, 4],
 +
//[5, 0],
 +
//[6, 1],
 +
//[18, 12],
 +
//[47, 29],
 +
//[98, 51],
 +
[192, 94],
 +
[359, 167],
 +
[670, 311],
 +
[947, 277],
 +
[1236, 289],
 +
[ 1529, 293],
 +
[ 1872, 343],
 +
[ 2433, 561],
 +
[ 3629, 1196],
 +
[ 5698, 2069],
 +
[ 7402, 1704],
 +
[ 9217, 1815],
 +
[ 10827, 1410],
 +
[ 13531, 2904],
 +
[ 15679, 2148],
 +
[ 18135, 2456],
 +
[ 20921, 2786],
 +
[23934, 3013],
 +
[27069, 3135],
 +
[30217, 3148],
 +
[34109, 3892],
 +
[38226, 4117],
 +
[42282, 4056],
 +
[47029, 4747],
 +
[52167, 5138],
 +
[56956, 4789],
 +
[61049, 4093],
 +
[65111, 4062],
 +
[69392, 4281],
 +
[74193, 4801],
 +
[78546, 4353],
 +
[82329, 3783],
 +
[86306, 3977],
 +
[90980, 4674],
 +
[95591, 4611],
 +
[98674, 3083],
 +
[101790, 3116],
 +
        ]);
  
−
        // Create the data table.
+
         var options = {
−
         var data = new google.visualization.DataTable();
+
          title: 'Total cases vs. Daily cases (log-log)',
−
        data.addColumn('string', 'Topping');
+
          fontName: 'Old Standard TT',
−
        data.addColumn('number', 'Slices');
+
          color: '#982F00',
−
        data.addRows([
+
          series:{
−
          ['Mushrooms', 3],
+
          0: {
−
           ['Onions', 1],
+
            color: '#982F00',
−
           ['Olives', 1],
+
                pointSize: 2,
−
           ['Zucchini', 1],
+
                },},
−
           ['Pepperoni', 2]
+
           hAxis: {title: 'Total cases', scaleType: 'log'},
−
         ]);
+
           vAxis: {title: 'Daily cases', scaleType: 'log'},
 +
           legend: 'none',
 +
           'height':300,
 +
         };
  
−
         // Set chart options
+
         var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_2'));
−
        var options = {'title':'How Much Pizza I Ate Last Night',
 
−
                      'width':400,
 
−
                      'height':300};
 
  
−
        // Instantiate and draw our chart, passing in some options.
 
−
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
 
 
         chart.draw(data, options);
 
         chart.draw(data, options);
 
       }
 
       }
Line 66: Line 179:
 
   </head>
 
   </head>
  
−
  <body>
+
<body>
−
    <!--Div that will hold the pie chart-->
+
<div id="chart_div_2"></div>
−
    <div id="chart_div"></div>
+
</body>
−
  </body>
 
 
</html>
 
</html>
 +
|}

Latest revision as of 12:34, 17 May 2020

Retrieved from "https://hkilter.com/index.php?title=Web_Element:_Data&oldid=1997"

hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

© 2020 H. K. Ilter