JSFiddle - React, Tailwind, and code Playground

by blackmiaool

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder">
  <div id="viz"></div>
</div>

CSS

.chart {
  background: #d1cec9;
}

.arcchart path {
  stroke: #2c2c2e;
  stroke-width: 1px;
}

.link {
  fill: none;
  stroke: red;
}

JavaScript

var data = [{
  "userName": "Rihanna",
  "userImage": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTzjaQlkAJswpiRZByvgsb3CVrfNNLLwjFHMrkZ_bzdPOWdxDE2Q",
  "userDetails": [{
    "Common": [{
      "id": 0,
      "tag": "Test"
    }],
    "Groups": [{
      "id": 0,
      "tag": "Web guys"
    }],
    "Skills & Expertise": [{
      "id": 0,
      "tag": "JAVA"
    }, {
      "id": 1,
      "tag": "PHP"
    }, {
      "id": 2,
      "tag": "Javascript"
    }, {
      "id": 3,
      "tag": "Design"
    }],
    "Location": [{
      "id": 0,
      "tag": "London"
    }, {
      "id": 1,
      "tag": "Germany"
    }],
    "Company": [{
      "id": 0,
      "tag": "The Old County"
    }, {
      "id": 1,
      "tag": "Bakerlight"
    }]
  }]
}, {
  "userName": "Brad",
  "userImage": "https://lh3.googleusercontent.com/-XdASQvEzIzE/AAAAAAAAAAI/AAAAAAAAAls/5vbx7yVLDnc/photo.jpg",

  "userDetails": [{
    "Common": [{
      "id": 0,
      "tag": "Test"
    }],
    "Groups": [{
      "id": 0,
      "tag": "Web guys"
    }],
    "Skills & Expertise": [{
      "id": 0,
      "tag": "JAVA"
    }, {
      "id": 1,
      "tag": "PHP"
    }, {
      "id": 2,
      "tag": "Javascript"
    }],
    "Location": [{
      "id": 0,
      "tag": "London"
    }],
    "Company": [{
      "id": 0,
      "tag": "The Old County"
    }, {
      "id": 1,
      "tag": "Bakerlight"
    }]
  }]
}]


const width = 400;
const height = 300;
const padding=100;
var viz = d3.select("#viz")
  .append("svg")
  .attr("width", width + padding*2)
  .attr("height", height + padding*2)
  .append("g")
  .attr("transform", `translate(${padding},${padding})`)


var patternsSvg = viz
  .append('g')
  .attr('class', 'patterns');


function colores_google(n) {
  var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f"];
  return colores_g[n % colores_g.length];
}


function getRadius(d) {
  var count = d.commonTags.split(",").length;
  var ratio = count * 6;

  if (count == 1) {
    ratio =...