barUpdate = {
const barChart = BrushableBarChart()
.width(400)
.height(400)
.x("count")
.y("day")
.onBrush((_selected) => {
mutable selected = _selected;
});
d3.select(bar).datum(tweetsByDay).call(barChart);
}
height = width * 1.5
iwidth = width - margin.left - margin.right
iheight = height - margin.top - margin.bottom
x = d3.scaleBand().domain(d3.range(24)).range([0, iwidth])
y = d3.scaleBand().domain(d3.range(60)).range([0, iheight])
color = d3.scaleSequential(d3.interpolateReds).domain([0, 6])
data = FileAttachment("WHtweets.csv").csv()
tweets = d3.map(data, (d) => {
const ts = new Date(Date.parse(d.timestamp.replace(" +0000", "Z")));
return {
id: d.tweet_id,
timestamp: ts
};
})
daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
tweetsByDay = {
const r = d3.rollup(
tweets,
(v) => v.length,
(d) => d.timestamp.getDay()
);
const d = Array.from(r, ([k, v]) => ({
dow: k,
day: daysOfWeek[k],
count: v
}));
d.sort((a, b) => a.dow - b.dow);
return d;
}
groupedTweets = d3.rollup(
tweets,
(v) => v.length,
(d) => d.timestamp.getDay(),
(d) => d.timestamp.getHours(),
(d) => d.timestamp.getMinutes()
)
mutable selected = null
flatTweets = {
const flat = new Array();
const selectedDays =
selected === null ? d3.range(7) : Array.from(selected, (d) => d.dow);
groupedTweets.forEach((innerGroup, day) => {
if (selectedDays.indexOf(day) === -1) {
return;
}
innerGroup.forEach((innerGroup2, hour) =>
innerGroup2.forEach((count, minute) =>
flat.push({
day,
hour,
minute,
count: Math.log(count)
})
)
);
});
return flat;
}
import { BrushableBarChart } from "@john-guerra/d3-reusable-brushable-barchart-pattern"
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.
