👋 I am computer scientist researching intelligent and scalable visualization systems for biomedical data exploration. Harvard CS PhD '21.
renderItem = (itemSrc) => {
const svg = d3.create("svg").attr("viewBox", [0, 0, itemWidth, itemHeight]);
svg
.selectAll("rect")
.data(itemSrc)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", (d) => y(d))
.attr("height", (d) => y(0) - y(d))
.attr("width", x.bandwidth())
.attr("stroke", "white")
.attr("stroke-size", 1);
return svg.node();
}
{
let svg = renderItem(items[0].src);
svg.style.width = `${itemWidth}px`;
svg.style.height = `${itemWidth}px`;
return svg;
}
itemRenderer = pilingJs.createD3Renderer(renderItem, {
width: itemWidth * window.devicePixelRatio,
height: itemHeight * window.devicePixelRatio,
background: "transparent"
})
viewSpec = ({
// Mandatory
items,
itemRenderer,
// Optional
columns: 10,
pileBorderColor: 0xdddddd,
pileBorderSize: 1,
pileItemOffset: [10, 10],
pileItemBrightness: (item, i, pile) =>
Math.min(0.9, 0.1 * (pile.items.length - 1 - i))
})
piling = {
rerun;
if (state.piling) state.piling.destroy();
state.piling = pilingJs.createLibrary(container, viewSpec);
yield state.piling;
}
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.
