Rainfall graph

Example graph created using Rickshaw library for Intro to JavaScript

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.js"></script>
<div id="chart"></div>
<div id="legend"></div>

CSS

#legend {
    margin-top:1em;
}

JavaScript

// JSON data for the rainfall chart
var chartData = [
    {
        name: 'NSW & ACT',
        data: [ 
            { x: 2003, y: 400 },
            { x: 2004, y: 200 },
            { x: 2005, y: 0 }
        ], 
        color: 'steelblue'
    }, {    
        name: 'NT',
        data: [ 
            { x: 2003, y: 686 }, 
            { x: 2004, y: 637 },
            { x: 2005, y: 477 } 
        ], 
        color: 'orange'
    },
    {
        name: 'QLD',
        data: [
            { x: 2003, y: 200 }, 
            { x: 2004, y: 610 },
            { x: 2005, y: 478 } 
        ],
        color: 'maroon'
    },
    {
        name: 'SA',
        data: [
            { x: 2003, y: 260 }, 
            { x: 2004, y: 214 },
            { x: 2005, y: 206 } 
        ],
        color: 'red'
    },
    {
        name: 'TAS',
        data: [
            { x: 2003, y: 1227 }, 
            { x: 2004, y: 1223 },
            { x: 2005, y: 1250 } 
        ],
        color: 'green'
    },
    {
        name: 'VIC',
        data: [
            { x: 2003, y: 611 }, 
            { x: 2004, y: 576 },
            { x: 2005, y: 616 } 
        ],
        color: 'darkblue'
    },
    {
        name: 'WA',
        data: [
            { x: 2003, y: 388 }, 
            { x: 2004, y: 463 },
            { x: 2005, y: 306 } 
        ],
        color: 'black'
    }
];
// Use the Rickshaw Library to create a graph
var graph = new Rickshaw.Graph( {
    // attach the graph to the chart element
    element: document.querySelector("#chart"),
    // render as a stacked area chart
    renderer: 'area', 
    series: chartData
} );

// Create a legend
var legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.querySelector('#legend')
});

// add hover tips
var hoverDetail = new Rickshaw.Graph.HoverDetail({
    graph: graph,
    xFormatter: function(x) { return x }
});

// add highlighting when state is hovered over in legend
var highlighter = new...