D3 Examples - Interactive Component

xxxxxxxxxx
 
<!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>
​
    <!-- load the d3.js library --> 
    <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>
    
    