D3 Examples - 18.add-bar-fromLeft-transition

xxxxxxxxxx
 
<!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);                            
​
// ---- Now, dataset is one element longer -------
// 1. data-input range is 1 element longer
// 2. bandwidth is smaller to fit 1 more bar 
                    xScale.domain(d3.range(dataset.length));    
        
                    yScale.domain([0, d3.max(dataset)]);        
        
​
// ---- update dataset is same old dataset
                    var bars = svg.selectAll("rect")
                        .data(dataset);                         
​
                    
​
                    bars.enter()    
                        .append("rect")     
                        .merge(bars)
        
                    .transition()           
                        .duration(1000)
                        .attr("x", function(d, i) {     
                            return xScale(i);
                        })
                        .attr("y", function(d) {            
                            return yScale(d);
                        })
// ---- this bandwidth is smaller than previous bandwidth-------
                        .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")
             .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>
    