JSFiddle - React, Tailwind, and code Playground

by Benjamin DeLong

HTML

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/graph.css">
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/detail.css">
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/legend.css">
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/examples/css/extensions.css">

<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v2.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Class.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Compat.ClassList.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Graph.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Graph.Renderer.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Graph.Renderer.Area.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Graph.Renderer.Line.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Graph.Renderer.Bar.js"></script>
<script src="http://code.shutterstock.com/rickshaw/src/js/Rickshaw.Graph.Renderer.ScatterPlot.js"></script>
<script>
    Rickshaw.namespace('Rickshaw.Graph.RangeSlider');

Rickshaw.Graph.RangeSlider = function(args) {

    var element = this.element = args.element;
    var graph = this.graph = args.graph;

    $( function() {
        $(element).slider( {

            range: true,
            min: graph.dataDomain()[0],
           ...

CSS

div, span, p, td {
    font-family: Arial, sans-serif;
}

#chart {
    display: inline-block;
}
#chart path {
    -webkit-transition: opacity 0.2s linear;
}
#legend {
    display: inline-block;
    position: relative;
    left: 8px;
}
#legend_container {
    position: absolute;
    right: 0;
    bottom: 26px;
    width: 0;
}
#chart_container {
    position: relative;
    display: inline-block;
}
#smoother {
    margin: 0 0 10px 16px;
    width: 100px;
}
.rickshaw_graph .detail {
    left: -1000;
}
#chart {
    border: 1px solid #f0f0f0;
}
#side_panel {
    padding: 0 20px 20px 0;
    width: 240px;
    display: inline-block;
    vertical-align: top;
}
#side_panel section {
    color: #505050;
    font-size: 12px;
}
#side_panel section h6 {
    margin: 0 0 1em 0;
    font-size: 12px;
    font-weight: normal;
}
#side_panel .ui-slider-horizontal {
    height: 1px !important;
    border-color: #e0e0e0;
    margin-bottom: 10px;
}
#side_panel .ui-slider-handle {
    border-color: #a0a0a0;
    height: 9px !important;
    width: 9px !important;
    top: -5px !important;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}
#legend {
    background-color: white;
    margin-left: 0;
    padding: 0;
    left: 0;
}
#legend .label {
    color: #404040;
}
#legend .action {
    color: black;
    opacity: 0.5;
}
#legend ul {
    padding: 0;
}
h1 {
    font-family: Franklin Gothic Medium, UnDotum, Helvetica, Arial;
    font-weight: normal;
    font-size: 20px;
}
section {
    border: none;
    border-top: 1px solid #eaeaea;
    padding: 15px 0;
}
#smoother {
    margin: 5px 0 0 10px;
    width: 90%;
}
label.disabled {
    opacity: 0.4;
}
#renderer_form.toggler {
    display: block;
    margin: 0;
}
#renderer_form.toggler input[type=radio]:checked {
    outline: 2px solid steelblue;
}
#renderer_form.toggler input[type=radio] {
    -moz-appearance: button;
    background: white;
    margin: 0 7px;
    width: 39px;
    height: 26px;
    position:...

JavaScript

var maxHeight = 250;
var palette = new Rickshaw.Color.Palette();

var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
    height: maxHeight,
            
        renderer: 'bar',
        series: [
                {
                        name: "Best Practices",
                        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 }, { x: 1577873800, y: 55317240 },{ x: 1893443600, y: 55317240 } ],
                        color: palette.color()
                },
                {
                        name: "Conservation",
                        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 }, { x: 1577873800, y: 55317240 },{ x: 1893443600, y: 55317240 } ],
                        color: palette.color()
                },
                {
                        name: "High",
                        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 }, { x: 1577873800, y: 55317240 },{ x: 1893443600, y: 55317240 } ],
                        color: palette.color()
                },
                {
                        name: "High - BP",
...