Rickshaw multiple series as lines, with interactive legend and tooltips

using d3 + rickshaw

by hrabinowitz

HTML

<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.css">
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/detail.css">
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/graph.css">
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/legend.css">
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.css">
<script src="http://code.shutterstock.com/rickshaw/rickshaw.js"></script>

<p>Graph of US Population by Region over decades</p>

<div id="chart_container">
        <div id="y_axis"></div>
        <div id="chart"></div>
        <div id="legend_and_offsets">
            <div id="legend">
            </div>
            <form id="offset_form" class="toggler">
                <input type="radio" name="offset" id="lines" value="lines" checked>
                <label class="lines" for="lines">lines</label><br>
                <input type="radio" name="offset" id="stack" value="zero">
                <label class="stack" for="stack">stack</label>
            </form>
    </div>
</div>

CSS

#chart_container {
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
}
#chart {
        float: left;
}
#legend {
        float: left;
        margin-left: 15px;
}
#offset_form {
        /*float: left;*/
        margin: 2em 0 0 15px;
        font-size: 13px;
}
#y_axis {
        float: left;
        width: 40px;
}


div, span, p, td {
	font-family: Arial, sans-serif;
}
#chart {
	display: inline-block;
}
#legend {
	display: inline-block;
	position: relative;
	left: 8px;
}
#legend_container {
	position: absolute;
	right: 0;
	bottom: 26px;
	width: 0;
}
#chart_container {
	float: left;
	position: relative;
}

#y_axis {
        float: left;
        width: 40px;
}
#offset_form {
        /*float: left;*/
        margin: 2em 0 0 15px;
        font-size: 13px;
}
#legend {
        /*float: left;*/
        /*margin-left: 15px;*/
}
#chart_container {
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
}
#legend_and_offsets {
    float: left;
}


#legend {
	background-color: rgb(221, 221, 221);
	/*margin-left: 0;*/
	padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
	left: 0;
}
#legend .label {
	color: #404040;
}
#legend .label:hover {
    color: black;
    font-weight: bold;
}
#legend .action {
	color: black;
	opacity: 0.5;
}
#legend ul {
	padding: 0;
}

JavaScript

// TODO: add our own pallette, with our colorschemes, and our technique for more colors
var palette = new Rickshaw.Color.Palette({scheme: 'munin', });

var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 540,
        height: 240,
        renderer: 'line',
        series: [
                {
                        name: "Northeast",
                        data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ],
                        color: palette.color()
                },
                {
                        name: "Midwest",
                        data: [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ],
                        color: palette.color()
                },
                {
                        name: "South",
                        data: [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ],
                        color: palette.color()
                },
                {
                        name: "West",
                        data: [ { x: -1893456000, y: 7082086 }, { x: -1577923200, y: 9213920 }, { x:...