JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle cx="50" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="125" cy="50" r="20" fill="seagreen"></circle>
	<circle cx="200" cy="50" r="20" fill="seagreen"></circle>
</svg>

JavaScript

d3.selectAll("circle").on("mouseover", () => {
        d3.select(this).attr("fill", "maroon")
    })
    .on("mouseout", () => {
        d3.select(this).attr("fill", "seagreen")
    })