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;
}

.labelholder text {
  font-size: 12px;
}

path {
  fill: none;
  stroke: #666;
  stroke-width: 1px;
}

JavaScript

var w = 600;
 var h = 600;


 var viz = d3.select("#viz")
   .append("svg")
   .attr("width", w)
   .attr("height", h)
   .append("g")
   .attr("transform", "translate(40,100)");


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

 var userholder = viz.append("g")
   .attr("class", "userholder");

 var labelholder = viz.append("g")
   .attr("class", "labelholder");

 var treeholder = viz.append("g")
   .attr("class", "treeholder");


 var data = [{
   "userName": "You",
   "userImage": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTzjaQlkAJswpiRZByvgsb3CVrfNNLLwjFHMrkZ_bzdPOWdxDE2Q"
 }, {
   "userName": "Johnny",
   "userImage": "https://crossovercomicblog.files.wordpress.com/2012/08/johnny-depp-sexy.jpg"
 }, {
   "userName": "Jeri",
   "userImage": "https://68.media.tumblr.com/avatar_3b6d6241698f_128.png"
 }, {
   "userName": "Charlize",
   "userImage": "https://cdn.imza.com/indir/logo/128/charlize-theron.png"
 }, {
   "userName": "Them",
   "userImage": "https://68.media.tumblr.com/avatar_8f199caf2d82_128.png"
 }]

 var smallRadius = 20;
 var bigRadius = 30;

 $.each(data, function(index, value) {
   var defs = patternsSvg.append('svg:defs');

   //big design   
   defs.append('svg:pattern')
     .attr('id', index + "--" + value.userName.toLowerCase())
     .attr('width', 1)
     .attr('height', 1)
     .append('svg:image')
     .attr('xlink:href', value.userImage)
     .attr('x', 0)
     .attr('y', 0)
     .attr('width', bigRadius * 2)
     .attr('height', bigRadius * 2);

   //small design
   defs.append('svg:pattern')
     .attr('id', index + "-" + value.userName.toLowerCase())
     .attr('width', 1)
     .attr('height', 1)
     .append('svg:image')
     .attr('xlink:href', value.userImage)
     .attr('x', 0)
     .attr('y', 0)
     .attr('width', smallRadius * 2)
     .attr('height', smallRadius * 2);

 });

 var extendedY = 50; //will cause the last element to be extended in the Y direction

 var count = data.length;

 //plot...