Exercise from the “Interactive Data Visualization for the Web, Second Edition” by Scott Murray. Forked from the example: 09_25_adding_values.html
Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <p><button>Click on this button to add a new data value to the chart!</button></p> <script type="text/javascript"> //Width and height var w = 900; 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]) .paddingInner(0.05); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, h]); //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 h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(0, 0, " + Math.round(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 h - 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() { //Add one new value to dataset var maxValue = 25; var newNumber = Math.floor(Math.random() * maxValue); //New random integer (0-24) dataset.push(newNumber); //Add new number to array //Update scale domains xScale.domain(d3.range(dataset.length)); //Recalibrate the x scale domain, given the new length of dataset yScale.domain([0, d3.max(dataset)]); //Recalibrate the y scale domain, given the new max value in dataset //Select… var bars = svg.selectAll("rect") //Select all bars .data(dataset); //Re-bind data to existing bars, return the 'update' selection //'bars' is now the update selection //Enter… bars.enter() //References the enter selection (a subset of the update selection) .append("rect") //Creates a new rect .attr("x", w) //Initial x position of the rect beyond the right edge of SVG .attr("y", function(d) { //Sets the y value, based on the updated yScale return h - yScale(d); }) .attr("width", xScale.bandwidth()) //Sets the width value, based on the updated xScale .attr("height", function(d) { //Sets the height value, based on the updated yScale return yScale(d); }) .attr("fill", function(d) { //Sets the fill value return "rgb(0, 0, " + Math.round(d * 10) + ")"; }) .merge(bars) //Merges the enter selection with the update selection .transition() //Initiate a transition on all elements in the update selection (all rects) .duration(500) .attr("x", function(d, i) { //Set new x position, based on the updated xScale return xScale(i); }) .attr("y", function(d) { //Set new y position, based on the updated yScale return h - yScale(d); }) .attr("width", xScale.bandwidth()) //Set new width value, based on the updated xScale .attr("height", function(d) { //Set new height value, based on the updated yScale return yScale(d); }); //Update all labels var labels = svg.selectAll("text") .data(dataset); labels.enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", function(d) { if (d < 0.07 * maxValue){ return "black" } else { return "white" } }) .attr("x", function(d, i) { return w + xScale.bandwidth() / 2; }) .attr("y", function(d) { if (d < 0.07 * maxValue){ return h - yScale(d) - 7 } else { return h - yScale(d) + 14; } }) .merge(labels) .transition() .duration(500) .attr("x", function(d, i) { //Set new x position, based on the updated xScale return xScale(i) + xScale.bandwidth() / 2; }) }); </script></body> https://d3js.org/d3.v4.min.js