JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<div class="graphArea">
  <div id="svgArea">
  </div>
</div>

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

CSS

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area {
  fill: red;
  stroke-width: 0px;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

dbData = [
  [1471532009, 10],
  [1471532029, 15],
  [1471532050, 20],
  [1471532060, 30],
  [1471532070, 40],
  [1471532080, 40],
  [1471532090, 30],
  [1471532500, 20],
  [1471532510, 10],
  [1471532520, 20]
];




//main/top graph
var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
// append the svg object to the #svgArea
// append a group to the svg
// move the group to the top left corener of svg
var svg = d3.select("#svgArea").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 + ")");
svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);
// set the ranges for x and y axes
// these functions helps to scale any given value to fit into the x or y range
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
// scale the range/domain (min/max) for the axes
xScale.domain(d3.extent(dbData, function(d) {
  return new Date(d[0] * 1000 - 7200000);
}));
yScale.domain(d3.extent(dbData, function(d) {
  return d[1];
}));
// create the axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
// define the line
var line = d3.svg.line()
  .x(function(d) {
    return xScale(new Date(d[0] * 1000 - 7200000));
  })
  .y(function(d) {
    return yScale(d[1]);
  });
// add the line, x and y axes to the SVG
// add line
svg.append("path")
  .datum(dbData)
  .attr("class", "line")
  .attr("d", line);
// add x axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);
// add y axis
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);
  
  
  
  
// second/small graph section
var navWidth...