bar chart update

by Nivaldo

HTML

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

CSS

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

JavaScript

function draw(data) {
    var scale = d3.scale.linear()
        .domain([0, 50])
        .range([0, 100]);

    var bars = d3.select("#work_queues_chart")
        .selectAll("div")
        .attr("id","work_queues_chart")
        .data(data);
     
    // enter selection
    bars
        .enter().append("div");

    // update selection
    bars
        .style("width", function (d) {return scale(d) + "%";})
        .text(function (d) {return d;});
    
    // exit selection
    bars
        .exit().remove();
};

function update() {
    console.log("here");
    var data = [4, 8, 15, 16, 23, 42];
    draw(data);
};

var data = [10, 10, 10, 10, 10, 10];
window.onload = draw(data);

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