2017年6月23日金曜日

[D3.js]複数要素の折れ線グラフ

複数要素のデータがjsファイルに埋め込まれた例

test10.html
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
  <svg width="960" height="500"></svg>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test10.js"></script>
</html>
test10.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 tokyo = [
 {"month": 1,  "temperature": 5.1},
 {"month": 2,  "temperature": 7.0},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 14.5},
 {"month": 5,  "temperature": 18.5},
 {"month": 6,  "temperature": 22.8},
 {"month": 7,  "temperature": 27.3},
 {"month": 8,  "temperature": 27.5},
 {"month": 9,  "temperature": 25.1},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 14.9},
 {"month": 12, "temperature": 7.5},
];

var osaka = [
 {"month": 1,  "temperature": 4.4},
 {"month": 2,  "temperature": 7.4},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 13.8},
 {"month": 5,  "temperature": 19.6},
 {"month": 6,  "temperature": 24.2},
 {"month": 7,  "temperature": 27.8},
 {"month": 8,  "temperature": 28.9},
 {"month": 9,  "temperature": 25.2},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 15.2},
 {"month": 12, "temperature": 8.1}
];

var sapporo = [
 {"month": 1,  "temperature": -3.8},
 {"month": 2,  "temperature": -1.1},
 {"month": 3,  "temperature": 0.7},
 {"month": 4,  "temperature": 6.9},
 {"month": 5,  "temperature": 11.1},
 {"month": 6,  "temperature": 17.3},
 {"month": 7,  "temperature": 21.8},
 {"month": 8,  "temperature": 26.6},
 {"month": 9,  "temperature": 19.2},
 {"month": 10, "temperature": 12.1},
 {"month": 11, "temperature": 6},
 {"month": 12, "temperature": -2}
];

var naha = [
 {"month": 1,  "temperature": 14.9},
 {"month": 2,  "temperature": 17.6},
 {"month": 3,  "temperature": 17.1},
 {"month": 4,  "temperature": 20.4},
 {"month": 5,  "temperature": 23.9},
 {"month": 6,  "temperature": 27.9},
 {"month": 7,  "temperature": 28.9},
 {"month": 8,  "temperature": 28.3},
 {"month": 9,  "temperature": 27.9},
 {"month": 10, "temperature": 25.2},
 {"month": 11, "temperature": 23.7},
 {"month": 12, "temperature": 18.6}
];

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]);
// Xの範囲はmonthの最小値から最大値
x.domain(d3.extent(tokyo, function(d) { return d.month; }));
// Yの範囲は各地のtemperatureをすべて含めた最小値から最大値
m = [
 d3.max(tokyo, function(d) { return d.temperature; }),
 d3.max(osaka, function(d) { return d.temperature; }),
 d3.max(sapporo, function(d) { return d.temperature; }),
 d3.max(naha, function(d) { return d.temperature; })
];
console.log('m=' + m)
y_max = d3.max(m);
console.log('y_max=' + y_max);

m = [
 d3.min(tokyo, function(d) { return d.temperature; }),
 d3.min(osaka, function(d) { return d.temperature; }),
 d3.min(sapporo, function(d) { return d.temperature; }),
 d3.min(naha, function(d) { return d.temperature; })
];
console.log('m=' + m)
y_min = d3.min(m);
console.log('y_min=' + y_min);

y.domain([y_min, y_max]);

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

// line chartを描く
g.append("path")
   .attr("d", line(tokyo))
   .attr("stroke", colors(0))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(osaka))
   .attr("stroke", colors(1))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(sapporo))
   .attr("stroke", colors(2))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(naha))
   .attr("stroke", colors(3))
   .attr("stroke-width", 2)
   .attr("fill", "none");

// 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 (℃)");
実行例 (fc2に置いてあるページに飛びます)

0 件のコメント:

コメントを投稿