JSFiddle - React, Tailwind, and code Playground

by bhatuj

CSS

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
  opacity:0.25;
}

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

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

JavaScript

/* ----------------
	DATA 
----------------*/
var datax = {"directed": false, "graph": [], "nodes": [{"Region": "X15", "Group": "EU", "id": "BE"}, {"id": "FR"}, {"id": "BG"}, {"id": "DK"}, {"id": "HR"}, {"id": "DE"}, {"id": "HU"}, {"id": "FI"}, {"id": "NL"}, {"id": "PT"}, {"id": "NO"}, {"id": "TR"}, {"id": "LV"}, {"id": "LT"}, {"id": "LU"}, {"id": "RO"}, {"id": "PL"}, {"id": "CH"}, {"id": "GR"}, {"id": "EE"}, {"id": "IS"}, {"id": "IT"}, {"id": "CZ"}, {"id": "CY"}, {"id": "IL"}, {"id": "IE"}, {"Region": "12", "id": "ES"}, {"id": "MD"}, {"id": "RS"}, {"id": "SK"}, {"id": "SI"}, {"id": "SE"}, {"Group": "X", "id": "AT"}], "links": [{"source": 0, "target": 0, "weight": 0}, {"source": 0, "target": 1, "weight": 130}, {"source": 0, "target": 2, "weight": 1}, {"source": 0, "target": 3, "weight": 36}, {"source": 0, "target": 4, "weight": 4}, {"source": 0, "target": 5, "weight": 117}, {"source": 0, "target": 6, "weight": 6}, {"source": 0, "target": 7, "weight": 18}, {"source": 0, "target": 8, "weight": 107}, {"source": 0, "target": 9, "weight": 14}, {"source": 0, "target": 10, "weight": 9}, {"source": 0, "target": 11, "weight": 4}, {"source": 0, "target": 12, "weight": 0}, {"source": 0, "target": 13, "weight": 5}, {"source": 0, "target": 14, "weight": 0}, {"source": 0, "target": 15, "weight": 2}, {"source": 0, "target": 16, "weight": 29}, {"source": 0, "target": 17, "weight": 55}, {"source": 0, "target": 18, "weight": 0}, {"source": 0, "target": 19, "weight": 4}, {"source": 0, "target": 20, "weight": 2}, {"source": 0, "target": 21, "weight": 69}, {"source": 0, "target": 22, "weight": 12}, {"source": 0, "target": 23, "weight": 1}, {"source": 0, "target": 24, "weight": 10}, {"source": 0, "target": 25, "weight": 2}, {"source": 0, "target": 26, "weight": 87}, {"source": 0, "target": 27, "weight": 0}, {"source": 0, "target": 28, "weight": 1}, {"source": 0, "target": 29, "weight": 1}, {"source": 0, "target": 30, "weight": 2}, {"source": 0, "target": 31, "weight": 15}, {"source":...