plunkerでd3 その7

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

概要

plunkerでd3やってみた。
感染者数 予測API、読んでみた。

写真

サンプルコード


var url = "https://covid19-japan-web-api.now.sh/api/v1/total?predict=true";

d3.json(url, function(data) {
  var values = [];
  for (var i = 0; i < data.length; i++)
  {
    values.push({
      x: i,
      //x: data[i]["date"],
      y: data[i]["positive"],
      z: data[i]["death"]
    });
  }
  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'
        }
      }
    }, {
      'mark': 'line',
      'encoding': {
        'x': {
          'field': 'x', 
          'type': 'quantitative'
        },
        'y': {
          'field': 'z', 
          'type': 'quantitative'
        },
        'color': {
          'value': 'tomato'
        }
      }
    }]
  };
  vegaEmbed('#vis', spec);
});

成果物

以上。