JSFiddle - React, Tailwind, and code Playground

by axman

CSS

path {fill:none; stroke-width:2; marker:url(#point);}
svg {border:gray 1px solid;}

JavaScript

//Comparison of the d3.svg.line interpolators
//Code adapted from http://bl.ocks.org/mbostock/3310323
//(which demonstrates a custom interpolator)

//The graph is confusing with all options visible
//So comment out the ones you're not interested in
//and re-run the fiddle;
//values are defined at
//https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate
var interpolatorOptions = ["linear"
                           //,"linear-closed"
                           //,"step"
                           //,"step-before"
                           ,"step-after"
                           //,"basis"
                           //,"basis-open"
                           //,"basis-closed"
                           //,"bundle"
                           //,"cardinal"
                           //,"cardinal-open"
                           //,"cardinal-closed"
                           //,"monotone"
                          ];

var data = d3.range(20).map(function(i) {
  return {x: i / 19, y: (Math.sin(i / 3) + Math.random())/2};
});

var colors = d3.scale.category10();

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = Math.max((window.innerWidth - margin.left - margin.right), 100),
    height = Math.max((window.innerHeight - margin.top - margin.bottom), 100);

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-1, 1])
    .range([height/2, 0]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    //create a point marker to be used in line styles
    //(it is added via the CSS)
var point = svg.append("defs").append("marker")
        .attr("id", "point")
        .attr("viewBox", "-1.5...