Traffic fatalities in North Carolina over 2012

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Traffic Fatalities in North Carolina, 2012</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js" charset="utf-8"></script>
		<style media="screen">
			body {
				margin: 0;
				background-color: lightGrey;
				font-family: Helvatica, sans-serif;
			}

#container {
				width: 600px;
				background-color: white;
				box-shadow: 3px 3px 5px #ccc;
				margin: 50px auto 0;
				padding: 40px;
			}

h2 {
				text-align: center;
			}

p {
				text-align: center;
			}

svg	{
				background-color: white;
			}

g.bar text {
				opacity: 0;
				font-size: 11px;
				font-family: sans-serif;
				font-weight: bold;
				text-anchor: end;
			}

g.bar:hover text {
				opacity: 1;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

.axis text {
				font-family: sans-serif;
				font-size: 11pt;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="container">
		<h2>Traffic Fatalities in North Carolina, 2012</h2>
		<p>as reported by the <a href="https://connect.ncdot.gov/business/DMV/DMV%20Documents/2012%20Crash%20Facts.pdf">North Carolina Department of Transportation</a></p>
		</div>
	</body>
	<script type="text/javascript">
		var dataset = [{month: 'January', fatalities: 73}, {month: 'February', fatalities: 86}, {month: 'March', fatalities: 97},
		 	{month: 'April', fatalities: 85}, {month: 'May', fatalities: 109}, {month: 'June', fatalities: 118},
		 	{month: 'July', fatalities: 125}, {month: 'August', fatalities: 120}, {month: 'September', fatalities: 128},
			{month: 'October', fatalities: 116},{month: 'November', fatalities: 110}, {month: 'December', fatalities: 95}];

var w = 600;
		var h = 600;
		var padding = [ 50, 50, 50, 100];

var yScale = d3.scale.ordinal()
			.domain(dataset.map(function(d){ return d.month; }))
			.rangeRoundBands([padding[0], h - padding[2] ], 0.1);

var xScale = d3.scale.linear()
			.domain([0, d3.max(dataset, function(d){ return d.fatalities; })])
			.range([0, w - padding[1] - padding[3]]);

var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient('bottom');

var yAxis = d3.svg.axis()
			.scale(yScale)
			.orient('left');

var svg = d3.select('#container')
			.append('svg')
			.attr({
				width: w,
				height: h
			});

var groups = svg.selectAll("g")
			.data(dataset)
			.enter()
			.append("g")
			.attr({
				class: 'bar'
			});

var bars = groups.append('rect')
			.attr({
				x: padding[3],
				y:  function(d){ return yScale(d.month); },
				width: 0,
				height: yScale.rangeBand(),
				fill: 'FireBrick'
		 	});

var text = groups.append('text')
			.text(function(d){ return d.fatalities; })
			.attr({
				x: 0,
				y: function(d){ return yScale(d.month) + yScale.rangeBand()/2; },
			});

bars.transition()
			.delay( function(d, i){ return i * 25; })
			.duration(500)
			.attr({
				width: function(d){ return xScale(d.fatalities); },
			});

text.transition()
			.delay( function(d, i){ return i * 25; })
			.duration(500)
			.attr({
				x: function(d){ return xScale(d.fatalities) + padding[3] - 10;},
			});

svg.append('g')
			.attr({
				class: 'x axis',
				transform: 'translate(' + padding[3] + ', ' + (h - padding[2]) + ')',
			})
			.call(xAxis);

svg.append('g')
			.attr({
				class: 'y axis',
				transform: 'translate( ' + padding[3] + ', 0)',
			})
			.call(yAxis);

bars.on('mouseover', function(){
				d3.select(this).attr({
					fill: 'CadetBlue'
				});
			})
			.on('mouseout', function(){
				d3.select(this).transition()
					.duration(100)
					.attr({
					fill: 'FireBrick'
				});
			});

</script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js