JSFiddle - React, Tailwind, and code Playground

by Wexcode

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<svg width="300" height="500">
    <g id="g-1"></g>
    <g id="g-2"></g>
</svg>

CSS

path {
    fill: none;
    stroke: #000; }

JavaScript

var curved = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("cardinal")
    .tension(0);
var straight = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear")
    .tension(0);

var points = [{x: 70, y: 52.5}, {x: 250, y: 250}, {x: 70, y: 447.5}];

d3.select("#g-1").append("path").attr("d", curved(points));

d3.select("#g-2").append("path").attr("d", straight(points));