JSFiddle - React, Tailwind, and code Playground

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">
        <button id="change">
            Change</button>
		<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 currentSet = 0;

                function getstartDegIndex() {
                    return currentSet == 0 ? 0 : 2;
                }
                function getendDegIndex() {
                    return currentSet == 0 ? 1 : 3;
                }
                
                var plot = document.getElementById(element_id);
                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 count_index_c = 1;
                var count_index_s = 2;
                var children_index = 3;

                var level_index = 5;
                var name_index = 4;

                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 + ")");

                function process_data(data, level, start_deg_c, stop_deg_c, start_deg_s, stop_deg_s) {
                    var name = data[0];
                    var total_c = data[count_index_c];
                    var total_s = data[count_index_s];
                    var children = data[children_index];
                    var current_deg_c = start_deg_c;
                    var current_deg_s = start_deg_s;
                    var parent = '';

                    if (level > max_level) {
                        return;
                    }
                    if (start_deg_c == stop_deg_c || start_deg_s == stop_deg_s) {
                ...