JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

CSS

svg {
      font-size: 10px;
      font-family: sans-serif;
    }

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

.area {
    fill: lightsteelblue;
    stroke-width: 0;
}

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

JavaScript

var timeoutId = 0;
var interval = 120;
var x1 = 20;
var x2 = 250;
var data = [
                        {x: 0, y: x1},
                        {x: x1, y: x1},
                        {x: x2, y: x2},
                        {x: x2, y: 500}];

var margin = {top: 35, right: 75, bottom: 30, left: 75},
    width = 480 - margin.left - margin.right,
    height = 320 - margin.top - margin.bottom;

var xcenter =  width/2;

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(3)
    .outerTickSize(0)
    .tickFormat(d3.time.format("%H:%M:%S"));

var yAxis = d3.svg.axis()
    .scale(y)
    .outerTickSize(0)
    .orient("left");

var area = d3.svg.area()
    .x(function(d) { return x(d.time);})
    .y0(height)
    .y1(function(d) { return y(d.value); });

    var line = d3.svg.line()
    .x(function(d) { return x(d.time);})
    .y(function(d) { return y(d.value); });

// function
function createEmptyData(defaultValue, interval){
  var arr = new Array(interval);
  var now = (new Date()).getTime();
  
  
  for(var i=0;i<interval;++i){
    var newDate = new Date();
    newDate.setTime(now - i * 1000);
    arr[interval - i - 1] = {
      time: newDate,
      value: defaultValue
    };    
  }
  return arr;
}


function getRandomArbitrary(min, max) {
  return Math.round (Math.random() * (max - min) + min) -1;
}

function updateData(data) {  
  if(data.length > 0) {
    var last = data[data.length - 1].time.getTime();
    var intervalMs = interval * 1000;
    while(last - data[0].time.getTime() > intervalMs)
      data.shift();
  }
  data.push({
      time:  new Date(),
      value: getRandomArbitrary(0,101),
  });
}

function update() {
  updateData(data);
  render();
  timeoutId = setTimeout("update()", 1000);
}

function render() {
  
d3.select("svg")
       .remove();

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left +...