JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<svg width="600" height="600"></svg>

CSS

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

JavaScript

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
    

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));


var groupColor = d3.scaleOrdinal(d3.schemeCategory20);
var nameColor = d3.scaleLinear().domain([65,78,90]).range(["#f00", "#0f0", "#00f"]);
var madameColor = d3.scaleLinear().domain([true, false]).range(["#f00", "#aaa"]);

var colFuncs = {
    "Group": function (d) { return groupColor (d.group); },
    "Name": function (d) { return nameColor (d.id.substring(0,1).toUpperCase().charCodeAt(0)); },
    "Madame?": function(d) { return madameColor (d.id.substring(0,2) === "Mm"); }
};
var currentColFunc = colFuncs["Group"];

d3.select("body").insert("select", ":first-child")
  .on ("change", function() {
      var e = d3.event;
      if (e) {
        currentColFunc = colFuncs[e.target.value];
        updateColour();
      }
  })
	.selectAll("option")
	.data(d3.keys(colFuncs))
  .enter()
  .append("option")
  .attr("value", function(d) { return d; })
  .text (function(d) { return d; })
 ;


var graph = {
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1},
    {"id": "Mme.Magloire", "group": 1},
    {"id": "CountessdeLo", "group": 1},
    {"id": "Geborand", "group": 1},
    {"id": "Champtercier", "group": 1},
    {"id": "Cravatte", "group": 1},
    {"id": "Count", "group": 1},
    {"id": "OldMan", "group": 1},
    {"id": "Labarre", "group": 2},
    {"id": "Valjean", "group": 2},
    {"id": "Marguerite", "group": 3},
    {"id": "Mme.deR", "group": 2},
    {"id": "Isabeau", "group": 2},
    {"id": "Gervais", "group": 2},
    {"id": "Tholomyes", "group": 3},
    {"id": "Listolier", "group": 3},
    {"id": "Fameuil", "group": 3},
    {"id": "Blacheville", "group": 3},
    {"id": "Favourite",...