Built with blockbuilder.org
This is an example copied from Interactive Data Visualization for the web.
I updated it with d3.v4.
Last active
August 1, 2016 11:34
-
-
Save EmbraceLife/0ee0713d9398e617dac62ade2fd99338 to your computer and use it in GitHub Desktop.
11. click-once barChart transition
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
| license: gpl-3.0 |
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="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3: A bar chart that transitions to new data!</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style type="text/css"> | |
| </style> | |
| </head> | |
| <body> | |
| <p>Click on this text to update the chart with new data values (once).</p> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 600; | |
| var h = 250; | |
| var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
| 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
| var xScale = d3.scaleBand() | |
| // using data index as input range | |
| .domain(d3.range(dataset.length)) | |
| .rangeRound([0, w]) | |
| .padding(0.05); | |
| var yScale = d3.scaleLinear() | |
| .domain([0, d3.max(dataset)]) | |
| .range([h, 0]); | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Create bars | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d, i) { | |
| return xScale(i); | |
| }) | |
| .attr("y", function(d) { | |
| return yScale(d); | |
| }) | |
| .attr("width", xScale.bandwidth()) | |
| .attr("height", function(d) { | |
| return h - yScale(d); | |
| }) | |
| .attr("fill", function(d) { | |
| return "rgb(0, 0, " + (d * 10) + ")"; | |
| }); | |
| //Create labels | |
| svg.selectAll("text") | |
| .data(dataset) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { | |
| return d; | |
| }) | |
| .attr("text-anchor", "middle") | |
| .attr("x", function(d, i) { | |
| return xScale(i) + xScale.bandwidth() / 2; | |
| }) | |
| .attr("y", function(d) { | |
| return yScale(d) + 14; | |
| }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "white"); | |
| //On click, update with new data | |
| d3.select("p") | |
| .on("click", function() { | |
| dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, | |
| 5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ]; | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .transition() | |
| .attr("y", function(d) { | |
| return yScale(d); | |
| }) | |
| .attr("height", function(d) { | |
| return h - yScale(d); | |
| }) | |
| .attr("fill", function(d) { | |
| return "rgb(0, 0, " + (d * 10) + ")"; | |
| }); | |
| svg.selectAll("text") | |
| .data(dataset) | |
| // without transition(), new label will appear much faster without transition | |
| .transition() | |
| .text(function(d) { | |
| return d; | |
| }) | |
| .attr("x", function(d, i) { | |
| return xScale(i) + xScale.bandwidth() / 2; | |
| }) | |
| .attr("y", function(d) { | |
| return yScale(d) + 14; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment