JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 12px Helvetica;
  }

  .axis line {
    fill: red;
    stroke: #2b2b2b;
    shape-rendering: crispEdges;
  }

  .x.axis path {
    display: none;
  }

  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 3px;
  }
</style>

<body>

  <script src="https://d3js.org/d3.v3.js"></script>
  <script>
    var margin = {
        top: 50,
        right: 50,
        bottom: 30,
        left: 80
      },
      width = 830 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;

    var x = d3.time.scale()
      .range([0, width]);

    var y = d3.scale.linear()
      .range([height, 0]);

    var color = d3.scale.ordinal().range(['#002868','#BF0A30',]);



    var xAxis = d3.svg.axis()
      .scale(x)
      .ticks(10)
      .innerTickSize(2)
      .outerTickSize(0)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .tickFormat(function(d) {
        return d;
      })
      .ticks(10)
      .innerTickSize(2.5)
      .outerTickSize(0)
      .orient("left");

//    var yScale = d3.scale.linear()
 //   .range([height, 0]);



    var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.price);
      });

    var svg = d3.select("body").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 + ")");

    d3.csv("https://gist.githubusercontent.com/vaibhavjaitly/f1339c2bc02857afdf65b8d572dc31e5/raw/91b3283fe648a4d86c4ab322ad602188c047485c/gistfile1.csv", function(error, data) {
      color.domain(d3.keys(data[0]).filter(function(key) {
        return key !== "Year";
      }));

      var cities = color.domain().map(function(name) {
        return...