circle pack hover highlight

forked from jwilber's block: circle pack hover highlight

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
    <div id="viz">
      <svg style="width:600px;height:600px;" ></svg>
    </div>
    <script>
      d3.json("tweets.json", viz);
      
      function viz(data) {
    	  
        var depthScale = d3.scaleOrdinal()
          .range(["#548687", "#FFFFC7", "#473335", "#93c464", "#75739F"]);
        
        var nestedTweets = d3.nest()
          .key(d => d.user)
          .entries(data.tweets);
        
        var packableTweets = {id: "All Tweets", values: nestedTweets};
        var packChart = d3.pack();
        
        packChart.padding(8);
        
        packChart.size([500,500]);
        
        var root = d3.hierarchy(packableTweets, d => d.values)
          .sum(d => d.retweets ? d.retweets.length + d.favorites.length + 1 : undefined);
        
        d3.select("svg")
          .append("g")
            .attr("transform", "translate(100,20)")
          .selectAll("circle")
          .data(packChart(root).descendants())
          .enter()
          .append("circle")
            .attr("r", d => d.r)
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
            .style("fill", d => depthScale(d.depth))
            .style("stroke", "black");
        
        d3.selectAll('circle')
        	.filter(d => d.height == 0)
        	.on('mouseover', highlightCircle)
          .on('mouseout', deHighlightCircle)
        
        function highlightCircle(d) {
          d3.selectAll('circle').style('fill', p => {
              return p.x == d.x && p.y == d.y ? 'coral' : depthScale(p.depth)
          })
          d3.selectAll('circle').style('opacity', p => {
            if (p.height == 0) {
              return p.x == d.x && p.y == d.y ? 1 : .8
            }
          })
        }
        
        function deHighlightCircle(d) {
           d3.selectAll('circle').style('fill', d => depthScale(d.depth))
            d3.selectAll('circle').style('opacity', 1) 
        }
      }
    </script>
  </body>

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