d3 Bar

HTML

<div class="chart">

JavaScript

var data = [4,6,8];

var chart = d3.select(".chart");
bar = chart.selectAll("div")
.data(data)
enter().append("div");

bar.attr("width", function(d){return d*10 + "px"});
bar.text(d);




var w = 300;
var h = 100;
var padding = 2;
var dataset = [10,4,15,17,3,9,7,11,14,6,9];
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);

function colorPicker(v){ return v<=12 ? "#666666": "#FF0033";}

svg.selectAll("rect").data(dataset).enter().append("rect")
.attr({
x: function(d,i){return i*(w/dataset.length)},
y: function(d){return h - (d*4)},
width: w/dataset.length -padding,
height: function(d){return d*4},
fill: function(d){return colorPicker(d)}});

svg.selectAll("text").data(dataset).enter().append("text").text(function(d){return d;})
.attr({
"text-anchor": "middle",
x: function(d,i){return i*(w/dataset.length)+(w/dataset.length - padding)/2},
y: function(d){return h - (d*4)+11},
"font-family":"sans-serif",
"font-size": 12,
"fill": "#fff"
});