### Example07 - Scalable barChart
Built with blockbuilder.org
Last active
March 14, 2016 13:24
-
-
Save jjelosua/51092008937c6d4fdd2b to your computer and use it in GitHub Desktop.
d3intro_exercise_hbarchart_solution
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
| persona | edad | |
|---|---|---|
| Juan Elosua | 39 | |
| Marta Alonso | 24 | |
| Lucas Alcaraz | 23 | |
| Paco González | 25 | |
| Beatriz Lungo | 22 | |
| Pedro Alcorta | 24 | |
| Jorge Cardenas | 21 | |
| Manuel Caamaño | 22 | |
| Lola Gutierrez | 24 | |
| Silvia Vázquez | 26 |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Intro d3js examples</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| .score {fill: white} | |
| .name{fill: black} | |
| rect { | |
| fill: steelblue; | |
| } | |
| rect:hover { | |
| cursor: pointer; | |
| fill: #64707D; | |
| } | |
| svg text { | |
| pointer-events: none; | |
| } | |
| line { | |
| stroke: #c1c1c1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Intro d3js - exercise horizontal barchart</h1> | |
| <!--<p> previous paragraph</p>--> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 600; | |
| var h = 500; | |
| var barPadding = 2; | |
| var left_width = 200; | |
| //Define sort order flag | |
| var sortOrder = false; | |
| //loading a csv file | |
| d3.csv("asistentes.csv", function(data) { | |
| var bar_height = h/data.length; | |
| var xScale = d3.scale.linear() | |
| .domain([0, d3.max(data, function(d) {return d.edad;})]) | |
| .range([0, w]); | |
| //Define sort function | |
| var sortGraph = function() { | |
| //Flip value of sortOrder | |
| sortOrder = !sortOrder; | |
| d3.selectAll("rect") | |
| .sort(function(a, b) { | |
| if (sortOrder) { | |
| return d3.ascending(a.edad, b.edad); | |
| } else { | |
| return d3.descending(a.edad, b.edad); | |
| } | |
| }) | |
| .transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(1000) | |
| .attr("y", function(d, i) { | |
| return i*(h/data.length); | |
| }); | |
| svg.selectAll("text.score") | |
| .sort(function(a, b) { | |
| if (sortOrder) { | |
| return d3.ascending(a.edad, b.edad); | |
| } else { | |
| return d3.descending(a.edad, b.edad); | |
| } | |
| }) | |
| .transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(1000) | |
| .attr("x", function(d) {return xScale(d.edad)+left_width;}) | |
| .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } ); | |
| svg.selectAll("text.name") | |
| .sort(function(a, b) { | |
| if (sortOrder) { | |
| return d3.ascending(a.edad, b.edad); | |
| } else { | |
| return d3.descending(a.edad, b.edad); | |
| } | |
| }) | |
| .transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(1000) | |
| .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } ) | |
| }; | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w+left_width) | |
| .attr("height", h); | |
| //Bind data | |
| var rect = svg.selectAll("rect") | |
| .data(data); | |
| //For every new created rectangle visualize | |
| rect.enter() | |
| .append("rect") | |
| .attr("x", left_width) | |
| .attr("y", function(d,i) {return i*(h/data.length);}) | |
| .attr("width", function(d) {return xScale(d.edad)}) | |
| .attr("height", function(d,i) {return (h/data.length) - barPadding+"px";}) | |
| .on("click", function() { | |
| sortGraph(); | |
| }); | |
| //Draw the values | |
| svg.selectAll("text.score") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr("class","score") | |
| .attr("x", function(d) {return xScale(d.edad)+left_width;}) | |
| .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } ) | |
| .attr("dx", -5) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "end") | |
| .text(function(d) {return d.edad;}); | |
| // Draw the names | |
| svg.selectAll("text.name") | |
| .data(data) | |
| .enter().append("text") | |
| .attr("x", left_width / 2) | |
| .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } ) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "middle") | |
| .attr("class", "name") | |
| .text(function(d){return d.persona;}); | |
| }); //end of csv method | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment