JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

CSS

#circle circle {
  fill: none;
  pointer-events: all;
}

.group path {
  fill-opacity: .5;
}

path.chord {
  stroke: #000;
  stroke-width: .25px;
}

#circle:hover path.fade {
  display: none;
}

JavaScript

var data = {"links": [
  {
    "id": "11",
    "color": "#d96500\r\n\r\n",
    "source": "Norte ",
    "target": "Norte",
    "id2": "11",
    "value": "110042",
    "total": "112827",
    "percentagem": "97.53"
  },
  {
    "id": "11",
    "color": "#bdb66c\r\n",
    "source": "Norte ",
    "target": "Algarve",
    "id2": "15",
    "value": "148",
    "total": "112827",
    "percentagem": "0.13"
  },
  {
    "id": "11",
    "color": "#bdaf57\r\n",
    "source": "Norte ",
    "target": "Centro",
    "id2": "16",
    "value": "1533",
    "total": "112827",
    "percentagem": "1.36"
  },
  {
    "id": "11",
    "color": "#fffbc4\r\n",
    "source": "Norte ",
    "target": "Lisboa",
    "id2": "17",
    "value": "810",
    "total": "112827",
    "percentagem": "0.72"
  },
  {
    "id": "11",
    "color": "#f5b367",
    "source": "Norte ",
    "target": "Alentejo",
    "id2": "18",
    "value": "180",
    "total": "112827",
    "percentagem": "0.16"
  },
  {
    "id": "11",
    "color": "#f5b367\r\n",
    "source": "Norte ",
    "target": "Região Autónoma dos Açores",
    "id2": "20",
    "value": "66",
    "total": "112827",
    "percentagem": "0.06"
  },
  {
    "id": "11",
    "color": "#decf00\r\n",
    "source": "Norte ",
    "target": "Região Autónoma da Madeira",
    "id2": "30",
    "value": "48",
    "total": "112827",
    "percentagem": "0.04"
  },
  {
    "id": "15",
    "color": "#d96500\r\n\r\n",
    "source": "Algarve ",
    "target": "Norte",
    "id2": "11",
    "value": "37",
    "total": "11633",
    "percentagem": "0.32"
  },
  {
    "id": "15",
    "color": "#bdb66c\r\n",
    "source": "Algarve ",
    "target": "Algarve",
    "id2": "15",
    "value": "11202",
    "total": "11633",
    "percentagem": "96.30"
  },
  {
    "id": "15",
    "color": "#bdaf57\r\n",
    "source": "Algarve ",
    "target": "Centro",
    "id2": "16",
    "value": "53",
    "total": "11633",
    "percentagem": "0.46"
  },
  {
    "id": "15",
    "color": "#fffbc4\r\n",
   ...