JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<script src="http://d3js.org/d3.v2.js"></script>

CSS

path {
    stroke: black;
    stroke-width: 2;
    fill: none;
}

JavaScript

var data = [1,9,4,2,6,2,5,0,5,9,7,2].map(function(d,i) {
        return [i, d];
    });

var w = 300,
    h = 100;

var x = d3.scale.linear()
    .domain([0, data.length-1])
    .range([0, w]);

var y = d3.scale.linear()
    .domain([0, 10])
    .range([h, 0]);

var line = d3.svg.line()
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); });

var svg = d3.select('body').append('svg')
    .attr('w', w)
    .attr('h', h);

    // add element and transition in
    var path = svg.append('path')
        .attr('class', 'line')
        .attr('d', line(data[0]))
      .transition()
        .duration(1000)
        .attrTween('d', pathTween);
    
    function pathTween() {
        var interpolate = d3.scale.quantile()
                .domain([0,1])
                .range(d3.range(1, data.length + 1));
        return function(t) {
            return line(data.slice(0, interpolate(t)));
        };
    }