JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="liveChartArea" style="width: 100%; height: 600px;">

JavaScript

buildGraph();

function buildGraph() {
    var instance = this;
    var margin = { top: 30, right: 20, bottom: 30, left: 50 },
      width = $("#liveChartArea").width() - margin.left - margin.right,
      height = $("#liveChartArea").height() - margin.top - margin.bottom;


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

    // var data = [{value : []}];
    // var width = 500;
    // var height = 300;
    var globalX = 0;
    var duration = 500;
    var max = 300;
    var step = 10;
    var chart = d3.select('#liveChartArea').append("svg")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "0 0 " + $("#liveChartArea").width() + " " + $("#liveChartArea").height())
      .append('g')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

    var parseTime = d3.timeParse("%d-%m-%Y %H:%M:%S")
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear()
      // .domain([0, 2])
      .range([height, 0]);
    // -----------------------------------

    // -----------------------------------
    // Draw the axis


    // .nice(d3.timeDay, 1);
    var xAxis = d3.axisBottom().scale(x).tickFormat((d) => {
      return d3.timeFormat("%H:%M:%S")(d);
    });
    var yAxis = d3.axisLeft(y).ticks(10);

    var axisX = chart.append('g').attr('class', 'x axis')
      .attr("transform", "translate(0," + (height) + ")")
      .call(xAxis);

    var axisY = chart.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    chart.append('line')
      .attr("class", "currentTimeLine");
    // Append the holder for line chart and fill area
    var path = chart.append('path');
    var areaPath = chart.append('path');
    // Main loop
    function tick() {
     ...