Vertical bar chart with negative values

Created for #KnightD3, a vertical bar chart with negative values. Based on (and slightly bastardised) Mike Bostock's "Bar chart with negative values" /mbostock/2368837 ~~There are some aspects that could be done more elegantly / D3-ish ways. (E.g. x axis values should be formatted as proper dates, not numbers).~~ < thanks to [~jalapic] for the tip, nicely fixed!

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Land Ocean Temperature Index</title>
		
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

html, body, * {
				font-family: Arial, sans-serif;
				text-align: center;
				font-size: 14px 65%;
			}

div#title {
			    width: 880px;
			    margin: 10px auto 0;
			    padding: 5px 20px;
			    background-color: grey;
			    border: 1px solid grey;
			    color: white;
			    box-shadow: 3px 0px 3px lightgrey;
			}

h1 {
			    font-family: Georgia, serif;
			    font-size: 1.4em;
			    letter-spacing: 1px;
			    margin: 0 auto;
			}

h2 {
				font-size: .8em;
				font-weight:100;
				margin: .3em auto;
			}

div#chart {
				width:920px;
				margin: 0 auto 1em;
				border: 1px solid grey;
				box-shadow: 3px 3px 3px lightgrey;
			}

.bar.positive {
			  fill: darkred;
			}

.bar.negative {
			  fill: steelblue;
			}

g.infowin {
				fill: grey;
			}

g.infowin text,
			.axis text {
			  font: 11px sans-serif;
			  fill:grey;
			}

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

path.domain {
				stroke:none;
			}

</style>
	</head>
	<body>

<div id="title">
			<h1>
				Land &amp; Ocean Temperature Annual Index, 1880 - 2015
			</h1>
			<h2>Base period: 1951-1980 | Hover your cursor over bar to get exact figures</h2>
		</div>
		<div id="chart"></div>

</body>
</html>

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