JSFiddle - React, Tailwind, and code Playground

by draditya91

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>
	<div id="body">
		<div class="container">
			<div class="row-fluid">
				<div class="span6">					
					<div id="code_hierarchy">
					</div>
				</div>
				<div class="span4 pull-right">
					<div style="opacity: 0;" id="code_hierarchy_legend"><h2></h2><p></p></div>
				</div>
			</div>
			
		</div> 
  </div>
   </body>

CSS

body {
        font-family:Century Gothic,Arial,Helvetica,sans-serif;
        padding-bottom: 40px;
}
p{
  margin-top:20px;
}
form {
  position: absolute;
  right: 10px;
  top: 10px;
}

#code_hierarchy
{
    margin:0 auto;
}

#code_hierarchy_legend
{
    height:80px;
	float:right;padding-top:80px;
    text-align:center;
}

p
{
    font-size:1.2em;
}
path{
  stroke: #fff;
}
path.hovered{
  stroke: #feb24c;
  stroke-width : 2;
  stroke-opacity: 1;
}
path.active{
  stroke: #fc4e2a;
  stroke-width : 2;
  stroke-opacity: 1;
}

JavaScript

$(document).ready(function() {
    
function init_code_hierarchy_plot(element_id,data)
{
    var plot = document.getElementById(element_id);
         console.log("yes");
    while (plot.hasChildNodes())
    {
        plot.removeChild(plot.firstChild);
    }

    var width = plot.offsetWidth;
    var height = width;
    var x_margin = 40;
    var radius = width/7;
    var y_margin = 40;
    var name_index = 0;
    var count_index = 1;
    var children_index = 3;
	
   
    var max_depth=3;
    
    var data_slices = [];
    var max_level = 4;
    var color = d3.scale.category20c();

    var svg = d3.select("#"+element_id).append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
    
	var x = d3.scale.linear().range([0, 2 * Math.PI]);
	var y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]);
	    
    function process_data(data,level,start_deg,stop_deg)
    {
        var name = data[0];
        var total = data[1];
        var children = data[3];
        var current_deg = start_deg;
		var parent = '';

        if (level > max_level)
        {
            return;
        }
        if (start_deg == stop_deg)
        {
            return;
        }
		
		
        data_slices.push([start_deg,stop_deg,name,level,data[1],data[2]]);
		
        for (var key in children)
        {
            child = children[key];
            
			var inc_deg = (stop_deg-start_deg)/total*child[count_index];
            var child_start_deg = current_deg;
            
			current_deg+=inc_deg;
            
			var child_stop_deg = current_deg;
            var span_deg = child_stop_deg-child_start_deg;
            
			process_data(child,level+1,child_start_deg,child_stop_deg);
        }
    }
    
    process_data(data,0,0,360./180.0*Math.PI);

    var ref = data_slices[0];
    var next_ref = ref;
    var last_refs = [];

    var thickness =...