plunkerでd3 その2

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

概要

plunkerでd3やってみた。
covid-19のcsv読んで、tableにしてみた。

写真

サンプルコード


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 th = ['Province/State','Country/Region','Lat','Long','1/22/20','1/23/20','1/24/20','1/25/20','1/26/20','1/27/20','1/28/20','1/29/20','1/30/20','1/31/20','2/1/20','2/2/20','2/3/20','2/4/20','2/5/20','2/6/20','2/7/20','2/8/20','2/9/20','2/10/20','2/11/20','2/12/20','2/13/20','2/14/20','2/15/20','2/16/20','2/17/20','2/18/20','2/19/20','2/20/20','2/21/20','2/22/20','2/23/20','2/24/20','2/25/20','2/26/20','2/27/20','2/28/20','2/29/20','3/1/20','3/2/20','3/3/20','3/4/20','3/5/20','3/6/20','3/7/20','3/8/20','3/9/20','3/10/20','3/11/20','3/12/20','3/13/20','3/14/20','3/15/20','3/16/20','3/17/20','3/18/20','3/19/20','3/20/20','3/21/20','3/22/20','3/23/20','3/24/20','3/25/20','3/26/20','3/27/20','3/28/20','3/29/20','3/30/20','3/31/20','4/1/20'
];
  var table = d3.select("body").append("table").attr("border", "1")
  table.append("thead").append("tr").selectAll("th").data(th).enter().append("th").text(function(d) {
    return d;
  });
  for (var i = 0; i < data.length; i++)
  {
    var td = [data[i]['Province/State'], data[i]['Country/Region'], data[i]['Lat'], data[i]['Long'], data[i]['1/22/20'], data[i]['1/23/20'], data[i]['1/24/20'], data[i]['1/25/20'], data[i]['1/26/20'], data[i]['1/27/20'], data[i]['1/28/20'], data[i]['1/29/20'], data[i]['1/30/20'], data[i]['1/31/20'], data[i]['2/1/20'], data[i]['2/2/20'], data[i]['2/3/20'], data[i]['2/4/20'], data[i]['2/5/20'], data[i]['2/6/20'], data[i]['2/7/20'], data[i]['2/8/20'], data[i]['2/9/20'], data[i]['2/10/20'], data[i]['2/11/20'], data[i]['2/12/20'], data[i]['2/13/20'], data[i]['2/14/20'], data[i]['2/15/20'], data[i]['2/16/20'], data[i]['2/17/20'], data[i]['2/18/20'], data[i]['2/19/20'], data[i]['2/20/20'], data[i]['2/21/20'], data[i]['2/22/20'], data[i]['2/23/20'], data[i]['2/24/20'], data[i]['2/25/20'], data[i]['2/26/20'], data[i]['2/27/20'], data[i]['2/28/20'], data[i]['2/29/20'], data[i]['3/1/20'], data[i]['3/2/20'], data[i]['3/3/20'], data[i]['3/4/20'], data[i]['3/5/20'], data[i]['3/6/20'], data[i]['3/7/20'], data[i]['3/8/20'], data[i]['3/9/20'], data[i]['3/10/20'], data[i]['3/11/20'], data[i]['3/12/20'], data[i]['3/13/20'], data[i]['3/14/20'], data[i]['3/15/20'], data[i]['3/16/20'], data[i]['3/17/20'], data[i]['3/18/20'], data[i]['3/19/20'], data[i]['3/20/20'], data[i]['3/21/20'], data[i]['3/22/20'], data[i]['3/23/20'], data[i]['3/24/20'], data[i]['3/25/20'], data[i]['3/26/20'], data[i]['3/27/20'], data[i]['3/28/20'], data[i]['3/29/20'], data[i]['3/30/20'], data[i]['3/31/20'], data[i]['4/1/20']];


    table.append("tbody").append("tr").selectAll("td").data(td).enter().append("td").text(function(d) {
      return d;
    });
  }
});

成果物

以上。