とりぷるぷぅ技術メモ: [D3.js]csvファイルをテーブルで表示する

test1.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
    <link rel="stylesheet" type="text/css" href="./test1.css">
  </head>
  <body>
  <svg width="960" height="500"></svg><br/>
  <a href="test1.csv">下表をcsvファイルにしてダウンロード</a><br/>
  <table></table>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test1.js"></script>
</html>

test1.js

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.line()
             .x(function(d) { return x(d.month); })
             .y(function(d) { return y(d.temperature); });

// X, Yの範囲を座標に置き換える
var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

// 色
var colors = d3.scaleOrdinal(d3.schemeCategory10);
console.log(colors(0))
console.log(colors(1))
console.log(colors(2))
console.log(colors(3))

// データファイルを読み込んでグラフを描く
d3.csv("test1.csv", type, function(error, data) {
 if (error) throw error;

 var cities = data.columns.slice(1).map(function(id) {
  return {
   id: id,
   values: data.map(function(d) {
    return {month: d.month, temperature: d[id]};
   })
  };
 });

 var keys = data.columns.slice(1);
 console.log('keys=' + keys);

 // Xの範囲はmonthの最小値から最大値
 console.log('extent=' + d3.extent(data, function(d) { return d.month; }));
 console.log('max=' + d3.max(data, function(d) { return d.month; }));
 x.domain(d3.extent(data, function(d) {
  return d.month
 }));
 console.log('x.domain()=' + x.domain())
 console.log('x.range()=' + x.range())

 // Yの範囲は各地のtemperatureをすべて含めた最小値から最大値
 y_min = d3.min(cities, function(c) { 
  return d3.min(c.values, function(d) {
   return d.temperature;
  });
 });
 y_max = d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); });
 console.log('y_min=' + y_min);
 console.log('y_max=' + y_max);
 y.domain([y_min, y_max]);

 // X軸 (y=0の場所配置するためにtranslateでy(0)を指定する
 g.append("g")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(d3.axisBottom(x));

 // Y軸
 g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("fill", "#000")
    .text("Temperature (℃)");

 // line chartを描く
 var city = g.selectAll(".city")
             .data(cities)
             .enter().append("g")
               .attr("class", "city");

 city.append("path")
  .attr("d", function(d) {
    return line(d.values);
  })
  .attr("stroke", function(d, i) {
   console.log('d.id=' + d.id);
   console.log('i=' + i);
   console.log('colors(d.id)=' + colors(d.id));
   console.log('colors(i)=' + colors(i));
     return colors(i);
  })
  .attr("stroke-width", 2)
  .attr("fill", "none");

 // 凡例
 console.log('keys.slice()=' + keys.slice());
 var legend = g.append("g")
               .attr("font-family", "sans-serif")
               .attr("font-size", 10)
               .attr("text-anchor", "end")
               .selectAll("g")
               //.data(['tokyo', 'osaka', 'sapporo', 'naha'])
               .data(keys.slice())
               .enter()
               .append("g")
               .attr("transform", function(d, i) {
                  console.log(i)
                     return "translate(0," + i * 20 + ")"; });
 legend.append("path")
       .attr("d", function(d) { return "M" + (width-19) + ",10" + "L" + (width) + ",10"; })
       .attr("stroke", function(d, i) {
          console.log('colors(' + i + ')=' + colors(i));
          return colors(i);
       })
       .attr("stroke-width", 2)
       .attr("fill", "none");

 legend.append("text")
       .attr("x", width - 24)
       .attr("y", 9.5)
       .attr("dy", "0.32em")
       .text(function(d) { return d; });
});

var table = d3.select("table");
var thead = table.append("thead");
var tbody = table.append("tbody");

d3.csv("test1.csv", function(csv) {
 var headerKey = d3.map(csv[0]).keys();

 thead.append("tr")
      .selectAll("th")
      .data(headerKey)
      .enter()
      .append("th")
      .text(function(key) { return key; });

 tbody.selectAll("tr")
      .data(csv)
      .enter()
      .append("tr")
        .selectAll("td")
        .data(function(row) { return d3.entries(row); })
        .enter()
        .append("td")
        .text(function(d) { return d.value; })
})

function type(d, _, columns) {
 d.month = +d.month; // 文字列を数値にする
 for (var i = 1, n = columns.length, c; i < n; ++i) {
  d[c = columns[i]] = +d[c];
 }

 return d;
}

test1.css

table {
 border-collapse: collapse;
 text-align: left;
 line-height: 1.5;
}

th {
 padding: 10px;
 font-weight: bold;
 vertical-align: top;
 color: #369;
 border-bottom: 3px solid #036;
}

td {
 weight: 350px;
 padding: 10px;
 vertical-align: top;
 border-bottom: 1px solid #ccc;
}

test1.csv

month,tokyo,osaka,sapporo,naha
1,5.1,4.4,-3.8,14.9
2,7,7.4,-1.1,17.6
3,8.1,8.1,0.7,17.1
4,14.5,13.8,6.9,20.4
5,18.5,19.6,11.1,23.9
6,22.8,24.2,17.3,27.9
7,27.3,27.8,21.8,28.9
8,27.5,28.9,26.6,28.3
9,25.1,25.2,19.2,27.9
10,19.5,19.5,12.1,25.2
11,14.9,15.2,6,23.7
12,7.5,8.1,-2,18.6

実行例 (fc2に置いてあるページに飛びます)

とりぷるぷぅ技術メモ

2017年6月28日水曜日

[D3.js]csvファイルをテーブルで表示する

0 件のコメント:

コメントを投稿