Simple Interactive Treepack

<!doctype html>
<html>
<head>
<title>Interactive Tree Map</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
</body>
<script>

d3.json("tweets.json", data => {

d3.select("body").append("svg").attr("width",600).attr("height",600)
    
var colorScale = d3.scaleOrdinal()
    .range(["#5EAFC6", "#FE9922", "#93c464", "#75739F"])

var nestedTweets = d3.nest()
        .key(d => d.user)
        .entries(data.tweets)
    
    var packableTweets = {id: "All Tweets", values: nestedTweets}
        
    var root = d3.hierarchy(packableTweets, d => d.values)
        .sum(d => d.retweets ? d.retweets.length + d.favorites.length + 1: 0)
        
    var treemapLayout = d3.treemap()
        .size([600,600])
        .padding(d => d.depth * 5 + 5)

treemapLayout(root) 
    
    d3.select("svg").selectAll("rect").data(root.descendants(), d => d.data.content || d.data.user || d.data.key)
        .enter()
        .append("rect")
        .attr("x", d => d.x0)
        .attr("y", d => d.y0)
        .attr("width", d => d.x1 - d.x0)
        .attr("height", d => d.y1 - d.y0)
        .style("fill", d => colorScale(d.depth))
        .style("stroke", d => colorScale(d.depth))
        .on("click", filterTreemap)
		.on("mouseover", function(){
		document.body.style.cursor = "pointer"
		})

function filterTreemap(d) {

var newRoot = d3.hierarchy(d.data, p => p.values)
            .sum(p => p.retweets ? p.retweets.length + p.favorites.length + 1: 0)

treemapLayout(newRoot)

d3.select("svg").selectAll("rect")
            .data(newRoot.descendants(), p => p.data.content || p.data.user || p.data.key)  
            .exit() 
            .remove()
        
        d3.select("svg").selectAll("rect")
            .data(newRoot.descendants(), p => p.data.content || p.data.user || p.data.key)
            .enter()
            .append("rect")
            .style("fill", p => colorScale(p.depth))
		
        d3.select("svg").selectAll("rect")
            .on("click", d === root ? 
                (p) => filterTreemap(p) : () => filterTreemap(root))
                    
        d3.select("svg").selectAll("rect")
            .transition()
            .duration(1000)
            .attr("x", p => p.x0)
            .attr("y", p => p.y0)
            .attr("width", p => p.x1 - p.x0)
            .attr("height", p => p.y1 - p.y0)
    }

});
</script>
</html>

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