<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
<title>東京の気温</title>
<style>
body { background-color:#EEE; margin:0px auto; }
#result{ position:relative; width:520px; height:260px;
margin:10px auto 0; background-color:#FFF; }
#result svg { position:absolute; top:10px; left:0; }
#result svg circle { margin:5px 0 0 0; font-size:11px; }
#result .axis path, #result .axis line{ fill:none; stroke: #666;
shape-rendering:crispEdges; }
#result .axis text { font-size:12px; }
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function initiale() {
var tokyo = [
['2016/01', 10.6, 1.8],
['2016/02', 12.2, 3.1],
['2016/03', 14.9, 6.1],
['2016/04', 20.3, 11.3],
['2016/05', 25.2, 15.7],
['2016/06', 26.3, 19.1],
['2016/07', 29.7, 22.1],
['2016/08', 31.6, 23.9],
['2016/09', 27.7, 21.9],
['2016/10', 22.6, 15.3],
['2016/11', 15.5, 8.1],
['2016/12', 13.8, 4.5]
];
var w = 480; var h = 260; // SVG要素の幅と高さ
var xAxisPad = 40; // x軸表示余白
var yAxisPad = 60; // y軸表示余白
var ydmax = 37; // y軸max値
var displayNum = tokyo.length- 1; // 表示月数
var monthW = (w - xAxisPad) / displayNum; // 1月分の横幅
// SVG(Scalable Vector Graphics)作成
var svg = d3.select("#result") // ID名resultの要素を指定
.append("svg") // svg要素を追加
.attr("width", w+20) // svg要素の横幅値wを指定
.attr("height", h); // svg要素の縦幅値hを指定
svg.append("text") // タイトル挿入
.attr("x",50)
.attr("y",18)
.attr("font-size", "16px")
.style("text-anchor", "start" )
.text("東京 平均最高/最低気温");
// 軸
var xScale = d3.time.scale()
.domain([new Date(2016,0),new Date(2016,11)]) // xの最小,最大値
.range([0, w - xAxisPad]); // x目盛の最小,最大値位置
var yScale = d3.scale.linear() // y目盛を線形とする
.domain([ydmax, 0]) // yの最大,最小値
.range([0, h- yAxisPad]); // y目盛の最大,最小値位置
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(d3.time.format("%y/%m")) // x軸の目盛を年/月とする
.tickSize(7, -h)
.ticks(7); // 目盛表示点数を7とする
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(7, -w + xAxisPad)
.orient("left"); // y軸を左に配置
svg.append("g")
.attr("class", "axis")
.attr("transform","translate("+ xAxisPad +","+(h- yAxisPad)+")")
.call(xAxis)
.append("text")
.attr("x",200)
.attr("y",33)
.text("年/月"); // x軸の説明
svg.append("g")
.attr("class", "axis")
.attr("transform","translate("+ xAxisPad +",0)")
.call(yAxis)
.append("text")
.attr("transform","translate(0,"+ h*0.3 +"),rotate(-90)")
.attr("y",-26)
.style("text-anchor", "end" )
.text("気温(℃)"); // y軸の説明
// 折れ線グラフを描く
var line = d3.svg.line()
.x(function(d, i){ return (i * monthW) + xAxisPad; })
.y(function(d){ return h- yAxisPad- ((h- yAxisPad)/ ydmax* d[1]);});
var line2 = d3.svg.line()
.x(function(d, i){ return (i * monthW) + xAxisPad; })
.y(function(d){ return h- yAxisPad -((h- yAxisPad)/ ydmax *d[2]);});
svg.append("path")
.attr("class", "high")
.attr("d", line(tokyo))
.attr("stroke", "#ed5454")
.attr("fill", "none");
svg.append("path")
.attr("class", "low")
.attr("d", line2(tokyo))
.attr("stroke", "#3874e3")
.attr("fill", "none");
// 散布図 --- データ点を表示
svg.selectAll(".high_circle")
.data(tokyo)
.enter()
.append("circle")
.attr("class", "high_circle")
.attr("cx",function(d,i){ return (i * monthW) + xAxisPad; })
.attr("cy",function(d){ return h- yAxisPad -((h- yAxisPad)/ ydmax *d[1]);})
.attr("r", 0)
.attr("stroke", "#ed5454")
.attr("stroke-width", "1px")
.attr("fill", "#f8d7d7")
.transition()
.duration(1000)
.attr("r", 4);
svg.selectAll(".low_circle")
.data(tokyo)
.enter()
.append("circle")
.attr("class", "low_circle")
.attr("cx",function(d,i){ return (i * monthW) + xAxisPad; })
.attr("cy",function(d){ return h- yAxisPad -((h- yAxisPad)/ ydmax *d[2]);})
.attr("r", 0)
.attr("stroke", "#3874e3")
.attr("stroke-width", "1px")
.attr("fill", "#bdd0f4")
.transition()
.duration(1000)
.attr("r", 4);
// テキスト --- データ点の値を表示
svg.selectAll(".high_text")
.data(tokyo)
.enter()
.append("text")
.attr("class", "high_text")
.text(function(d) { return d[1]; })
.attr("font-size", "12px")
.attr("fill", "#ed5454")
.attr("x",function(d,i){ return (i* monthW)+ xAxisPad- 6; })
.attr("y", function(d){
return h- yAxisPad- ((h- yAxisPad)/ ydmax *d[1])+ 16;});
svg.selectAll(".low_text")
.data(tokyo)
.enter()
.append("text")
.attr("class", "low_text")
.text(function(d) { return d[2]; })
.attr("font-size","12px")
.attr("fill", "#3874e3")
.attr("x", function(d, i){ return(i * monthW)+ xAxisPad- 6; })
.attr("y", function(d){
return h- yAxisPad- ((h- yAxisPad)/ ydmax* d[2])+ 16;});
}; // end of initiale -----------------------
</script>
</head>
<body onload="initiale()">
<div id="result"></div>
</body>
</html>