JSFiddle - React, Tailwind, and code Playground

by Blake Dietz

HTML

<div id ="svg-body">
    
</div>

JavaScript

var margin = {"top":0, "bottom": 0, "right": 0, "left":0};
var width  = 1000 - margin.left - margin.right;
var height = 1000 - margin.top  - margin.bottom;

var data    = [{"x":250, "y":250},{"x":300, "y":350},{"x":350, "y":250},{"x":455,"y":33},{"x":456,"y":32},{"x":500,"y":500}];
var xDomain = d3.extent(d3.map(data,function(d){return d.x}));
var yDomain = d3.extent(d3.map(data,function(d){return d.y}));
var xScale  = d3.scale.linear().domain([xDomain]).range([0,width]);
var yScale  = d3.scale.linear().domain([yDomain]).range([height, 0]);

function stepGraph(points)
{
    var	 n = points.length,
        horizontalPath = ["M",points[0].x, points[0].y],
        verticalPath   = horizontalPath,
        ret = {"horizontal":"", "vertical":""};
    
    var previous = points[0];
    
    for(var i = 1; i < n; i++)
    {
        if (previous.y != points[i].y)
        {
            ret.horizontal += "M" + previous.x  + "," + previous.y  + "H" + points[i].x;
            ret.vertical   += (i!=n-1) ? "M" + points[i].x + "," + (points[i].y) + "V" + (previous.y ) : "";
        }
        
        previous = points[i];
    }
    
    return ret;
    
}

var line = stepGraph(data);

var svg = d3.select("#svg-body").append("svg");

svg.append("path").attr("d",line.horizontal).attr("stroke","#FF6600").attr("render-style","crispEdges");
svg.append("path").attr("d",line.vertical).attr("stroke","#FFC299").attr("render-style","crispEdges");