JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<body>
     <h4>Animated multiple line chart</h4>	
</body>
<input type="checkbox" class="messageCheckbox" value="line1" onclick="showOrHide(0);" />1
<input type="checkbox" value="line2" class="messageCheckbox" onclick="showOrHide(1);" />2
<input type="checkbox" value="line3" class="messageCheckbox" onclick="showOrHide(2);" />3
<input type="checkbox" value="line4" class="messageCheckbox" onclick="showOrHide(3);" />4

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

var t = -1;
 var n = 40;
 var duration = 750;

 var data1 = initialise();
 var data2 = initialise();
 var data3 = initialise();
 var data4 = initialise();

 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
 function updateData(a) {
     var obj = {
         time: t,
         value: Math.floor(Math.random() * 100)
     };
     a.push(obj);
 }

 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.linear()
     .domain([t - n + 1, t])
     .range([0, width]);

 var y = d3.scale.linear()
     .domain([0, 100])
     .range([height, 0]);

 var line = d3.svg.line()
     .interpolate("basis")
     .x(function (d, i) {
     return x(d.time);
 })
     .y(function (d, i) {
     return y(d.value);
 });

 var svg = d3.select("body").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom);

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

 // extra svg to clip the graph and x axis as they transition in and out
 var graph = g.append("svg")
     .attr("width", width)
     .attr("height", height + margin.top + margin.bottom);

 var xAxis = d3.svg.axis().scale(x).orient("bottom");
 var axis = graph.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(x.axis = xAxis);

 g.append("g")
     .attr("class", "y axis")
     .call(d3.svg.axis().scale(y).orient("left"));

 var path1 = graph.append("g")
     .append("path")
     .data([data1])
     .attr("class", "line1");

 var path2 = graph.append("g")
    ...