JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
<svg id="lineGraph" width="600" height="300" ></svg>

CSS

svg { font: 12px Arial;}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

JavaScript

var createLineChart = function(data){
    var convertToISODate = function(d) {
      return new Date(d.date);
    }
    
    // get max and min dates, provided data is in sorted order
    var minDate = convertToISODate(data[0]),
        maxDate = convertToISODate(data[data.length-1]);

    var minAccuracy = d3.min(data, function(d) {
      return (d.ad_review_stats.accuracy);
    });
    var maxAccuracy = d3.max(data, function(d) {
      return (d.ad_review_stats.accuracy);
    });
    var differenceInAccuracy = (maxAccuracy - minAccuracy)/2;

    var formatYAxis= d3.format('.2f');
    var formatXAxis = d3.time.format("%d-%b-%y");
    var d3Graph = d3.select("#lineGraph"),
      widthOfGraph = 600,
      heightOfGraph = 200,
      marginsForGraph = {
          top: 20,
          right: 20,
          bottom: 20,
          left: 50
      },
      xScale = d3.time.scale().
              range([marginsForGraph.left, widthOfGraph - marginsForGraph.right]).
              domain([minDate, maxDate]),

      yScale = d3.scale.linear().
              range([heightOfGraph - marginsForGraph.top, marginsForGraph.bottom]).
              domain([(minAccuracy - differenceInAccuracy), 
                (maxAccuracy + differenceInAccuracy)]);

      xAxis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatXAxis)
        // Specify the (approximate) number of ticks on the x-axis
        .ticks(8),
      
      yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .tickFormat(formatYAxis);

    d3Graph.append("svg:g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (heightOfGraph - marginsForGraph.bottom) + ")")
      .call(xAxis)
      // Rotate the labels on the x-axis, as per:
      // http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform",...