D3 Examples - add remove bars

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Adding and removing values from a chart (dynamic labels included)</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    
        <p id="add">Add new value</p>
        <p id="remove">Remove value</p>
            
        <script type="text/javascript">
​
            var w = 600;
            var h = 250;
            
            var dataset = [];
            for (var i = 0; i < 20; i++) {           
                var newNumber = Math.floor(Math.random() * 30);
                var newObject = { key: i, value: newNumber};
                dataset.push(newObject);            
            }
            
            var xScale = d3.scaleBand()
                            .domain(d3.range(dataset.length))
                            .rangeRound([0, w])
                            .paddingInner(0.05);
            
            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset, function(d) { return d.value; })])
                            .range([0, h]);
            
            var key = function(d) {
                return d.key;
            };
            
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            svg.selectAll("rect")
               .data(dataset, key)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return h - yScale(d.value);
               })
               .attr("width", xScale.bandwidth())
               .attr("height", function(d) {
                    return yScale(d.value);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d.value * 10) + ")";
               });
​
            svg.selectAll("text")
               .data(dataset, key)
               .enter()
               .append("text")
               .text(function(d) {
                    return d.value;
               })
               .attr("text-anchor", "middle")
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.bandwidth() / 2;
               })
               .attr("y", function(d) {
                    return h - yScale(d.value) + 14;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "white");
            
                d3.selectAll("p")
                .on("click", function() {
                    var paragraphID = d3.select(this).attr("id");
                    if (paragraphID == "add") {
                        var minValue = 2;
                        var maxValue = 25 - minValue;
                        var newNumber = Math.floor(Math.random() * maxValue) + minValue;
                        var lastKeyValue = dataset[dataset.length - 1].key;
                        dataset.push({
                            key: lastKeyValue + 1,
                            value: newNumber
                        });
                    } else {
                        dataset.shift();    
                    } 
                    
                    xScale.domain(d3.range(dataset.length));
                    yScale.domain([0, d3.max(dataset, function(d) { return d.value; })]);
​
                    var bars = svg.selectAll("rect")
                        .data(dataset, key);
                    
                    bars.enter()
                        .append("rect")
                        .attr("x", w)
                        .attr("y", function(d) {
                            return h - yScale(d.value);
                        })
                        .attr("width", xScale.bandwidth())
                        .attr("height", function(d) {
                            return yScale(d.value);
                        })
                        .attr("fill", function(d) {
                            return "rgb(0, 0, " + (d.value * 10) + ")";
                        })
                        .merge(bars)    
                        .transition()
                        .duration(500)
                        .attr("x", function(d, i) {
                            return xScale(i);
                        })
                        .attr("y", function(d) {
                            return h - yScale(d.value);
                        })
                        .attr("width", xScale.bandwidth())
                        .attr("height", function(d) {
                            return yScale(d.value);
                        });
​
                    bars.exit()
                        .transition()
                        .duration(500)
                        .attr("x", -xScale.bandwidth())
                        .remove();
​
                    var labels = svg.selectAll("text")
                        .data(dataset, key);
​
                    labels.exit()
                        .transition()
                        .duration(500)
                        .attr("x", -xScale.bandwidth())
                        .remove();
                    
                    labels.enter()
                        .append("text")
                        .text(function(d) {
                            return d.value;
                        })
                        .attr("text-anchor", "middle")
                        .attr("x", w)
                        .attr("y", function(d) {
                            return h - yScale(d.value) + 14;
                        })                      
                       .attr("font-family", "sans-serif")
                       .attr("font-size", "11px")
                       .attr("fill", "white")
                       .merge(labels)   //Update…
                       .transition()
                       .duration(500)
                       .attr("x", function(d, i) {
                            return xScale(i) + xScale.bandwidth() / 2;
                       });
​
                });
​
        </script>
    </body>
</html>
    