xxxxxxxxxx
<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