Simple Bar Charts

by Ryan

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<button id="update">Update</button>

CSS

div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript

var data = [1, 2, 3, 4, 5];

var redraw = function(){ 
    var div = d3.select("body").selectAll("div");
    var divUpdate = div.data(data);
    var divEnter = divUpdate.enter().append("div");
    var divExit = divUpdate.exit();
    
    divUpdate.transition().duration(250)
        .style("width", function(d) { return d*50 + "px"; });
    divUpdate.select("span").text(function(d) { return d;});

    divEnter.style("width", 0)
        .transition().duration(250)
        .style("width", function(d) { return d*50 + "px"; });
    divEnter.append("span").text(function(d) { return d; });
};

d3.select("#update").on("click", function(d){
    for(var i=0; i<data.length; i++){
        var ri = Math.floor(Math.random()*data.length);
        var temp = data[i];
        data[i] = data[ri];
        data[ri] = temp;
    }
    redraw();
});