es2015 clicky label

click on a circle to add a draggable label with a nice swoopy arc connecting the label to the circle

this iteration converts the code to ES2015 in something like the airbnb style

forked from @jburnmurdoch's block: bcdb4e85c7523a2b0e64961f0d227154

<!DOCTYPE html>
<html lang='en-US'>
<head>
	<meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,user-scalable=no'>
	<title>clicky label demo</title>
	<script src='https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js' defer></script>
	<script src='https://unpkg.com/d3-swoopy-drag' defer></script>
	<script src='d3-jetpack-module.js' defer></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js' defer></script>
	<script src='vis.js' defer></script>
	<style media='screen'>
		html, body{
			font-family:Arial,sans-serif;
			font-size: 18px;
		}
		text{
			fill: #000;
			font-size: 18px;
		}
		.heading{
			font-size: 1.15rem;
			font-weight: 600;
		}
		.title{
			font-size: 0.8rem;
		}
		.legend text{
			font-size: 0.7rem;
			fill: #74736c;
		}
		path.domain{
			fill: none;
			stroke: none;
		}
		.tick line{
			shape-rendering: crispEdges;
			stroke: lightgrey;
			stroke-width: 1;
		}
		.tick text{
			font-size: 0.75rem;
		}
		.label{
			font-size: 0.85rem;
		}
	    .shadow{
	    	text-shadow:2px 2px 2px #fff, -2px -2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px 0px 2px #fff, 2px 0px 2px #fff;
	    }
	</style>
</head>
<body>
	<svg></svg>
</body>
</html>

Updated missing url https://unpkg.com/d3/build/d3.min.js to https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js

https://unpkg.com/d3/build/d3.min.js

https://unpkg.com/d3-swoopy-drag

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js