JSFiddle - React, Tailwind, and code Playground

by Hamish Wilson

HTML

<body></body>

JavaScript

var w = 900,
		h = 500;
		
	var data = d3.range(100).map(function(d) {
		return {d: d}
	})
	
	var fill = d3.scale.category10()
		
	var svg = d3.select("body").append("svg")
		.attr("width", w)
		.attr("height", h)
		.on("mousemove", moveNode)
		
	var force = d3.layout.force()
		.size([w, h])
		.nodes(data)
		.charge(function(d, i) {return i == 0 ? -1000 : -8})
		.on("tick", tick)
		.start()
		
	var nodes = svg.selectAll(".node")
		.data(data)
		.enter()
		.append("circle")
			.attr("class", "node")
			.attr("r", 7)
			.attr("fill", function(d, i) {return i == 0 ? "none" : fill(i)})
			.attr("stroke", function(d, i) {return i == 0 ? "none" : d3.rgb(fill(i)).darker(1)})
			
	function moveNode() {
		var m = d3.mouse(this);

		force.nodes()[0].x = m[0];
		force.nodes()[0].y = m[1];
	}
			
	function tick() {
		svg.selectAll(".node")
			.attr("cx", function(d, i) { if (i != 0) return d.x})
			.attr("cy", function(d, i) { if (i != 0) return d.y})
	}