JSFiddle - React, Tailwind, and code Playground

by forivall

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.js"></script>
<script src="https://rawgit.com/liquidpele/nvd3/gh-pages/examples/lib/stream_layers.js"></script>
<script src="https://rawgit.com/liquidpele/nvd3/master/build/nv.d3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/liquidpele/nvd3/master/build/nv.d3.css">
<div id="chart"><svg></svg></div>

CSS

text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
html, body, #chart, svg {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

CoffeeScript

test_data = stream_layers(3,128,.1).map((data, i) ->
        return {
            key: 'Stream' + i,
            values: data
        }
    );

    nv.addGraph({
        generate: ->
            width = nv.utils.windowSize().width
            height = nv.utils.windowSize().height

            chart = nv.models.multiBarChart()
                .width(width)
                .height(height)
                .stacked(true)
                .delay(0)

            chart.dispatch.on('renderEnd', ->
                console.log('Render Complete');
            );


            svg = d3.select('#chart svg').datum(test_data);
            console.log('calling chart');
            svg.transition().duration(0).call(chart);

            return chart;
        ,
        callback: (graph) ->
            nv.utils.windowResize(->
                width = nv.utils.windowSize().width;
                height = nv.utils.windowSize().height;
                graph.width(width).height(height);

                d3.select('#test1 svg')
                    .attr('width', width)
                    .attr('height', height)
                    .transition().duration(0)
                    .call(graph);

            );
    });

###
chart = c3.generate({
    data: {
        rows: [
            ['data1', 'data2']
            [100,400]
            [200,500]
            [150,250]
            [300,700]
            [200,300]
        ]
        type: 'bar'
        groups: [['data1', 'data2']]
    }
})###