plunkerでd3 その4

2291 ワード
d3.js Plunker COVID-19 vega d3.js テキストリンク

概要

plunkerでd3やってみた。
covid-19のcsv読んで、日々のデータ取ってみた。

写真

サンプルコード

var url = "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv";
var out = document.getElementById("out");

d3.csv(url, function(data) {
  var values = [];
  for (var i = 0; i < data.length; i++)
  {
    if (data[i]['Country/Region'] == 'Japan')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Japan"
        });
      });
    }
  }
    var p = 0;
    for (i = 0; i < values.length; i++)
    {
        out.value += values[i].y - p + ", ";
        p = values[i].y;
    }
  const spec = {
      '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
      'width': 300,
      'height': 300,
      'data': {
          'values': values
      },
    'layer': [{
        'mark': 'point',
        'encoding': {
            'x': {
                'field': 'x', 
                'type': 'quantitative'
            },
            'y': {
                'field': 'y', 
                'type': 'quantitative',
            },
            'color': {
                "field": "c", 
                "type": "nominal"
            }
        }
    }, {
      'mark': 'line',
        'encoding': {
            'x': {
                'field': 'x', 
                'type': 'quantitative'
            },
            'y': {
                'field': 'y', 
                'type': 'quantitative',
            },
            'color': {
                "field": "c", 
                "type": "nominal"
            }
      }
    }]
  };
  vegaEmbed('#vis', spec);
});

成果物

以上。