D3 Examples - flowChart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#152512; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
​
​
<body>
 
 <svg>
   
 </svg>
  
 <script>
    // Feel free to change or delete any of the code you see in this editor!
   
   
   var data = [5,2,3,6,12]
      
   var height=150;
   var colors = d3.scaleOrdinal()
  .range(["#75AFCC","#EAC551","#EAC551","#6BB24F","#6BB24F"])
         
   var svg= d3.select('svg');
    
   var distanceBetween = 180
   
   var line = d3.line()
        .x((d,i) =>(i* distanceBetween) +50)
                .y( (d,i)=>height)
        .curve(d3.curveLinear)
        
      svg.append('path')
      .attr('d', line(data.slice(0,4)) )
      .attr('fill', 'none')
      .attr('stroke', 'yellow')
        .style("stroke-dasharray", ("2, 2"))
   
      var linePositions = [
            [[230,height],[230,height+100],[410,height+100],[770,height+100],                                                           [770,height]],
          [[410,height],[410,height+100]]
        ]     
       
      var line2 = d3.line()
        .x((d,i) =>d[0])
                .y( (d,i)=>d[1])
        .curve(d3.curveLinear)
    
      svg.append('path')
      .attr('d', line2(linePositions[0]))
      .attr('fill', 'none')
      .attr('stroke', 'limegreen')
        .style("stroke-dasharray", ("2, 2"))
      
      svg.append('path')
      .attr('d', line2(linePositions[1]))
      .attr('fill', 'none')
      .attr('stroke', 'limegreen')
        .style("stroke-dasharray", ("2, 2"))
      
      
   var enter =svg.selectAll('cirle')
    .data(data)
    .enter().append('circle')
    .attr('cx', (d,i) =>(i* distanceBetween) +50)
    .attr('cy', (d,i)=>height)
    .attr('r', d=>d*5)
    .attr('fill', (d,i)=>colors(i))
    .attr('stroke','#fff')
    
   
   var enter2 =svg.selectAll('text')
    .data(data)
    .enter().append('text')
     .attr('x', (d,i) =>(i* distanceBetween) +50)
    .attr('y', (d,i)=>height/2)
    .text(d=>d+' Cases')
    .attr('fill', '#fff')
    .style("font-family","roboto")
    //.attr("text-anchor", "middle")
     console.log(enter)  
   
     
      
   
  
  </script>
</body>
    