JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<div id="lineChart">

</div>

CSS

body {
  background: #212121
}

.axis {
  fill: #4f4f4f;
}

JavaScript

var data = [{
  "date": 1568053800000,
  "value": 0
}, {
  "date": 1568057400000,
  "value": 2
}, {
  "date": 1568061000000,
  "value": 0
}, {
  "date": 1568064600000,
  "value": 2
}, {
  "date": 1568068200000,
  "value": 0
}, {
  "date": 1568071800000,
  "value": 2
}, {
  "date": 1568075400000,
  "value": 0
}, {
  "date": 1568079000000,
  "value": 2
}, {
  "date": 1568082600000,
  "value": 0
}, {
  "date": 1568086200000,
  "value": 2
}, {
  "date": 1568089800000,
  "value": 0
}, {
  "date": 1568093400000,
  "value": 2
}, {
  "date": 1568097000000,
  "value": 0
}, {
  "date": 1568100600000,
  "value": 2
}, {
  "date": 1568104200000,
  "value": 4
}, {
  "date": 1568107800000,
  "value": 2
}, {
  "date": 1568111400000,
  "value": 0
}, {
  "date": 1568115000000,
  "value": 2
}, {
  "date": 1568118600000,
  "value": 4
}, {
  "date": 1568122200000,
  "value": 1
}, {
  "date": 1568125800000,
  "value": 1
}, {
  "date": 1568129400000,
  "value": 3
}, {
  "date": 1568133000000,
  "value": 0
}, {
  "date": 1568136600000,
  "value": 0
}]

var id = "lineChart";
var color = "#fc7e7e";
var fillColor = "#fc7e7e33";

// Set the dimensions of the canvas / graph
var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 20
  },
  width = 440 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

// Set the ranges
var x = d3.time.scale().range([20, width]);
var y = d3.scale.linear().range([height, 0]);

  
var area = d3.svg.area()
  .x(function(d) {
    return x(d.date);
  })
  .y0(height + 2)
  .y1(function(d) {
    return y(d.value);
  })
  .interpolate("cardinal");
  
// Adds the svg canvas
var svg = d3.select("#" + id)
  .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 + ")");

// Scale the range of the data
x.domain(d3.extent(data, function(d) {
  return d.date;
}));
y.domain([0, d3.max(data,...