JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="d3-line-chart" id="chart"></div>
<pre...

CSS

pre {
    display: none;
}
.d3-line-chart {
    font: 10px sans-serif;
}
.d3-line-chart ._axis path, .d3-line-chart ._axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.d3-line-chart ._line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.d3-line-chart path.area {
    fill: #e7e7e7;
}
.d3-line-chart .line1 {
    stroke: #5d9bd6;
}
.d3-line-chart .line2 {
    stroke: #ed8035;
}
.d3-line-chart .grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.d3-line-chart .grid path {
    stroke-width: 0;
}
.d3-line-chart .plot {
    fill: rgba(250, 250, 255, 0.6);
}
.d3-line-chart .legend {
    padding: 5px;
    font: 10px sans-serif;
    background: yellow;
    box-shadow: 2px 2px 1px #888888;
}
.d3-line-chart .dot {
    stroke: black;
}
.d3-line-chart .brush .extent {
    stroke: white;
    fill-opacity: 0.125;
    shape-rendering: crispEdges;
}

CoffeeScript

createCanvas = (el, width, height, margin, callFunc) ->
    result = d3.select(el).append("svg:svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("svg:g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    result = result.call(callFunc) if callFunc
    result
    
  drawHorizontalAxis = (canvas, component, width, height, title, id) ->
      canvas.append("g")
          .attr("id", if id? then id else "")
          .attr("class", "_x _axis")
          .attr("transform", "translate(0," + height + ")")
          .call(component)
        .append("text")
          .attr("x", width)
          .attr("y",  15)
          .attr("dy", "-0.29em")
          .style("text-anchor", "end")
          .text(title)
            
  drawVerticalAxis = (canvas, component, title, id) ->
      canvas.append("g")
        .attr("id", id)
        .attr("class", "_y _axis axisLeft")
        .call(component)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text(title)

  drawRightVerticalAxis = (canvas, component, width, title, id) ->
      canvas.append("g")
        .attr("id", id)
        .attr("class", "_y _axis axisRight")
        .attr("transform",   "translate(" + (width) + ",0)")
        .call(component)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -16)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text(title)
        
  drawPathLine = (canvas, lineGenerator, data, color, id, attrClass) ->
      canvas.append("svg:path")
        .attr("stroke-width", 2)
        .style("fill", "none")
        .style("stroke", if color? then color else "black")
        .attr("d", lineGenerator(data))
        .attr("id", if id? then id else "")
        .attr("class", if attrClass? then attrClass else "")
      ...