D3 Examples - Vertical bar chart with negative values

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!

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Land Ocean Temperature Index</title>
        <!-- // <script type="text/javascript" src="../d3.v3.js"></script> -->
        <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>
​
        <script type="text/javascript" src="./horizontal-bar-temperatures.js"></script>
​
    </body>
</html>
​
    