JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<body></body>

JavaScript

var canvas = d3.select("body").append("svg")
    .attr({
        width: 500,
        height: 500
    });

var data = [
        {x: 10, y: 20},
        {x: 40, y: 60},
        {x: 50, y: 70}
    ];

var group = canvas.append("g")
    .attr("transform", "translate(100, 100)");

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

    group.selectAll("path")
        .data([data])
        .enter()
        .append("path")
        .attr("d", line)
        .attr({
            "fill": "none",
            "stroke": "black",
            "stroke-width": 10
            
        });

circle = canvas.append("circle")
    .attr({
        cx: 50,
        cy: 50,
        r: 30
    })
    .style({
        "fill": "#fff",
        "stroke": "black",
        "stroke-width": 9
    });