JSFiddle - React, Tailwind, and code Playground

by andrewarnier

HTML

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

CSS

html, body {
     margin:0;
     padding:0;
     /* background-color:hsl(6, 78%, 57%); */
     font-family:Arial;
     color:white;
   }

   svg {
     display:block;
     margin-left:auto;
     margin-right:auto;
     background-color: #f5f5f5;
   }

   path {
     stroke: hsl(6, 78%, 57%);
     stroke-width: 4;
     fill: none;
   }

   g > line {
     stroke:#e5e5e5;
     stroke-width:2px;
   }

   .ticky:nth-child(1) line {
     stroke-width: 2;
     opacity: 1;
   }

   .tickx:nth-child(8) {
     /* stroke-width: 2; */
     color: #f5f5f5;
     opacity: 1;
   }

   .xaxis path { display:none; }
   .yaxis line { stroke-width: 1; opacity:0.1; }
   .yaxis path { display:none; }

   text {
     fill: #333;
     font-family:Arial;
     font-size:9pt;
   }

   circle {
     fill: white;
     stroke: #333;
     stroke-width: 4px;
   }

   g.xaxis:hover { cursor: pointer;}

JavaScript

var margin = {top: 80, right: 80, bottom: 80, left:90},
   w      = 1200 - margin.left - margin.right,
   h      = 400 - margin.top - margin.bottom,

   severity = 10;
   months = 18;
   x = d3.scale.linear().domain([0, months]).range([0, w]),
   y = d3.scale.linear().domain([0, severity]).range([h, 0]),
   xAxis = d3.svg.axis().scale(x).tickSize(-h).ticks(18),
   yAxis = d3.svg.axis().scale(y).ticks(5).orient("left"),

   svg = d3.select("#container").append("svg")
           .attr("width", w + margin.left + margin.right)
                                                  .attr("height", h + margin.top + margin.bottom)
                                                                                         .append("g")
                                                                                         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   svg.append("g")
      .attr("class", "xaxis")
      .attr("transform", "translate(0, " + h + ")")
      .call(xAxis);

   svg.append("g")
      .attr("class", "yaxis")
      .call(yAxis);

   $(".xaxis > g.tick:first > line").css({"display": "none"});
   $("circle").on("click", function() { $(this).css({"display":"none"}); });

   function lines(x, y) {
     this.x = x;
     this.y = y+h;
   }

   var lineArray = [{x: 0, y: h}, {x: 1, y: h}];
   var lineArrayPrevious = lineArray[lineArray.length -1].x;
   var d3line = d3.svg.line()
                      .x(function(d) { return d.x; })
                                               .y(function(d) { return d.y; })
                                                                        .interpolate("monotone");


   var path = svg.append("path").attr("d", d3line(lineArray)).attr("class", "line");

   canPlot = true;

   function plot() {
     var m = d3.mouse(this);

     if (m[0]-20 > lineArray[lineArray.length - 1].x)  {
       var lineX = lineArray.push(new lines(m[0], m[1]));
       
       
       // Removing transition() removes the...