Love web applications » 横浜市人口棒グラフに目盛りを追加する

こんばんは。だんだん気候が夏に近づいてきましたね。私は暑いのが苦手なので、エアコンに頼りまくりです^^;

棒グラフに縦軸を追加する

今日は前回の記事「D3.jsで横浜市の人口棒グラフを表示する」で描いた棒グラフについて、縦軸を追加することにします。

スケール追加はカンタン

d3.scale()関数を使えばスケールを簡単に作れるみたいです。実装してみた結果が下のグラフです（画像をクリックすると、グラフのページに飛びます♪）。

ソースはこちら。軸を描くコードはたった３行です。

index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> <style type="text/css"> body { font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; } h1 { font-size: 16px; } svg { border: solid 1px #aaa; } .bar { fill: #004E9E; } .bar-label { fill: #ffffff; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axis text { font-size: 9px; } </style> <title>横浜市区別人口</title> </head> <body> <h1>横浜市区別人口[千人]</h1> <div id="graph"></div> <script type="text/javascript"> d3.json("yokohama_stat.json", function(error, json) { if( !error ) { main(json); } return; }); function main(stat) { var svg; var graph_width = 800; var graph_height = 400; var graph_padding = 20; var xaxis_margin = 0; var yaxis_margin = 25; var plotarea_width = graph_width - yaxis_margin - 2 * graph_padding; var plotarea_height = graph_height - xaxis_margin - 2 * graph_padding; var origin_dx = yaxis_margin + graph_padding; var origin_dy = plotarea_height + graph_padding; var bar_width = 30; var bar_space = 10; var bar_pitch = bar_width + bar_space; var label_padding = 10; // svgを追加 svg = d3.select("#graph").append("svg") .attr("width", graph_width) .attr("height", graph_height); // 横浜市TTLの値を配列から削除する stat.splice(0,1); // 棒グラフを描く svg.selectAll("rect.bar") .data(stat) .enter().append("rect") .attr("class","bar") .attr("x", function(d,i) { return origin_dx + bar_pitch * i + bar_space; }) .attr("y", function(d,i) { return origin_dy - d.stat['TTL']/1000; }) .attr("width", bar_width) .attr("height", function(d,i) { return d.stat['TTL']/1000; }); svg.selectAll("rect.bar") .data(stat) .exit() .remove(); // ラベルを描く svg.selectAll(".bar-label") .data(stat) .enter() .append("text") .attr("class", function(d) { return "bar-label"; }) .attr("transform", function(d, i) { return "translate("+ ( origin_dx + bar_pitch*i + bar_space + bar_width/2) +","+ (origin_dy - label_padding) +")rotate(-90)"; }) .attr("dy", ".35em") .text(function(d) { return d.key; }); svg.selectAll("rect.bar-label") .data(stat) .exit() .remove(); // 縦軸を追加する var scale = d3.scale.linear().domain([plotarea_height ,0]).range([0, plotarea_height]); var axis = d3.svg.axis().scale(scale).orient("left").ticks(5); svg.append("g").attr("class","axis").attr("transform",function(){ return "translate("+origin_dx+","+graph_padding+")"; }).call(axis); } </script> </body> </html>

これで縦軸のスケールが描けました。

ざっくりですが、グラフの値と元の表の値が合ってることが確認できました♥︎

次はこの人口データを、以前描いた横浜市地図上で表現することを考えてみようと思います。

それではまた♪