JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="line"></div>
JavaScript
var w = 900,
h = 400;
var svg = d3.select("#line")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("id", "visualization");
var lineData =
[[{ "x": 1, "y": 300}, { "x": 200, "y":70}, { "x": 450, "y": 300}],
[{ "x": 1, "y": 300}, { "x": 250, "y":70}, { "x": 550, "y": 300}],
[{ "x": 1, "y": 300}, { "x": 300, "y":70}, { "x": 620, "y": 300}],
[{ "x": 1, "y": 300}, { "x": 350, "y":70}, { "x": 720, "y": 300}]];
for (var i = 0; i < 1; i++) {
lineData.push([{ "x": 1, "y": 300}, { "x": 280, "y":70}, { "x": 580, "y": 300}]);
};
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("cardinal")
.tension(0.1);
var group = svg.append("g");
group
.selectAll(".line")
.data(lineData)
.enter()
.append("path")
.attr("d", line)
.attr("class", "line")
.attr("stroke", "steelblue")
.attr("stroke-width", "2")
.attr("fill", "none");
$(".line").each(function(i,d){
var t = [1100, 1304,4506,8101,10607, 12900],
bases = ["first", "second", "third", "fourth"];
var totalLength = d.getTotalLength();
// Clear any previous transition
d.style.transition = d.style.WebkitTransition = 'none';
d3.selectAll("path").attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(function(d,i) { return t[i]; })
.ease("linear")
.attr("stroke-dashoffset", 0)
.each("end", function() {
svg.append("text")
.attr("class", "t")
.attr("x", w / 2)
.attr("y", h)
.attr("text-anchor", "middle");
svg.selectAll("text.controltext")
.data(d3.range(lineData.length))
.enter().append("text")
.attr("class",...