JSFiddle - React, Tailwind, and code Playground

by tomexx

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>
 <div id="chart"></div>



<svg>
	<defs>
 <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
 <image xlink:href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTzjaQlkAJswpiRZByvgsb3CVrfNNLLwjFHMrkZ_bzdPOWdxDE2Q" x="0" y="0" width="100" height="100" />

</pattern>


 <pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100">
 <image xlink:href="http://www.telascupece.com.br/image/chapa_perfurada.jpg" x="0" y="0" width="100" height="100" />

</pattern>

</defs>
</svg>

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

/**
    * do the force vizualization
    * @param {string} divName name of the div to hold the tree
    * @param {object} inData the source data
    */
   function doTheTreeViz(divName, inData) {
       

       
			// tweak the options
			var options = $.extend({
				stackHeight : 12,
				radius : 5,
				fontSize : 12,
				labelFontSize : 8,
				nodeLabel : null,
				markerWidth : 0,
				markerHeight : 0,
				gap : 1.5,
				nodeResize : "",
				linkDistance : 80,
				charge : -520,
				styleColumn : null,
				styles : null,
				linkName : null,
				width : $(divName).outerWidth(),
				height : $(divName).outerHeight()
			}, inData.d3.options);
		
			// set up the parameters
			options.gap = options.gap * options.radius;
			var width = options.width;
			var height = options.height;
			var data = inData.d3.data;
			var nodes = data.nodes;
			var links = data.links;
			//var color = d3.scale.category20();
			var color = d3.scale.ordinal().range(["#1398ff", "#bdbdbd", "#ffc332", "#daa520", "#00bfff", "#dc143c", "#87cefa", "#90ee90", "#add8e6", "#d3d3d3", "#cf1256", "#12cf5e"]);

			var colorStatus = d3.scale.ordinal().range(["#00ff00", "#fff000", "#f40336"]);
			
			var force = d3.layout.force().nodes(nodes).links(links).size([width, height]).linkDistance(options.linkDistance).charge(options.charge).on("tick", tick).start();

			var svg = d3.select(divName).append("svg:svg").attr("width", width).attr("height", height);

			// get list of unique values in stylecolumn
			linkStyles = [];
		
			if (options.styleColumn) {
				var x;
				for (var i = 0; i < links.length; i++) {
					if (linkStyles.indexOf( x = links[i][options.styleColumn].toLowerCase()) == -1){
						linkStyles.push(x);
					}
				}
			} else{
				linkStyles[0] = "defaultMarker";
			}
			// do we need a marker?

			if (options.markerWidth) {
				svg.append("svg:defs").selectAll("marker").data(linkStyles).enter().append("svg:marker").attr("id", String).attr("viewBox", "0 -5 10 10").attr("refX",...