JSFiddle - React, Tailwind, and code Playground

by Henry

CSS

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

JavaScript

// x, y, x, y, ... etc.
var lineData = [1, 5, 20, 20, 40, 10, 60, 40, 80, 5, 100, 60];

var svgContainer = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);

var lineFunction = d3.svg.line()
        .x(function(d, i) { return (i * 10); })
        .y(function(d) { return d; })
        .interpolate("linear");

svgContainer.append("svg:path").attr("d", lineFunction(lineData));