https://bit.ly/2k7ucgJ

<!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; }
  </style>
</head>

var svg = d3.select("body").append("svg")
    	.attr("width", 500)
    	.attr("height", 500)
    
    d3.csv("dataset.csv", function(error, dataset) {

var accessor = function(d) { return d.name;};
      
      var y = d3.scaleLinear()
        .domain([d3.min(dataset, accessor), 
                 d3.max(dataset, accessor)]) // d3.extent()
        .range([0, 100])
      
      var color = d3.scaleLinear()
        .domain([d3.min(dataset, accessor), 
                 d3.max(dataset, accessor)]) // d3.extent()
        .range(["white", "red"])

svg.selectAll("rect").data(dataset).transition().duration(1000)
        	.delay(function(d, i) { return i * 1000})
          .attr("y", function(d, i) { return 100 + (100 - y(accessor(d))); })
          .attr("height", function(d, i) { return y(accessor(d)); })
        
      });
      
      var line = d3.line().curve(d3.curveCardinal)
      	.x(function(d, i) { return 20 + i * 40; })
        .y(function(d, i) { return 100 + (100 - y(accessor(d))); })
      
      svg.selectAll("path").data([dataset]).enter()
      	.append("path")
      	.style("fill", "none")
      	.style("stroke", "black")
				.attr("d", line)

var xAxis = d3.axisLeft()
        .scale(y);

g = svg.append('g')
        .attr('transform', 'translate(20,' + 100 + ')')
        .attr('class', 'x axis')
        .call(xAxis);
      
			console.log(dataset);
    })
    
  //  data.forEach(function(d, i) {
  //       
  //    svg.append("rect")
  //      .attr("x", 10 + i * 40)
  //      .attr("y", 100 + (100 - y(d)))
  //      .attr("width", 20)
  //      .attr("height", y(d))
  //    
  //  })
  //  
  </script>
  
</body>

https://d3js.org/d3.v4.min.js