Unlisted
Edited
Jan 6, 2024
function getCounts(movies, yearWatched, yearKey) {
return Object.entries(movies.reduce((mem, movie) => {
if (!mem[movie[yearKey]]) {
mem[movie[yearKey]] = 0;
}
mem[movie[yearKey]]++;
return mem;
}, {})).map((val, key) => ({
"year_watched": yearWatched,
"year_released": val[0],
count: val[1]
}))
}
data = [
...getCounts(movies2020, 2020, "year_released"),
...getCounts(movies2021, 2021, "year_released"),
...getCounts(movies2022, 2022, "year_released"),
...getCounts(movies2023Json, 2023, "year_released")
]
moviePlot = Plot.plot({
y: {tickFormat: "s", grid: true},
x: {interval: 1, tickFormat: (num) => num.toString()},
color: {scheme: "observable10", legend: true},
grid: true,
marks: [
Plot.rectY(data, {y: "count" ,
x: "year_released", fill: "year_watched", fy: "year_watched"
}),
Plot.ruleY([0])
]
})
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.
