The avatar for @flekschas
Fritz Lekschas
👋 I am computer scientist researching intelligent and scalable visualization systems for biomedical data exploration. Harvard CS PhD '21.
Published
Edited
Sep 11, 2021
Fork of Piling.js with D3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
itemRenderer = pilingJs.createVegaLiteRenderer({
vega,
vegaLite,
baseSpec: {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: itemWidth,
height: itemHeight,
mark: "bar",
encoding: {
x: {
field: "index",
type: "ordinal"
},
y: {
field: "value",
type: "quantitative"
}
}
}
})
Insert cell
Insert cell
Insert cell
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))
})
Insert cell
Insert cell
piling = {
rerun;
if (state.piling) state.piling.destroy();
state.piling = pilingJs.createLibrary(container, viewSpec);
yield state.piling;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more