JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  
  <script type="text/javascript" src="http://d3js.org/d3.v2.min.js?2.9.1"></script>

CSS

body {
		position: relative;
		font-family: "Helvetica Neue", Helvetica, sans-serif;
		margin: 1em auto 4em auto;
		background: #666666;
	}

	h1 {
		font-size: 64px;
		font-weight: 300;
		letter-spacing: -2px;
		margin: .3em 0 .1em 0;
	}

	h2 {
		margin-top: 2em;
	}

	h1, h2 {
		text-rendering: optimizeLegibility;
	}

	svg {
		font: 10px sans-serif;
	}

	.axis path, .axis line {
		fill: none;
		stroke: #ffffff;
		shape-rendering: crispEdges;
	}
	

	#chart {
		height: 800px;
		width: 1200px;
		border: 1px solid #ffffff;
	}
	.node rect {
		cursor: move;
		fill-opacity: .9;
		shape-rendering: crispEdges;
	}
	.node text {
		pointer-events: none;
		text-shadow: 0 1px 0 #fff;
	}
	.link {
		fill: none;
		stroke: #000;
		stroke-opacity: .2;
	}
	.link:hover {
		stroke-opacity: .5;
	}


	path.link {
		fill: none;
		stroke: #fff;
		stroke-width: 1.5px;
	}

	marker#defaultMarker {
		fill: #fff;
	}

	path.link.defaultMarker {
		stroke: #fff;
	}

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

	text {
		pointer-events: none;
	}

	text.shadow {
		stroke: #fff;
		stroke-width: 3px;
		stroke-opacity: .8;
	}

JavaScript

function addUserPatterns(patternsSvg, userData){
    
    $.each(userData, function( index, value ) {
        var defs = patternsSvg.append('svg:defs');
                    defs.append('svg:pattern')
                        .attr('id', "--"+index+"-"+value.userName.toLowerCase())
                        //.attr('patternUnits', 'userSpaceOnUse')
                          .attr('x', 0)
                        .attr('y', 0)
                        .attr('width', 50)
                        .attr('height', 50)
                        .append('svg:image')
                        .attr('xlink:href', value.userImage)
                        .attr('x', 0)
                        .attr('y', 0)
                        .attr('width', 100)
                        .attr('height', 100);
    });    

    
    
                var circle = patternsSvg.append("svg:g")
                    .selectAll("circle")
                        .data(userData);
                   
                       //enter
                       circle 
                        .enter()
                        .append("svg:circle")
                        .attr("r", 50)
                        .style("fill", function(d, i) {
                            var imgUrl = "--"+i+"-"+d.userName.toLowerCase();
                            return "url(#"+imgUrl+")"; 
                        })
                       .attr("cy", function(d){
                           return  random(0, 300);
                       })
                       .attr("cx", function(d){
                           return  random(0, 300);
                       })
    
    function random(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }



}

var patternsSvg = d3.select("body")
                .append('svg')
                .attr('class', 'patterns')
                .attr('width', 500)
                .attr('height', 500)
                    .append('g')
                    .attr("transform","translate(100,...