I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
chart = {
const container = d3
.create("div")
.attr("class", "container")
.style("display", "flex")
.style("justify-content", "space-between");
const columns = container
.selectAll(".column")
.data(clusteredData)
.enter()
.append("div")
.style("padding", "2px")
.style("width", `${100 / clusteredData.length}%`);
columns.append("div").text((d) => d.date);
columns
.selectAll(".item")
.data((d) => d.data)
.enter()
.append("div")
.style("display", (d) => {
if (locationFilter) {
return !d.location.includes(locationFilter.id) ? "none" : "block";
} else {
("block");
}
})
.style("height", "75px")
.style("padding-bottom", "4px")
.attr("object-fit", "cover")
.append("img")
.attr("src", (d) => d.media.source_url)
.style("width", "100%")
.style("height", "100%");
return container.node();
}
clusteredData = Object.entries(
data.reduce((result, post) => {
const year = post.acf?.date ? post.acf.date.slice(0, 4) : "Unknown";
if (!result[year]) {
result[year] = { date: year, data: [] };
}
result[year].data.push(post);
return result;
}, {})
).map(([date, data]) => data)
data = queryDataImages[0]
.filter((d) => d?.featured_media)
.map((post) => {
const postMediaId = post.featured_media;
if (postMediaId) {
return {
...post,
media: queryDataImages[1].find((d) => d.id == postMediaId)
};
}
return post;
})
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.
