JSFiddle - React, Tailwind, and code Playground

by Anonymous

HTML

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

CSS

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

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

JavaScript

const data = {
  "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",
    "group": 3
  }, {
    "id": "Dahlia",
    "group": 3
  }, {
    "id": "Zephine",
    "group": 3
  }, {
    "id": "Fantine",
    "group": 3
  }, {
    "id": "Mme.Thenardier",
    "group": 4
  }, {
    "id": "Thenardier",
    "group": 4
  }, {
    "id": "Cosette",
    "group": 5
  }, {
    "id": "Javert",
    "group": 4
  }, {
    "id": "Fauchelevent",
    "group": 0
  }, {
    "id": "Bamatabois",
    "group": 2
  }, {
    "id": "Perpetue",
    "group": 3
  }, {
    "id": "Simplice",
    "group": 2
  }, {
    "id": "Scaufflaire",
    "group": 2
  }, {
    "id": "Woman1",
    "group": 2
  }, {
    "id": "Judge",
    "group": 2
  }, {
    "id": "Champmathieu",
    "group": 2
  }, {
    "id": "Brevet",
    "group": 2
  }, {
    "id": "Chenildieu",
    "group": 2
  }, {
    "id": "Cochepaille",
    "group": 2
  }, {
    "id": "Pontmercy",
    "group": 4
  }, {
    "id": "Boulatruelle",
    "group": 6
  }, {
    "id": "Eponine",
    "group": 4
  }, {
    "id": "Anzelma",
    "group": 4
  }, {
    "id": "Woman2",
    "group": 5
  }, {
   ...