plunkerでd3 その3

2572 ワード
d3.js 片対数 Plunker COVID-19 vega d3.js テキストリンク

概要

plunkerでd3やってみた。
covid-19のcsv読んで、vegaで片対数グラフにしてみた。

写真

サンプルコード


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";

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"
        });
      });
    }
    if (data[i]['Country/Region'] == 'Korea, South')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Koria, South"
        });
      });
    }
    if (data[i]['Country/Region'] == 'Germany')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Germany"
        });
      });
    }
    if (data[i]['Country/Region'] == 'Taiwan*')
    {
      var x = 0;
      data.columns.slice(4).map(function(d) {
        x++;
        values.push({
          x: x,
          y: data[i][d],
          c: "Taiwn"
        });
      });
    }
  }  
  const spec = {
      '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
      'width': 300,
      'height': 300,
      'data': {
          'values': values
      },
      'mark': 'line',
    'transform': [{
      "calculate": "(datum.y + 0.1)/10", 
      "as": "y1"
    }],
      'encoding': {
          'x': {
              'field': 'x', 
              'type': 'quantitative'
          },
          'y': {
              'field': 'y1', 
              'type': 'quantitative',
        "scale": {
          "type": "log"
        }
          },
          'color': {
              "field": "c", 
              "type": "nominal"
          }
      }
  };
  vegaEmbed('#vis', spec);
});

成果物

以上。