JSFiddle - React, Tailwind, and code Playground

by atuttle

HTML

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/nv.d3.js"></script>
<div id="graph"><svg /></div>

CSS

#graph {
    width: 90%;
    height: 300px;
}

JavaScript

var volumeData = [{"key":"Hit","values":[[1.3781628E12,12],[1.3782492E12,9],[1.3783356E12,9],[1.378422E12,4],[1.3785084E12,2],[1.3785948E12,3],[1.3786812E12,6],[1.3787676E12,5],[1.378854E12,1],[1.3789404E12,5],[1.3790268E12,1],[1.3791132E12,3],[1.3791996E12,0],[1.379286E12,2],[1.3793724E12,0]]},{"key":"Miss","values":[[1.3781628E12,3],[1.3782492E12,3],[1.3783356E12,1],[1.378422E12,12],[1.3785084E12,4],[1.3785948E12,7],[1.3786812E12,10],[1.3787676E12,13],[1.378854E12,14],[1.3789404E12,8],[1.3790268E12,5],[1.3791132E12,2],[1.3791996E12,3],[1.379286E12,11],[1.3793724E12,6]]}];
		

(function(data){
    var colors = d3.scale.category20();
    keyColor = function(d, i) {return colors(d.key)};
    
    var chart;
    nv.addGraph(function() {
        chart = nv.models.stackedAreaChart()
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .color(keyColor);
        
        chart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
        
        chart.yAxis.tickFormat(d3.format('d'));
        
        d3.select('#graph svg')
        .datum(data)
        .transition().duration(0)
        .call(chart);
        
        //nv.utils.windowResize(chart.update);
        
        return chart;
    });
})(volumeData);