Rickshaw multiple series as with slider

using d3 + rickshaw

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 rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.0-rc.0/rickshaw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
<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></input>
            <label class="lines" for="lines">lines</label>
            <br>
            <input type="radio" name="offset" id="stack" value="zero"></input>
            <label class="stack" for="stack">stack</label>
        </form>
    </div>
    <div id="slider"></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;
}
/* for slider */
 #slider {
    margin-top: 10px;
    float:left;
}
/*
.ui-slider-horizontal {
    height: 1px !important;
    border-color: #e0e0e0;
    margin-bottom: 10px;
}
.ui-slider-handle {
    border-color: #a0a0a0;
    height: 9px !important;
    width: 9px !important;
    top: -5px !important;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}
*/

JavaScript

// on jQuery load
$(function () {

    // 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,
        ...