JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hook"></div>
<div id="button"></div>

CSS

svg {
    border: 1px dashed lightblue;
    padding: 1em;
}

circle {
    border: 1px solid yellow;
}

JavaScript

/* D3 init ******************************************* */
var svg = d3.select("#hook")
    .append("svg").attr("id","NS.prefix.test")
    .attr("width", 200)
    .attr("height", 200);

/* *************************************************** */
/* NS MODULE ***************************************** */

    d3.select("svg").attr(":xmlns:geo","http://www.example.com/something/")

	svg.append("geo").attr("id","geo")
    	.attr('manual', "WSEN bounding box in decimal degrees")
        .attr('WEST',  "-4.05")
    	.attr('SOUTH', "40.5")
    	.attr('EAST',  "10.0")
    	.attr('NORTH', "54.5")
    	.attr('Title', "Imaginary map of Kinglons ruling Europe");

/* END *********************************************** */
/* *************************************************** */






/* RANDOM DATAD3 MODULE ****************************** */
var data = []; 
for(i=0; i<24; i++){
    data.push({ 
        x: Math.round(Math.random()*200),
        y: Math.round(Math.random()*200),
        r: Math.round(Math.random()*15)
        });
}
console.log(data)
svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
.attr("style","fill:red;fill-opacity:.5;stroke:#CCC;stroke-width:2px;")
    .attr("cx", function(d, i){return d.x })
    .attr("cy", function(d, i){return d.y })
    .attr("r" , function(d, i){return d.r });


/* DOWNLOAD BUTTONS MODULE ****************************** */
var downloadButtons = function(selector){
d3.select(selector).html("").append("a")
	.attr("class", "download")
	.style({
		background: "#333",
		color: "#FFF",
		"font-weight": 900, 
		border: "2px solid #B10000",
		padding: "4px", 
		margin:"4px",
		"text-decoration":"none"})
	.on("click", function () {	// download:
		var e = document.createElement('script');
		if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } 
		else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); }...