JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<div style="max-width: 900px; max-height: 400px; padding: 10px">

  <div class="well">
    <h4>D3 Based Real Time Chart with Multiple Data Streams 
  </div>
  <input id="debug" type="checkbox" name="debug" value="debug" style="margin-bottom: 10px" /> Debug
  <input id="halt" type="checkbox" name="halt" value="halt" style="margin-bottom: 10px" /> Halt

  <div id="viewDiv"></div>

</div>

CSS

.axis text {
    font: 10px sans-serif;
  }
  .chartTitle {
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle; 
  }
  .axis .title {
    font-weight: bold;
    text-anchor: middle;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .x.axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .nav .area {
    fill: lightgrey;
    stroke-width: 0px;
  }
  .nav .line {
    fill: none;
    stroke: darkgrey;
    stroke-width: 1px;
  }
  .viewport {
    stroke: grey;
    fill: black;
    fill-opacity: 0.3;
  }
  .viewport .extent {
    fill: green;
  }
  .well {
    padding-top: 0px;
    padding-bottom: 0px;
  }

JavaScript

function realTimeChartMulti() {

  var version = "0.1.0",
      datum, data,
      maxSeconds = 300, pixelsPerSecond = 10,
      svgWidth = 700, svgHeight = 300,
      margin = { top: 20, bottom: 20, left: 100, right: 30, topNav: 10, bottomNav: 20 },
      dimension = { chartTitle: 20, xAxis: 20, yAxis: 20, xTitle: 20, yTitle: 20, navChart: 70 },
      maxY = 100, minY = 0,
      chartTitle, yTitle, xTitle,
      drawXAxis = true, drawYAxis = true, drawNavChart = true,
      border,
      selection,
      barId = 0,
      yDomain = [],
      debug = false,
      barWidth = 5,
      halted = false,
      x, y,
      xNav, yNav,
      width, height,
      widthNav, heightNav,
      xAxisG, yAxisG,
      xAxis, yAxis,
      svg;

  // create the chart
  var chart = function(s) {
    selection = s;
    if (selection == undefined) {
      console.error("selection is undefined");
      return;
    };

    // process titles
    chartTitle = chartTitle || "";
    xTitle = xTitle || "";
    yTitle = yTitle || "";

    // compute component dimensions
    var chartTitleDim = chartTitle == "" ? 0 : dimension.chartTitle,
        xTitleDim = xTitle == "" ? 0 : dimension.xTitle,
        yTitleDim = yTitle == "" ? 0 : dimension.yTitle,
        xAxisDim = !drawXAxis ? 0 : dimension.xAxis,
        yAxisDim = !drawYAxis ? 0 : dimension.yAxis,
        navChartDim = !drawNavChart ? 0 : dimension.navChart;

    // compute dimension of main and nav charts, and offsets
    var marginTop = margin.top + chartTitleDim;
    height = svgHeight - marginTop - margin.bottom - chartTitleDim - xTitleDim - xAxisDim - navChartDim + 30;
    heightNav = navChartDim - margin.topNav - margin.bottomNav;
    var marginTopNav = svgHeight - margin.bottom - heightNav - margin.topNav;
    width = svgWidth - margin.left - margin.right;
    widthNav = width;

    // append the svg
    svg = selection.append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight)
        .style("border",...