plunkerでd3 その5

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

概要

plunkerでd3やってみた。
covid-19のjson読んで、table作ってみた。

写真

サンプルコード


d3.json("https://covid19-japan-web-api.now.sh/api/v1/positives", function(error, data) {
  var keys = ["id", "announcement_date", "diagnosis_date",
  "prefecture", "residence_prefecture", "age", "gender", "attribute", "prefecture_number", "travel_or_contact", "detail", "cluster", "src", "onset", "symptom", "death_or_discharge_date", "comment1", "outcome", "outcome_src", "comment2"];
  var table = d3.select("body").append("table").attr("border", "1")
  table.append("thead").append("tr").selectAll("th").data(keys).enter().append("th").text(function(d) {
    return d;
  });
  for (var i = 0; i < data.length; i++)
  {
    var rows = [];  
    keys.map(function(c) {
      rows.push(data[i][c])
    });
    table.append("tbody").append("tr").selectAll("td").data(rows).enter().append("td").text(function(d) {
      return d;
    });
  }
});

成果物

以上。