JSFiddle - React, Tailwind, and code Playground

by Andrejs Gubars

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

CSS

body {
  margin: 5px;
}

JavaScript

$(document).ready(function(){

	var canvas = d3.select("canvas"),
      context = canvas.node().getContext("2d"),
      width = canvas.property("width"),
      height = canvas.property("height");
      
  canvas.append("line")          // attach a line
    .style("stroke", "black")  // colour the line
    .attr("x1", 100)     // x position of the first end of the line
    .attr("y1", 50)      // y position of the first end of the line
    .attr("x2", 300)     // x position of the second end of the line
    .attr("y2", 150);
});