JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

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

CSS

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

JavaScript

//change background color to black
backgroundColor = d3.rgb('#000000')
d3.select("body").style("background-color", backgroundColor)

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

//var color = d3.scaleOrdinal(d3.schemeCategory20);

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

var data = {
  "ofInterest": true,
  "points": 1,
  "explain": [{
    "points": 0,
    "name": "address",
    "description": "Check if multiple companies are registered against same address",
    "explanation": "No address was passed in. Unable to determine."
  }, {
    "points": 1,
    "name": "corroboration-level",
    "description": "Check corroboration level",
    "explanation": "Name: The AECOM Group Pension Scheme does not have fully corroborated data in LEI."
  }, {
    "points": 0,
    "name": "hq-address",
    "description": "Check HQ address is same as legal address",
    "explanation": "Name: The AECOM Group Pension Scheme's HQ Address is the same as the Legal Entity Address' in LEI.",
    "HQ_Address": "",
    "Legal_Address": ""
  }, {
    "points": 0,
    "name": "offshore leaks",
    "description": "Check paper for entity name",
    "explanation": "Name: The AECOM Group Pension Scheme is not in any papers."
  }, {
    "points": 0,
    "name": "registration-status",
    "description": "Check if registration is lapsed",
    "explanation": "Name: The AECOM Group Pension Scheme's registration has not lapsed."
  }, {
    "points": 0,
    "name": "relationship-exception",
    "description": "Check if relationship exception is reported",
    "explanation": "Name: The AECOM Group Pension Scheme has exceptions preventing the return of parent or child relationship data for the following reasons: direct-parent - NON_CONSOLIDATING, ultimate-parent -...