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 formattedLineData = [];

function formatDataPoints(element, index, array) {
    if (index % 2 === 0){
        formattedLineData.push({"x": array[index], "y": array[index + 1]});
    }
}

lineData.forEach(formatDataPoints);

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

var lineFunction = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return (height - d.y); })
        .interpolate("linear");

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