JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <form id="form1" runat="server">
    <div class="graphContainer">
    
    </div>

CSS

path.link {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}   

circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}

text {
    font: 10px sans-serif;
    pointer-events: none;
}

text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
}

body {
    background-color: white;
    margin: 0px;
}

.graphContainer {
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

JavaScript

$(function () {
        var color = d3.scale.category20();
        var data = {
            "nodes": [
                { "id": 0, "name": "paper1", "citation": 5, "group": 1 },
                { "id": 1, "name": "paper2", "citation": 8, "group": 2 },
                { "id": 2, "name": "paper3", "citation": 12, "group": 3 },
                { "id": 3, "name": "paper4", "citation": 25, "group": 4 },
                { "id": 4, "name": "paper5", "citation": 15, "group": 5 },
                { "id": 5, "name": "paper6", "citation": 5, "group": 1 },
                { "id": 6, "name": "paper7", "citation": 8, "group": 2 },
                { "id": 7, "name": "paper8", "citation": 12, "group": 3 },
                { "id": 8, "name": "paper9", "citation": 25, "group": 4 },
                { "id": 9, "name": "paper10", "citation": 15, "group": 5 }
            ],
            "links": [
                { "source": 0, "target": 1, "name": "A-B-1", "value": 8 , "grouo": 1},
                { "source": 0, "target": 1, "name": "A-B-2", "value": 24, "grouo": 2 },
                { "source": 0, "target": 2, "name": "A-C-1", "value": 100, "grouo": 1 },
                { "source": 0, "target": 2, "name": "A-C-3", "value": 44, "grouo": 2 },
                { "source": 2, "target": 3, "name": "A-D-1", "value": 169, "grouo": 1 },
                { "source": 2, "target": 3, "name": "A-D-2", "value": 80, "grouo": 2 },
                { "source": 2, "target": 4, "name": "A-E-1", "value": 16, "grouo": 1 },
                { "source": 2, "target": 4, "name": "A-E-5", "value": 200, "grouo": 2 },
                { "source": 4, "target": 5, "name": "A-B-1", "value": 8, "grouo": 1 },
                { "source": 4, "target": 5, "name": "A-B-2", "value": 24, "grouo": 2 },
                { "source": 5, "target": 6, "name": "A-C-1", "value": 12, "grouo": 1 },
                { "source": 5, "target": 6, "name": "A-C-3", "value": 44, "grouo": 2 },
                { "source": 5, "target": 7, "name":...