I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
layout = {
const container = d3
.create("div")
.attr("class", "container")
.style("width", width)
.style("display", "flex")
.style("overflow", "scroll");
const svg = container
.append("svg")
.style("background", "gainsboro")
.style("width", width)
.style("height", height)
.style("flex", "2");
const sentences = container
.append("div")
.style("flex", "1")
.style("max-height", "500px")
.style("padding", "10px")
.style("overflow", "scroll");
const layer = svg.append("g");
const r = 50;
const texts = layer
.selectAll("rect")
.data(projection)
.enter()
.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("fill", (d) => colors(d.cluster))
.attr("stroke", "black")
.attr("x", (d) => d.x)
.attr("y", (d) => d.y)
.on("click", (event, d) => {
sentences.text(d.sentence);
});
function zoomed({ transform }) {
texts.attr("transform", transform);
}
svg.call(d3.zoom().scaleExtent([0.1, 10]).on("zoom", zoomed));
return container.node();
}
projection = {
return data.map((d, i) => ({
sentence: d.sentence,
cluster: d.cluster,
x: x(d.coord[0]),
y: y(d.coord[1]),
}));
}
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.
