📑 Chart Building 01: Line Charts with Transition.

chart_building01.html

<style>
    @import 'https://fonts.googleapis.com/css?family=Wallpoet';
    .h1 {font-family:Wallpoet; font-size:160%; text-shadow:3px 3px 3px #aaa;}
    .text1 {font-family:Wallpoet; font-size:100%; color:slategray;}
    .text1:hover {font-size:105%; text-shadow:3px 3px 3px #aaa;}
    .xy_axis1 {font-family:Wallpoet; font-size:90%; color:slategray;}
    .xy_axis1:hover {font-size:95%; text-shadow:3px 3px 3px #aaa;}
    #text_area_array {width:81%; height:80px; border:double slategray;}
    #num_points {text-align:center; text-align-last:center; background:silver; 
                 width:200px; height:30px; font-family:Wallpoet; color:slategray;}
    #run_button {background:silver; width:200px; height:30px; vertical-align:middle;
                 font-family:Wallpoet; font-size:160%; color:slategray;}
    #chart_building_01_01 {background-color:silver; }
    body {margin:5px 5px 5px 15px;}
</style> 

<script>
  margin={top:40,right:20,bottom:40,left:40};
  var width=Math.min(window.screen.width,window.innerWidth),
      height=.3*width;
  n=parseInt(document.getElementById('num_points').value);
  var svg=d3.select('#chart_building_01_01')
              .attr('width',.8*width).attr('height',height);
  function get_values(data,n) {
    var values=[];
    for (var i=0; i<n; i++){values.push(Math.floor(data[i]['y']*100)/100)};
    return values.toString();};
  reveal=path=>
  path.transition().duration(n*1000).ease(d3.easeLinear)
      .attrTween('stroke-dasharray',function() {
        const length=this.getTotalLength();
        return d3.interpolate(`0,${length}`,`${length},${length}`);});
  function draw_chart() {
    var n=parseInt(document.getElementById('num_points').value);
    var x=d3.scaleLinear().domain([0,n-1])
            .range([margin.left,.8*(width-margin.right)]),
        y=d3.scaleLinear().domain([0,n])
            .range([height-margin.bottom,margin.top]); 
    var line=d3.line().curve(d3.curveMonotoneX)
               .x(function(d,i) {return x(i);})
               .y(function(d) {return y(d.y);});
    var data=d3.range(n).map(function(d) {
        return {'y':d3.randomUniform(n)()}; });
    var iddoc=document.getElementById('text_area_array');
    iddoc.innerHTML=get_values(data,n);
    var xAxis=(g,scale=x)=>g
        .attr('transform',`translate(0,${height-margin.bottom})`)
        .attr('class','xy_axis1').attr('stroke','slategray')
        .call(d3.axisBottom(scale).ticks(width/60).tickSizeOuter(0)),
        yAxis=(g,scale=y)=>g
        .attr('transform',`translate(${margin.left},0)`)
        .attr('class','xy_axis1').attr('stroke','slategray')
        .call(d3.axisLeft(scale).ticks(height/40));
    svg.selectAll('g').remove(); svg.selectAll('path').remove();
    svg.append('g').call(xAxis); svg.append('g').call(yAxis);
    svg.append('path')
       .datum(data).attr('d',line)
       .attr('stroke','slategray').attr('stroke-width',3)
       .attr('fill','none');
    svg.append('path').attr('id','path_line1')
       .datum(data).attr('d',line)
       .attr('stroke','silver').attr('stroke-width',2)
       .attr('stroke-miterlimit',1)
       .attr('stroke-dasharray','0,1')
       .attr('fill','none')
       .call(reveal); 
    svg.select('#linechart_title')
       .text('An Example of D3 Line Charts')
       .attr('x',x(.4*n)).attr('y',y(n))
       .attr('class','h1');
  };
  var tc=setInterval(function() {
    var now=new Date().getTime();
    var iddoc1=document.getElementById('header1');
    var iddoc2=document.getElementById('linechart_title');
    var iddoc3=document.getElementById('path_line1');
    iddoc1.style.color=d3.interpolateSinebow(now/1000/n);
    iddoc2.style.fill=d3.interpolateSinebow(now/1000/n);
    iddoc3.style.stroke=d3.interpolateSinebow(now/1000/n);
  },1);
</script>