JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

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

CSS

body {
          font: 10px sans-serif;
        }

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

        .x.axis path {
          display: none;
        }

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

        .circle {
            fill: white;
            stroke: steelblue;
            stroke-width: 2px;
        }

        .area {
            fill: steelblue;
            stroke: none;
            opacity: 0.1;
        }

        .zeroline {
            fill: none;
            stroke: red;
            stroke-width: 0.5px;
            stroke-dasharray: 5 5;
        }

        .zerolinetext {
            fill: red;
        }

        .overlay {
            fill: none;
            stroke: none;
            pointer-events: all;
        }

        .focusLine {
            fill: none;
            stroke: steelblue;
            stroke-width: 0.5px;
        }

        .focusCircle {
            fill: red;
        }

JavaScript

var data = [];
        var currentValue = 100;
        var random = d3.random.normal(0, 20.0);

        for(var i=0; i<100; i++) {
            var currentDate = new Date();
            currentDate.setDate(currentDate.getDate() + i);
            console.log(currentDate)
            data.push({
            	date: currentDate,
              value: currentValue
            });
           // [currentDate, currentValue]);
            currentValue = currentValue + random();
        }


        var drawLineGraph = function(containerHeight, containerWidth, data, yLabel, warnLine) {

            var svg = d3.select("body").append("svg")
                .attr("width", containerWidth)
                .attr("height", containerHeight);

            var margin = { top: 50, left: 50, right: 50, bottom: 50 };
            
            var height = containerHeight - margin.top - margin.bottom;
            var width = containerWidth - margin.left - margin.right;

            var xDomain = d3.extent(data, function(d) { return d.date; })
            var yDomain = d3.extent(data, function(d) { return d.value; });

            var xScale = d3.time.scale().range([0, width]).domain(xDomain);
            var yScale = d3.scale.linear().range([height, 0]).domain(yDomain);

            var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
            var yAxis = d3.svg.axis().scale(yScale).orient('left');

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

            var area = d3.svg.area()
                .x(function(d) { return xScale(d.date); })
                .y0(function(d) { return yScale(d.value); })
                .y1(height);

            var g = svg.append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

            g.append('path')
                .datum(data)
                .attr('class', 'area')
                .attr('d', area);

      ...