Created
July 14, 2014 12:54
-
-
Save hitsujixgit/230711fe512df0da62a0 to your computer and use it in GitHub Desktop.
Add y-axis to bar graph using d3.js.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment