Last active
August 29, 2015 14:16
-
-
Save hwangmoretime/6a66732a00b258b2d97a to your computer and use it in GitHub Desktop.
DataViz 101: Simple Bar Chart Interaction
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| width: 960px; | |
| margin: auto; | |
| position: relative; | |
| } | |
| #n { | |
| position: absolute; | |
| top: 20px; | |
| right: 30px; | |
| font-family: "Helvetica Neue" | |
| } | |
| #n input { | |
| width: 150px; | |
| } | |
| output { | |
| display: block; | |
| font-size: 72px; | |
| } | |
| .bar { | |
| fill: steelblue; | |
| } | |
| .axis text { | |
| font-size: 14px; | |
| font-family: "Garamond" | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| </style> | |
| <body> | |
| <div id="n"> | |
| Top forty <button name="gender" | |
| value="male">male</button> <br> | |
| baby names in year | |
| <output name="n"></output> | |
| <input type="range" min="1880" max="2013" value="1992"> | |
| </div> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var margin = {top: 30, right: 20, bottom: 80, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom | |
| var output = d3.select("output"), | |
| input = d3.select("input").on("change", y_changed).each(y_changed), | |
| gender_e = d3.select("button") | |
| year = "1992"; | |
| gender_e.on("click", g_changed).each(g_changed) | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var target_gender = "F"; | |
| function render() { | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("/hwangmoretime/raw/3bf25cffeef66aba194a/yob" + year + ".csv", type, function(error, data) { | |
| var gender_nest = d3.nest() | |
| .key(function(d) { return d.gender; }) | |
| .map(data); | |
| var gen_d = gender_nest[target_gender].slice(0,40); | |
| // Compute the scales’ domains. | |
| x.domain(gen_d.map(function(d) { return d.name; })); | |
| y.domain([0, d3.max(gen_d.map(function(d) { return d.count; }))]).nice(); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .style("text-anchor", "end") | |
| .attr("dx", "-.8em") | |
| .attr("dy", ".15em") | |
| .attr("transform", function(d) { | |
| return "rotate(-65)" | |
| }); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| svg.selectAll(".bar") | |
| .data(gen_d) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.name); }) | |
| .attr("y", function(d) { return y(d.count); }) | |
| .attr("height", function(d) { return height - y(d.count); }) | |
| .attr("width", x.rangeBand()); | |
| }); | |
| } | |
| function type(d) { | |
| d.count = +d.count; | |
| return d; | |
| } | |
| function y_changed() { | |
| year = this.value; | |
| output.text(year); | |
| d3.select("svg").remove() | |
| render(); | |
| } | |
| function g_changed() { | |
| prev_gender = this.value; | |
| if (prev_gender == "female") { | |
| gender_e.text("male"); | |
| this.value = "male"; | |
| target_gender = "M"; | |
| } else { | |
| gender_e.text("female"); | |
| this.value = "female"; | |
| target_gender = "F"; | |
| } | |
| d3.select("svg").remove() | |
| render(); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment