JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

<div id="liveChart" style="width: 100%; height: 400px">

</div>

CSS

.axis {
		font-family: sans-serif;
		font-size: 12px;
	}
	.line {
		fill: none;
		stroke: #f1c40f;
		stroke-width: 3px;
	}
	.smoothline {
		fill: none;
		stroke: #e74c3c;
		stroke-width: 3px;
	}
	.area {
		fill: #e74c3c;
		opacity: 0.5;
	}
	.circle {
		stroke: #e74c3c;
		stroke-width: 3px;
		fill: #FFF;
	}
	.grid {
		stroke: #DDD;
		stroke-width: 1px;
		fill: none;
	}

JavaScript

var margin = {top: 30, right: 20, bottom: 30, left: 50},
  width = $("#liveChart").width() - margin.left - margin.right,
  height = $("#liveChart").height - margin.top - margin.bottom;
  
  
var svg = d3.select("#livechart")
  .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 = [
    ];
    var width = 500;
    var height = 300;
    var globalX = 0;
    var duration = 1500;
    var max = 300;
    var step = 10;
    var chart = d3.select('#liveChart').append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "0 0 " + $("#liveChart").width() + " " + $("#liveChart").height())
      .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');;
      
    var x = d3.scaleLinear().domain([0, 500]).range([0, 500]);
    //var y = d3.scaleLinear().domain([0, 2]).range([200, 0]);
    var y = d3.scaleLinear()
    .domain([0, 2])
    .range([height - margin.top - margin.bottom, 0]);
    // -----------------------------------
    var line = d3.line()
					    .x(function(d){ return x(d.x); })
					    .y(function(d){ return y(d.y); });
    var smoothLine = d3.line()
					    .x(function(d){ return x(d.x); })
					    .y(function(d){ return y(d.y); });
  var lineArea = d3.area()//.curve(d3.curveCardinal)
                  .x(function(d){ return x(d.x); })
                  .y0(y(0))
                  .y1(function(d){ return y(d.y); })
                 // .curve(d3.curveCardinal);
    // -----------------------------------
    // Draw the axis
 
    
    var xAxis = d3.axisBottom().scale(x);
    var yAxis = d3.axisLeft(y).ticks(5);
    var axisX = chart.append('g').attr('class', 'x axis')
			     .attr("transform", "translate(0," + (height - 50) + ")")
			     .call(xAxis);
           
     chart.append("g")                     // Add the Y Axis
...