JSFiddle - React, Tailwind, and code Playground

by forivall

HTML

<script src="https://rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.css">
<script src="https://rawgit.com/liquidpele/nvd3/gh-pages/examples/lib/stream_layers.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<!-- <div style="height: 100px"></div> -->
<!-- <button id="toggle">toggle grouping</button> -->

<button id="toggle2">toggle type</button>
<span id="chart-type-name"></span>
<!-- <div style="position: absolute; top: 0, height: 400px, width: 400px"><div id="chart"></div></div> -->
<div id="chart">

CoffeeScript

test_data = stream_layers(3,16,0.1)
test_data_1 = _.zip.apply(_, test_data)
.map((data, i) -> {x: data[0].x, value: data[0].y, value2: data[1].y, value3: data[2].y})
console.log test_data
draw = (opts={}) ->
    data_graphic _.defaults {}, opts,
        max_x: test_data_1.length
        target: '#chart'
        width: $('#chart').width()
        height: 400
        data: test_data_1
        x_accessor: 'x'
        y_accessor: 'value'
        chart_type: 'line'
        transition_on_update: false
        interpolate: 'monotone'
available_opts = [
    {chart_type: 'line', title: 'line', area: false},
    {chart_type: 'line', title: 'area', area: true},
    {chart_type: 'line', title: 'lines', y_accessor: ['value', 'value2', 'value3']},
    {chart_type: 'histogram', binned: true},
    {chart_type: 'point', size_accessor: 'value2', color_accessor: 'value3'},
    {chart_type: 'bar', y_accessor: 'x', x_accessor: 'value', baseline_accessor:'value2', predictor_accessor:'value3'},
    {chart_type: 'missing-data'}
]
draw(available_opts[0])
for interp in ['cardinal', 'monotone', 'linear', 'basis']
    available_opts.push {chart_type: 'line', title: interp, interpolate: interp, y_accessor: ['value', 'value2', 'value3']}
available_opts.push {chart_type: 'line', title: 'step', interpolate: 'step', area: true}
available_opts.push {chart_type: 'line', title: 'partial missing', interpolate: 'step', area: true, data: _.filter(test_data_1, -> Math.random() > 0.7)}
t = 0
d3.select('#toggle2').on 'click', ->
  draw(opts=available_opts[t=(t+1)%available_opts.length])
  d3.select('#chart-type-name').text(opts.chart_type)