Public
Edited
Oct 8, 2023
file = FileAttachment("tweet.js").blob()
d3 = require("d3@6")
tweets = {
let tweets = [];
const text = await Files.text(file);
try {
// Twitter archive format starts with: `window.YTD.tweet.part0 = [ {`
tweets = JSON.parse(text.slice(25)).map(t => t.tweet);
} catch {
tweets = JSON.parse(text);
}
return tweets.map(t => {
t.retweet_count = +t.retweet_count;
t.favorite_count = +t.favorite_count;
t.created_at = new Date(t.created_at);
t.hour = t.created_at.getHours();
return t;
});
}
grouped = d3
.rollups(
tweets,
v => d3.mean(v, d => d.retweet_count),
d => d.created_at.getDay(),
d => d.created_at.getHours() + 5
)
.map(([day, v]) => v.map(([hour, value]) => ({ day, hour, value })))
.flat()
legend({ color: color })
svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g")
.call(d3.axisBottom(x).tickFormat(dateFmt))
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
.call(axis =>
axis
.append("text")
.text(xAttr)
.style("fill", "black")
.attr("transform", `translate( ${x.range()[1]}, +30)`)
.style("text-anchor", "end")
)
.call(axis => axis.selectAll("line").remove())
.call(axis => axis.selectAll("path").remove());
g.append("g")
.call(d3.axisLeft(y))
.call(axis =>
axis
.append("text")
.text(yAttr)
.style("fill", "black")
.style("text-anchor", "middle")
.attr("y", -15)
)
.call(axis => axis.selectAll("line").remove())
.call(axis => axis.selectAll("path").remove());
g.selectAll(".cell")
.data(grouped)
.join("rect")
.attr("class", "cell")
.attr("x", d => x(d.day))
.attr("y", d => y(d.hour))
.attr("width", x.bandwidth())
.attr("height", y.bandwidth())
.attr("fill", d => color(d.value));
return svg.node();
}
color = d3
.scaleSequential(d3.interpolateGreens)
.domain(d3.extent(grouped, d => d.value))
x = d3
.scaleBand()
.domain(d3.range(7))
.range([0, y.bandwidth() * 30])
y = d3
.scaleBand()
.domain(d3.range(24))
.range([0, iheight])
iwidth = width - margin.left - margin.right
iheight = height - margin.top - margin.bottom
yAttr = "Hours"
xAttr = "Day of the Week"
dateFmt = d => "SMTWHFS"[d]
height = 600
margin = ({ left: 50, top: 30, right: 20, bottom: 50 })
import { legend } from "@d3/color-legend"
tweet = FileAttachment("tweet.json").json()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
