JSFiddle - React, Tailwind, and code Playground

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.js"></script>

CSS

path {
  stroke: #000;
  stroke-width: 1;
  fill: none;
}

JavaScript

var w = 300,
    h = 100;

var svg = d3.select('body').append('svg')
  .attr('width', w)
  .attr('height', h);

/* make some fake data
[
  [ {mon:1, val: 0.3343}, ...],
  ...
]
*/
var data = d3.range(2007, 2012).map(function(d) {
  return d3.range(0, 12).map(function(d) {
    return { mon: d, val: Math.random() };
  });
});
  
var x = d3.scale.linear().domain([0,12]).range([0, w]),
    y = d3.scale.linear().domain([0,1]).range([0,h]);
  
var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.mon); })
    .y(function(d) { return y(d.val); });
  
var group = svg.selectAll('path')
    .data(data)
  .enter().append('path')
.attr("d", function(d) {console.log(this); return line(d)})
//.attr("d", line);