Bearcart Complex Bars

Bearcart bar plot with large number of data columns.

<!doctype>
<head>
  <link rel="stylesheet" href="rickshaw.min.css">
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="rickshaw.min.js"></script>

var palette = new Rickshaw.Color.Palette( {scheme: 'spectrum14'} );

d3.json('data.json', function(error, json) {

var graph = new Rickshaw.Graph( {
                element: document.querySelector("#chart"),
                min: 'auto',
                width: 750,
                height: 400,
                renderer: 'bar',
                series: [
                         {name: 'item',
                          color: palette.color(),
                          data: json[0].data},

{name: 'med',
                          color: palette.color(),
                          data: json[1].data},

{name: 'min',
                          color: palette.color(),
                          data: json[2].data},

{name: 'max',
                          color: palette.color(),
                          data: json[3].data},

{name: 'paras',
                          color: palette.color(),
                          data: json[4].data},

{name: 'words',
                          color: palette.color(),
                          data: json[5].data},

{name: 'sents',
                          color: palette.color(),
                          data: json[6].data},

{name: 'avgwords',
                          color: palette.color(),
                          data: json[7].data},

{name: 'nouns',
                          color: palette.color(),
                          data: json[8].data},

{name: 'verbs',
                          color: palette.color(),
                          data: json[9].data},

{name: 'modifiers',
                          color: palette.color(),
                          data: json[10].data},

{name: 'periods',
                          color: palette.color(),
                          data: json[11].data},

{name: 'commas',
                          color: palette.color(),
                          data: json[12].data},

{name: 'quotes',
                          color: palette.color(),
                          data: json[13].data},

{name: 'scores',
                          color: palette.color(),
                          data: json[14].data}
                          ]
                })

var xAxis = new Rickshaw.Graph.Axis.X( {
    graph: graph
} );

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph,
    xFormatter: function(x){return Math.floor(x / 10) * 10}
} );

var legend = new Rickshaw.Graph.Legend( {
    graph: graph,
    element: document.getElementById('legend')

} );

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
    graph: graph,
    legend: legend
});

graph.render();

});

</script>

</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js