Untitled

<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js"></script>

<style> .chart rect { fill: steelblue } </style>

<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>

<svg class="chart" width="100" height="500">
</svg>

<script>
var data = [4.8,15,16,23,42];
document.getElementById("data").innerHTML = data;

var x = d3.scale.linear()
	.domain([0,5])
    .range([0,100]);

var y = d3.scale.linear()
	.domain([0,42])
    .range([500,0]);

d3.select(".chart")
	.selectAll("rect")
	.data(data)
    .enter().append("rect")
    .attr("width",19)
    .attr("height",function(d) { return 500 - y(d); })
    .attr("x",function(d,i) { return x(i); })
    .attr("y",function(d) { return y(d); });
</script>

</body></html>