Last active
January 21, 2016 17:22
-
-
Save yuta-01/e6af8341107c2c7d94fb to your computer and use it in GitHub Desktop.
bar chart(2015 1st 観客動員数)
This file contains 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
| [ | |
| { "date" : "2015/03/14", "vs" : "清水", "scoa" : "△0-0", "att" : 19537, "referee" : "扇谷 健司" }, | |
| { "date" : "2015/03/22", "vs" : "柏", "scoa" : "○3-2", "att" : 18193, "referee" : "井上 知大" }, | |
| { "date" : "2015/04/18", "vs" : "神戸", "scoa" : "△2-2", "att" : 16068, "referee" : "吉田 寿光" }, | |
| { "date" : "2015/04/29", "vs" : "F東京", "scoa" : "●0-1", "att" : 22318, "referee" : "木村 博之" }, | |
| { "date" : "2015/05/06", "vs" : "山形", "scoa" : "△1-1", "att" : 25009, "referee" : "村上 伸次" }, | |
| { "date" : "2015/05/16", "vs" : "仙台", "scoa" : "●0-3", "att" : 16764, "referee" : "佐藤 隆治" }, | |
| { "date" : "2015/05/30", "vs" : "甲府", "scoa" : "●0-2", "att" : 23197, "referee" : "吉田 寿光" }, | |
| { "date" : "2015/06/07", "vs" : "名古屋", "scoa" : "△1-1", "att" : 19030, "referee" : "東城 穣" } | |
| ] |
This file contains 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
| var w = 980, | |
| h = 500; | |
| d3.json("2015.json",function(json){ | |
| var padding = 80; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width",w) | |
| .attr("height",h); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(json, function(d){return d.att;})]) | |
| .range([h-padding,padding]) | |
| .nice(); | |
| var xScale = d3.scale.ordinal() | |
| .domain(json.map(function(d) { return d.vs; })) | |
| .rangeRoundBands([padding, w-padding], .5); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(5) | |
| .innerTickSize(- (w - padding*2 ) ) | |
| .outerTickSize(0) | |
| .tickPadding(15); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom"); | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip") | |
| .style("position", "absolute"); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(" + padding + ",0)") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(0)") | |
| .attr("y", 40) | |
| .attr("dy", 0) | |
| .style("text-anchor", "end") | |
| .text("観戦者数"); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate( 0 ,"+ (h-padding) + ")") | |
| .call(xAxis); | |
| svg.selectAll("rect") | |
| .data(json) | |
| .enter() | |
| .append("rect") | |
| .attr("class", "graf") | |
| .style("opacity", 0.7) | |
| .on("mouseover", function(){return tooltip.style("visibility", "visible");}) | |
| .on("mousemove", function(d){return tooltip | |
| .style("top", (event.pageY-180)+"px") | |
| .style("left",(event.pageX-80)+"px") | |
| .html("<div id ='mousemove'><ul><li>" + d.date + "</li><li>vs" + d.vs + d.scoa + "</li><li>観客動員数：" + d.att + "人</li><li>主審：" + d.referee + "</li></ul></div>")}) | |
| .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) | |
| .transition() | |
| .delay(500) | |
| .duration(1000) | |
| .each("start",function(){ | |
| d3.select(this) | |
| .attr({ | |
| height:0, | |
| y:h-padding | |
| }); | |
| }) | |
| .attr({ | |
| height:function(d){return h - yScale(d.att) - padding}, | |
| y:function(d){return yScale(d.att)}, | |
| width:xScale.rangeBand(), | |
| x:function(d) { return xScale(d.vs); } | |
| }); | |
| }); |
This file contains 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="master.css" type="text/css"> | |
| </head> | |
| <body> | |
| <h1>2015 1stステージ 観客動員数</h1> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="D3.js" charset="utf-8"></script> | |
| <script type="text/javascript" src="2015.json"></script> | |
| </body> | |
| </html> |
This file contains 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
| @charset "UTF-8"; | |
| @import url(http://fonts.googleapis.com/css?family=Exo+2:600); | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| text-align: center; | |
| font-family: 'Exo 2',sans-serif; | |
| padding: 0; | |
| margin: 0; | |
| background-color: #fdfdfd; | |
| } | |
| .graf{ | |
| fill: #333; | |
| stroke: #000; | |
| stroke-width:3px; | |
| } | |
| .graf:hover{ | |
| fill: #111; | |
| } | |
| .axis path{ | |
| fill:none; | |
| } | |
| .axis line{ | |
| opacity: 0.2; | |
| stroke: #333; | |
| } | |
| .axis text{ | |
| font-size: 16px; | |
| fill: #333; | |
| } | |
| #mousemove ul{ | |
| padding: 12px; | |
| display: inline-block; | |
| width: 180px; | |
| height: 120px; | |
| text-align: left; | |
| text-decoration: none; | |
| background-color: #fff; | |
| border: 3px solid #59b1eb; | |
| color: #59b1eb; | |
| letter-spacing: 1.6px; | |
| line-height: 1.9em; | |
| list-style:none; | |
| font-size: 16px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment