test11.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="./test11.js"></script>
</html>
test11.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 (℃)");
// 凡例
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'])
.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; });
実行例 (fc2に置いてあるページに飛びます)
