JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
 <script src="https://d3js.org/d3.v3.min.js"></script>
 <body>
    <h4>Animated multiple line chart</h4>	  
</body>

CSS

body {
		font-family: sans-serif;
		font-size: 9pt;
		line-height: 12pt;
		background: #ffffff;
		color: #555555;
	}
	
	.line1{
		fill: none;
		stroke: steelblue;
		stroke-width: 1px;
	}

	.line2 {
		fill: none;
		stroke: green;
		stroke-width: 1px;
	}

	.line3 {
		fill: none;
		stroke: orange;
		stroke-width: 1px;
	}

	.line4 {
		fill: none;
		stroke: red;
		stroke-width: 1px;
	}
	 
	.axis path, .axis line {
		fill: none;
		stroke: #555555;
		shape-rendering: crispEdges;
	}

JavaScript

data1=[{"month":"January","present":"136","totalperiod":"168"},{"month":"February","present":"163","totalperiod":"186"},{"month":"March","present":"103","totalperiod":"184"}];	
  
  data2=[{"month":"January","present":"103","totalperiod":"168"},{"month":"February","present":"183","totalperiod":"186"},{"month":"March","present":"153","totalperiod":"184"}];	
  
  data3=[{"month":"January","present":"103","totalperiod":"168"},{"month":"February","present":"183","totalperiod":"186"},{"month":"March","present":"153","totalperiod":"184"}];	
	/*function initialise()
   {
		var time = -1;
		var arr = [];
		for (var i = 0; i < n; i++)
		{
			var obj = {
				time: ++time,
				value: Math.floor(Math.random()*100)
			};
			arr.push(obj);
		}	
		t = time;
		return arr;
	}*/
	
	// push a new element on to the given array

	
    var margin = {top: 10, right: 10, bottom: 20, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
	 
    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .2);
        
	 
    var y = d3.scale.linear()
        .rangeRound([height, 0]);
	 
    var line = d3.svg.line()
		.interpolate("linear")
        .x(function(d, i) {console.log(d.month); return x(d.month); })
        .y(function(d, i) { return y(d.present); });
		
    
  
 color = d3.scale.category10();
    color.domain(d3.keys(data1[0]).filter(function (key) {
        return key == "present";
    }));
    var efteValues = color.domain().map(function (name) {
    return {
        name: name,
        values: data1.map(function (d) {
			
            return {
                month: d.month,
                present: +d[name]
            };
        })
        };
    });
    
       x.domain(data1.map(function(d) { 
    	return d.month; }));
      
      y.domain([
    d3.min(efteValues, function (c) {
        return d3.min(c.values, function (v) {
			 
            return 0;
        });
    }),
    d3.max(efteValues, function (c) {
  ...