JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<div class="container">
<div class="chart"></div>
</div>

CSS

.container{width: 80%; margin: 0 auto; height: 500px; background: #e0e0e0}
.chart{height:500px; background: #f0f0f0}

JavaScript

//Paint Drops
    var width = $(".chart").innerWidth();
    var height = 2000;

    var dataset = [];                                   //Initialize empty array
    for (var i = 0; i < 50; i++) {                      //Loop 25 times
    var newNumber = Math.round(Math.random() * 30);     //New random integer (0-30)
    dataset = dataset.concat(newNumber);                //Add new number to array
      };
     
      var strokeWidth = [];
      for (var i=0; i < 30; i++){
        var strokeNumber = Math.round(Math.random() * 100);
        strokeWidth = strokeWidth.concat(strokeNumber);
      };

    var xScale = d3.scale.linear()
                    .domain([0,d3.max(dataset)])
                    .range([0,width])
        var yScale = d3.scale.ordinal()
                    .domain(d3.range(dataset.length))
                    .rangeRoundBands([0,height],0.05);
            
var svg = d3.select(".chart")
.append("svg")
.attr("width", width)
.attr("height", 2000)

 var line = svg.selectAll("line")
 .data(dataset)
 .enter()
     
.append("line");
     

line.attr("x1", function(d){
    return xScale(d)})
     
.attr("y1", 0)
.attr("x2", function(d){
    return xScale(d)})
.transition().delay(function (d,i){ return i * 500;})
 .duration(10000) 
     .attr("y2", function(d,i){
return yScale(i) ;
})
     

line.style("stroke", function() {
    var colors = ["rgba(242,100,5,0.7)","rgba(32,144,209,0.7)","rgba(203,214,86,0.7)"];
    var colorscale = Math.floor(Math.random() * colors.length);
    var randomcolors = colors[colorscale];
    return randomcolors;
});
line.style("stroke-width", function(d){
return strokeWidth[d] + "px" });
line.style("stroke-opacity", 1);
line.style("stroke-linecap", "round");