JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fff;
}

JavaScript

const svg = d3.select('svg');
const dataSet = [10, 20, 30, 40];

const circle = svg
  .selectAll('circle')
  .data(dataSet)
  .enter()
  .append('circle')
  .attr('r', d => d)
  .attr('cx', (d, i) => i * 100 + 50)
  .attr('cy', 50)
  .attr('fill', 'red');