JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="section system-efficiency">
</div> 

<body>
    
</body

CSS

.axis path,
        .axis line
         {
          fill: none;
          stroke: lightgrey;
        }

        path.line {
          stroke-width: 3;
          fill: none;
          stroke: steelblue;
        }
        .x.axis {
          text-transform: uppercase;
          fill: darkgrey;
          font-family: arial;
        }

        .duebar {
          fill: darkgrey;
        }

        .pamount.axis path, .damount.axis path, .x.axis path{
            display: none;
        }

        .pamount, .damount {
          font-family: arial;
          fill: darkgrey;
        }

JavaScript

var data = [
  {
    "due": 89.99, 
    "datestr": "2012-12-01 00:00:00", 
    "paid": 89.99
  }, 
  {
    "due": 89.99, 
    "datestr": "2013-01-01 00:00:00", 
    "paid": 101.25
  }, 
  {
    "due": 109.99, 
    "datestr": "2013-02-01 00:00:00", 
    "paid": 143.69
  }, 
  {
    "due": 109.99, 
    "datestr": "2013-03-01 00:00:00", 
    "paid": 130.65
  }, 
  {
    "due": 139.99, 
    "datestr": "2013-04-01 00:00:00", 
    "paid": 150.25
  },

  {
    "due": 149.99, 
    "datestr": "2013-05-01 00:00:00", 
    "paid": 139.99
  },
  {
    "due": 149.99, 
    "datestr": "2013-06-01 00:00:00", 
    "paid": 139.99
  },
  {
    "due": 89.99, 
    "datestr": "2013-07-01 00:00:00", 
    "paid": 139.99
  }
];




//Load values into new arrays

var amtDue = new Array();
var amtPaid = new Array();

for(var i=0; i < data.length; i++) {
  amtDue[i] = data[i].due;
  amtPaid[i] = data[i].paid;
}

// Margins, width and height. 
var margin = {top: 20, right: 20, bottom: 60, left: 50},
    width = 500,
    height = 300,
    padding = 100;

// Scales.
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var due = d3.scale.linear().range([0, width]);
var paid = d3.scale.linear().range([0, width]);

                  
//Domains
x.domain([d3.min(data, function(d) { return d.date; }), d3.max(data, function(d) { return d.date;})]);
y.domain([50, 300]);
due.domain([0, amtDue.length - 1]);
paid.domain([0, amtPaid.length - 1]);

// Construct our SVG object.
var svg = d3.select(".system-efficiency").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// X-axis MONTHS.
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .tickSize(-height)
    .tickFormat(d3.time.format('%b'));
svg.append("g")
    .attr("class", "x axis")
   // .attr("transform", "translate(100," + 0 + ")")
   ...