Built with blockbuilder.org
forked from jwilber's block: circle pack hover highlight
license: mit |
Built with blockbuilder.org
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> |
{ | |
"tweets": [ | |
{"user": "Al", "content": "I really love seafood.", "timestamp": " Mon Dec 23 2013 21:30 GMT-0800 (PST)", "retweets": ["Raj","Pris","Roy"], "favorites": ["Sam"]}, | |
{"user": "Al", "content": "I take that back, this doesn't taste so good.", "timestamp": "Mon Dec 23 2013 21:55 GMT-0800 (PST)", "retweets": ["Roy"], "favorites": []}, | |
{"user": "Al", "content": "From now on, I'm only eating cheese sandwiches.", "timestamp": "Mon Dec 23 2013 22:22 GMT-0800 (PST)", "retweets": [], "favorites": ["Roy","Sam"]}, | |
{"user": "Roy", "content": "Great workout!", "timestamp": " Mon Dec 23 2013 7:20 GMT-0800 (PST)", "retweets": [], "favorites": []}, | |
{"user": "Roy", "content": "Spectacular oatmeal!", "timestamp": " Mon Dec 23 2013 7:23 GMT-0800 (PST)", "retweets": [], "favorites": []}, | |
{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []}, | |
{"user": "Roy", "content": "Just got a ticket for texting and driving!", "timestamp": " Mon Dec 23 2013 8:05 GMT-0800 (PST)", "retweets": [], "favorites": ["Sam", "Sally", "Pris"]}, | |
{"user": "Pris", "content": "Going to have some boiled eggs.", "timestamp": " Mon Dec 23 2013 18:23 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]}, | |
{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]}, | |
{"user": "Sam", "content": "@Roy Let's get lunch", "timestamp": " Mon Dec 23 2013 11:05 GMT-0800 (PST)", "retweets": ["Pris"], "favorites": ["Sally", "Pris"]} | |
] | |
} |