simple_sorted_d3_barchart.html

<!-- http://alignedleft.com/tutorials/d3/making-a-bar-chart -->
<div class="container">
	<style type="text/css">
		div.bar {
			display: inline-block;
			width: 20px;
			height: 75px;	/* Gets overriden by D3-assigned height below */
			margin-right: 2px;
			background-color: teal;
		}
	</style>
	<div class="chart"></div>
	<script type="text/javascript">
		var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
		11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

		d3.select(".chart").selectAll("div")
		.data(dataset.sort(function(a,b) {
			return  b - a;
		}))
		.enter()
		.append("div")
		.attr("class", "bar")
		.style("height", function(d) {
			var barHeight = d * 5;
			return barHeight + "px";
		});
	</script>
</div>