JSFiddle - React, Tailwind, and code Playground

HTML

<body>
</body>

CSS

.axis {
	font: 10px sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.axis .domain {
	fill: none;
	stroke: #000;
	stroke-opacity: .3;
	stroke-width: 10px;
	stroke-linecap: round;
}

.axis .halo {
	fill: none;
	stroke: #ddd;
	stroke-width: 8px;
	stroke-linecap: round;
}
.slider .handle {
	fill: #fff;
	stroke: #000;
	stroke-opacity: .5;
	stroke-width: 1.25px;
	cursor: crosshair;
}

JavaScript

//creates an array with 1, 2, ..., 800 integers initially.
	//map fn then overwrites these with random no's between 0 and 1.
	var data = d3.range(800).map(Math.random);
	
	//define margins, heights, widths etc
	var padding = 50,
		width = 960,
		height = 500;

	//build scale but only define range for now, no domain.
	var x = d3.scale.linear()
		.range([0, width])
		.clamp(true);

	//build the brush
	var brush = d3.svg.brush()
		.x(x)
		//when extent removed, the .extent elements under the brush start life as invisible.
		//probably some code further down that causes them to spring into existence once moved.
		//the .3 and .5 are starting locations where width of brush = 1
		.extent([.3, .5])
		.on("brushstart", brushstart)
		.on("brushend", brushend)
		.on("brush", brushed)

	//build svg space
	var svg = d3.select("body").append("svg")
		.attr("width", width)
		.attr("height", height)

	// data for nodes and links
	var graph = {
		"nodes": [  { "x": 208.992345, "y": 273.053211, "label": "I am an " },
					{ "x": 595.98896,  "y":  56.377057, "label": "I am an " },
					{ "x": 319.568434, "y": 278.523637, "label": "I am an " },
					{ "x": 214.494264, "y": 214.893585, "label": "I am an " },
					{ "x": 482.664139, "y": 340.386773, "label": "I am an information label" },
					{ "x":  84.078465, "y": 192.021902, "label": "I am an information label" },
					{ "x": 196.952261, "y": 370.798667, "label": "I am an information label" },
					{ "x": 107.358165, "y": 435.15643 , "label": "I am an information label"  },
					{ "x": 401.168523, "y": 443.407779, "label": "I am an information label" },
					{ "x": 508.368779, "y": 386.665811, "label": "I am an information label" },
					{ "x": 355.93773,  "y": 460.158711, "label": "I am an information label" },
					{ "x": 283.630624, "y":  87.898162, "label": "I am an information label" },
					{ "x": 194.771218, "y": 436.366028, "label": "I am an information label" },
					{ "x": 477.520013, "y": 337.547331, "label": "I am an...