bar chart update

by Nivaldo

HTML

<button id="update">Update</button>

CSS

div {
    font-size: 0.5em;
    font-family: sans-serif;
    color: white;
    background-color: steelblue;
    text-align: right;
    padding: 0.5em;
    margin: 0.2em;
}

JavaScript

var data = [10, 10, 10, 10, 10, 10];

var scale = d3.scale.linear()
    .domain([0, 50])
    .range([0, 300]);

var bars = d3.select("body")
    .selectAll("div")
    .data(data);

bars
    .enter().append("div");

bars
    .style("width", function (d) {
        return scale(d) + "px";
    })
    .text(function (d) {
        return d;
    });


function updateChart(data) {
    bars = d3.selectAll("div")
        .data(data);

    // update the bars
    bars
        .transition().duration(500).ease("linear")
        .style("width", function (d) {
            return scale(d) + "px";
        })
        .text(function (d) {
            return d;
        });
};

function update() {
    var data = [4, 8, 15, 16, 23, 42];
    updateChart(data);
};

d3.select('#update')
    .on("click", update);