JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<!DOCTYPE html>
<body>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var zoom = d3.zoom()
	.scaleExtent([.2, 10])
	.on("zoom", zoomed);

var svg = d3.select("body").append("svg")
	.attr("width", 600)
	.attr("height", 600)
	.call(zoom);

var mainContainer = svg.append("g");

mainContainer.append("circle")
	.attr("cx", 335)
	.attr("cy", 290)
	.attr("r", 10);

zoom.scaleTo(svg, 2);

function zoomed() {
	mainContainer.attr("transform", d3.event.transform);
}