D3 Examples - Bar Update Pattern

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        text {
            font-family: "Helvetica Neue", sans-serif;
            fill: #fff;
        }
    </style>
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/jeezy/lib/jeezy.min.js"></script>
    <script>
        var alpha = "abcdef".split("");
​
        var setup = d3_marcon({top: 10, bottom: 10, left: 10, right: 10, width: window.innerWidth, height: window.innerHeight, element: "body"});
​
        var width = setup.width, height = setup.height, svg = setup.svg;
​
        var x = d3.scaleBand()
            .rangeRound([0, width])
            .domain(alpha)
            .padding(.1);
​
        var y = d3.scaleLinear()
            .range([height, 0])
            .domain([0, 10]);
​
        var color = d3.scaleOrdinal(["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"]);
​
        redraw(random_data());
​
        d3.interval(function(){
            redraw(random_data());
        }, 1000);
​
        function redraw(data){
​
            // join
            var bar = svg.selectAll(".bar")
                .data(data, function(d){ return d.name; });
​
            var amount = svg.selectAll(".amount")
                .data(data, function(d){ return d.name; });
​
            // update
            bar
                .transition()
                    .attr("y", function(d){ return y(d.value); })
                    .attr("height", function(d){ return height - y(d.value); });
​
            amount
                .transition()
                    .attr("y", function(d){ return y(d.value); })
                    .text(function(d){ return d.value; });
​
            // enter
            bar.enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function(d){ return x(d.name); })
                    .attr("y", function(d){ return y(d.value); })
                    .attr("width", x.bandwidth())
                    .attr("height", function(d){ return height - y(d.value); })
                    .attr("fill", function(d){ return color(d.name); });
​
            amount.enter().append("text")
                    .attr("class", "amount")
                    .attr("x", function(d){ return x(d.name) + x.bandwidth() / 2; })
                    .attr("y", function(d){ return y(d.value); })
                    .attr("dy", 16)
                    .text(function(d){ return d.value; });
​
        }
​
        // Options
        // top, left, bottom, right, width, height, element
        function d3_marcon(options){
            var margin = {top: options.top, bottom: options.bottom, left: options.left, right: options.right},
                width = options.width - margin.left - margin.right,
                height = options.height - margin.top - margin.bottom,
                svg = d3.select(options.element).append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
​
            return {
                margin: margin,
                width: width,
                height: height,
                svg: svg
            }
        }
​
        function random_data(){
            return alpha.map(function(d){
                return {
                    name: d,
                    value: jz.num.randBetween(1, 10)
                }
            });
        }
​
    </script>
</body>
</html>
    