JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<svg id="chart" width="200" height="200"></svg>

CSS

circle {
    fill: red;
    stroke-width: 3;
    stroke: darkred;
}

JavaScript

var circle = d3.select('#chart').selectAll('circle')
    .data([[50,50],[150,50],[50,150],[150,150]]);

circle.enter().append('circle')
    .attr('r', 70)
    .attr('cx', function(d) { return d[0]; })
    .attr('cy', function(d) { return d[1]; });

circle.on('mouseover', function() {
    this.parentNode.appendChild(this);
})