JSFiddle - React, Tailwind, and code Playground

by Laurie Skelly

HTML

<svg height="400px" width="400px"></svg>

CSS

svg {
  background:aliceblue;
}
line {
  stroke: gray;
  stroke-width:3px;
}
text {
  fill:#83DDF2;
  font-family:sans-serif;
  font-size:20px;
}

JavaScript

var svg = d3.select('svg')

svg.append('line')
.attr('x1',50)
.attr('y1',200)
.attr('x2',350)
.attr('y2',200)

svg.append('line')
.attr('x1',200)
.attr('y1',50)
.attr('x2',200)
.attr('y2',350)

svg.append('text')
.attr('x',50)
.attr('y',200)
.text('cowboy')

svg.append('text')
.attr('x',200)
.attr('y',200)
.attr('text-anchor','middle')
.text('astronaut')
.attr('dy','0.25em')

svg.append('text')
.attr('x',350)
.attr('y',200)
.attr('text-anchor','end')
.text('pioneer')
.attr('dy','0.6em')