JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viz"></div>
<div id="chart"></div>
<script type="text/JavaScript" src="http://d3js.org/d3.v2.js">
</script>

JavaScript

//draw chart
    var width = 700;
        height = 400;

    var vis = d3.select("#chart")
        .append("svg")
        .attr("width",width)
        .attr("height",height); 

var progress = [{"time":0,"value":.25},{"time":3,"value":.5}];
//var progress = [{"time":.5,"value":.25},{"time":1.5,"value":.6}];

function drawChart(vis,progress,width,height)
{
    var margin = 50; //used as spacing for top,bottom,left,right
    
    //define the boundaries for each chart
    var cx1 = 1.5*margin,        
        cx3 = width-125,
        cx2 = cx3 - 1.5*margin,
        cx4 = width - margin,
        cy1 = height - margin,
        cy2 = margin;
    
    var y2min = .79;
    
    var x = d3.scale.linear().domain([0, 10]).range([cx1, cx2]),
        y = d3.scale.linear().domain([0,1]).range([cy1,cy2]),
        z = d3.scale.category10();
    
    var cprog = vis.append("svg:g");
    
    //draw line path
    
    var stepline = d3.svg.line()
        .x(function(d) { return x(d.time); })
        .y(function(d) { return y(d.value); })
        .interpolate("step-after");
    
    var chartData = [];
    chartData.redraw = function(mydata) {
            
        var cpg = cprog.selectAll("path").data(mydata, function(d) {
          return d.time + "-" + d.value; })
            .enter()
            .append("path")
            .attr("d", stepline(mydata))
            .attr("fill","none")
            .attr("stroke-width","2")
            .attr("stroke","black");
            
        cpg.exit().remove();
        }
        
    chartData.redraw(progress);
    return chartData;
}

var chartData = drawChart(vis,progress,width,height-50);

///////////////////////////////////////////////////////////////////////        
//do some random animation!
   
setInterval(function()
    {
            progress = [];
            for(var i=0;i<10;i++)
            {
                progress = progress.concat({"time": i,"value": Math.random()});
            }
            chartData.redraw(progress)
   ...