JSFiddle - React, Tailwind, and code Playground

by yahyaKACEM

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<svg id="main"></svg>

CSS

body {
    background-color: #555;
}

JavaScript

var svg = d3.select("#main");
    var line = d3.svg.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1] + 200; })
    .interpolate("monotone");
function init(){
    var randData = [];
    for (var i = 0; i < 8; i++){
        randData.push([i*50, Math.random() * 100]);
    }
     svg.data([randData])
        .append("svg:path")
        .attr("d", line)
        .attr("fill", "#444")
        .attr("stroke", "#aaa")
        .attr("stroke-width", 7);
    svg.selectAll("circle")
        .data(randData)
       .enter().append("circle")
        .attr("cx", function(d,i){ return d[0]; })
        .attr("cy", function(d,i){ return d[1] + 200 })
        .attr("fill", "#dfdfdf")
        .attr("r", 10);

    setInterval(refresh, 1200);
}        



              
              
function refresh(){
   var randData = [];
    for (var i = 0; i < 8; i++){
        randData.push([i*50, Math.random() * 100]);
    }
    
    svg.data([randData])
        .select("path")
        .transition()
        .duration(500)
        .attr("d", line);
      svg.selectAll("circle")
        .data(randData)
      .transition()
        .duration(500)
        .attr("cy", function(d,i){ return d[1] + 200 });
}
init();