JSFiddle - React, Tailwind, and code Playground

by tramtom

HTML

<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<div id='chart'>
  <svg style='height:500px'> </svg>
</div>

JavaScript

nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100})  
                .useInteractiveGuideline(true)  
                .transitionDuration(350)  
                .showLegend(true)       
                .showYAxis(true)        
                .showXAxis(true)  
  ;
    
 var myData = data();  

  chart.xAxis     
      .axisLabel('Time')
      .tickFormat(d3.format(',r'));

  var yScale = d3.scale.linear()
        .domain([
                         d3.min(myData, function (d) {
                             return d.y;
                         }) - 100,
                         d3.max(myData, function (d) {
                             return d.y;
                         }) + 100
                    ])
                    .range([
                         d3.min(myData, function (d) {
                             return d.y;
                         }),
                         d3.max(myData, function (d) {
                             return d.y;
                         })
                    ]);
    
  chart.yAxis     
      .axisLabel('Score')
      .scale(yScale)
      .tickFormat(d3.format('.02f'));


 

  d3.select('#chart svg')    
      .datum(myData)       
      .call(chart);          

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});
/**************************************
 * Simple test data generator
 */
function data() {
  var serieA = [],serieB = [],
      serieC = [];

  
  for (var i = 0; i < 50; i++) {
      serieA.push({x: i, y: 100});
      serieB.push({x: i, y: 200});
      serieC.push({x: i, y: 400});
  }
    
    
  for (var i = 50; i < 100; i++) {
      serieA.push({x: i, y: 120});
      serieB.push({x: i, y: 205});
      serieC.push({x: i, y: 390});
  }
    
  for (var i = 100; i < 120; i++) {
      serieA.push({x: i, y: 120});
      serieB.push({x: i, y: 215});
      serieC.push({x: i, y: 390});
  }


  
  return [
    {
 ...