JSFiddle - React, Tailwind, and code Playground

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
    })
  force.start()
}