Interactive Component

<!DOCTYPE html>
<html lang="en">
	<style>

.node circle {
			fill: #fff;
			stroke: steelblue;
			stroke-width: 3px;
		}

.node text { font: 12px sans-serif; }

.link {
			fill: none;
			stroke: #ccc;
			stroke-width: 2px;
		}
		
	</style>
	<head>
		<meta charset="utf-8">
		<title>NYC Water Quality Complaints</title>
		<h1>Total Number of Complaints in Different Boroughs with Different Reasons and Time</h1>
	</head>

<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
	
	<script>
	
	d3.json("https://raw.githubusercontent.com/Kewei-Liu/Data-Visualization/master/json_data.json", function(treeData){
	
	// set margin
	var margin = { top: 20, right: 25, bottom: 0, left: 150 },
	  width = 1500 - margin.left - margin.right,
	  height = 800 - margin.top - margin.bottom;

// add svg
	var svg = d3
	  .select("body")
	  .append("svg")
	  .attr("width", width + margin.right + margin.left)
	  .attr("height", height + margin.top + margin.bottom)
	  // adding group into svg
	  .append("g")
	  // put group on the top-left
	  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// add other variables
	var i = 0,
	  duration = 750,
	  root;

// declare a tree 
	var treemap = d3.tree().size([height, width]);
	
	function diagonal(s, d) {
	  path = `M ${s.y} ${s.x}
		C ${(s.y + d.y) / 2} ${s.x},
		  ${(s.y + d.y) / 2} ${d.x},
		  ${d.y} ${d.x}`;
	  return path;
	}
	
	function collapse(d) {
	  if (d.children) {
		d._children = d.children;
		d._children.forEach(collapse);
		d.children = null;
	  }
	}
	
	function click(d) {
	  if (d.children) {
		d._children = d.children;
		d.children = null;
	  } else {
		d.children = d._children;
		d._children = null;
	  }
	  update(d);
	}
	
	function update(source) {

// get the positions of nodes
	  var treeData = treemap(root);
	  
	  // compute new tree layout
	  var nodes = treeData.descendants(),
	  links = treeData.descendants().slice(1);
	  
	  // determine the horizontal spacing of the nodes
	  nodes.forEach(function(d) {
	  d.y = d.depth * 300;
	  });
	  
	  
	  // Dealing with nodes
	  // add ids to nodes so we can select nodes by indexing
	  var node = svg.selectAll("g.node").data(nodes, function(d) {
		return d.id || (d.id = ++i);
	  });
	  
	  // enter any new nodes at the parent's previous position.
	  var nodeEnter = node
		.enter()
		.append("g")
		.attr("class", "node")
		// default position is the current parent's position
		.attr("transform", function(d) {
		  return "translate(" + source.y0 + "," + source.x0 + ")";
		})
		// add click event to each new node
		.on("click", click);
	  // add cycle to each new node
	  nodeEnter
		.append("circle")
		.attr("class", "node")
		.attr("r", 1e-6)
		// if a node has children and is collasped, then fill it with lightsteelblue
		.style("fill", function(d) {
		  return d._children ? "lightsteelblue" : "#fff";
		});
	  // add text to each new node
	  nodeEnter
		.append("text")
		.attr("dy", ".35em")
		.attr("x", function(d) {
		  return d.children || d._children ? 0 : 12;
		})
		.attr("y", function(d) {
		  return d.children || d._children ? -7-Math.sqrt(d.data.value)/2.5 : 0;
		})
		.attr("text-anchor", function(d) {
		  return d.children || d._children ? "middle" : "start";
		})
		.text(function(d) {
		  return d.data.name + ': ' + +d.data.value;
		});
	  
	  // transition entering nodes to their new position.
	  var nodeUpdate = nodeEnter.merge(node);
	  nodeUpdate
		.transition()
		.duration(duration)
		.attr("transform", function(d) {
		  return "translate(" + d.y + "," + d.x + ")";
		});
	  
	  // set the styling of the entering nodes
	  nodeUpdate
		.select("circle.node")
		.attr("r", d => Math.sqrt(d.data.value)/2.5)
		.style("fill", function(d) {
		  return d._children ? "lightsteelblue" : "#fff";
		})
		.attr("cursor", "pointer");
		
	  // transition exiting nodes to the parent's new position.
	  var nodeExit = node
		.exit()
		.transition()
		.duration(duration)
		.attr("transform", function(d) {
		  return "translate(" + source.y + "," + source.x + ")";
		})
		.remove();
	  
	  // “remove” the shape and text of the exiting nodes
	  nodeExit.select("circle").attr("r", 1e-6);
	  nodeExit.select("text").style("fill-opacity", 1e-6);
	  
	  
	  // Dealing with links
	  // select all the links
	  var link = svg.selectAll("path.link").data(links, function(d) {
		return d.id;
	  });
	  
	  // enter any new links at the parent's previous position.
	  var linkEnter = link
		.enter()
		.insert("path", "g")
		.attr("class", "link")
		.attr("d", function(d) {
		  var o = { x: source.x0, y: source.y0 };
		  return diagonal(o, o);
		});
	  
	  // transition entering links to their new position.
	  linkEnter.merge(link)
		.transition()
		.duration(duration)
		.attr("d", function(d) {
		  return diagonal(d, d.parent);
		});
	  
	  // transition exiting links to the parent's new position.
	  link.exit()
		.transition()
		.duration(duration)
		.attr("d", function(d) {
		var o = { x: source.x, y: source.y };
		return diagonal(o, o);
		})
		.remove();
		
	  // stash the old positions for transition.
	  nodes.forEach(function(d) {
		d.x0 = d.x;
		d.y0 = d.y;
	  });
	}
    	
	root = d3.hierarchy(treeData, function(d) {return d.children;});

root.x0 = height/2;
	root.y0 = 0;

// collapse nodes after the second layer
	root.children.forEach(collapse);

update(root);
	
	});
	</script>
	
	</body>
  
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js