JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>

JavaScript

var width  = 500;
var height = 500;

var data = [
	{x: 50, y: 50},
	{x: 150, y: 250}
];

var svg = d3
  .select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

svg
	.selectAll('g')
  .data(data)
  .enter()
  .append('line')

var line = svg
	.append('line')
  .style('stroke', 'black')
  .attr('x1', 150)
  .attr('y1', 100)
  .attr('x2', 250)
  .attr('y2', 300)