Built with blockbuilder.org
forked from EmbraceLife's block: 18.add-bar-fromLeft-transition
Last active
August 2, 2016 06:20
-
-
Save EmbraceLife/6390a6a77b917e8c136686937db69962 to your computer and use it in GitHub Desktop.
18.add-bar-fromRight-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: Adding values and elements to a chart</title> | |
| <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> | |
| <style type="text/css"> | |
| /* No style rules here yet */ | |
| </style> | |
| </head> | |
| <body> | |
| <p>Click on this text to add a new data value to the chart!</p> | |
| <script type="text/javascript"> | |
| var w = 600; | |
| var h = 450; | |
| 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() | |
| .domain(d3.range(dataset.length)) | |
| .rangeRound([0, w]) | |
| .padding(0.05); | |
| var yScale = d3.scaleLinear() | |
| .domain([0, d3.max(dataset)]) | |
| .range([h, 0]); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| 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) + ")"; | |
| }); | |
| 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"); | |
| d3.select("p") | |
| .on("click", function() { | |
| var maxValue = 25; | |
| var newNumber = Math.floor(Math.random() * maxValue); | |
| dataset.push(newNumber); | |
| xScale.domain(d3.range(dataset.length)); | |
| yScale.domain([0, d3.max(dataset)]); | |
| var bars = svg.selectAll("rect") | |
| .data(dataset); | |
| bars.enter() | |
| .append("rect") | |
| // ---- set the newly created rect at far right outside | |
| .attr("x", w) | |
| .attr("y", function(d){return yScale(d);}) | |
| // ---- combine enter and update elements together, for later transition | |
| .merge(bars) | |
| .transition() | |
| .duration(1000) | |
| .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) + ")"; | |
| }); | |
| var texts = svg.selectAll("text") | |
| .data(dataset) | |
| texts | |
| .enter().append("text") | |
| .attr("x", w) | |
| .attr("y", function(d){return yScale(d);}) | |
| .merge(texts) | |
| .transition() | |
| .duration(1000) | |
| .text(function(d) { | |
| return d; | |
| }) | |
| .attr("x", function(d, i) { | |
| return xScale(i) + xScale.bandwidth() / 2; | |
| }) | |
| .attr("y", function(d) { | |
| return yScale(d) + 14; | |
| }) | |
| .attr("text-anchor", "middle") | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "white"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment