Visiting Research at NYU Shanghai; previously @ Nest, Apple, AOL; faculty @ Olin College, NYU Shanghai.
withBackground(
grid(
[0, 1, 2, 3].map(
() =>
svg`<svg width=100 height=50><rect width=100% height=100% fill="blue"/></svg>`
)
)
)
{
let colors = Array(256)
.fill()
.map((_, i) => `rgb(${i},128,128)`);
let swatches = colors.map(
color =>
svg`<svg width=15 height=10><rect width=100% height=100% fill="${color}"/></svg>`
);
return grid(swatches, { width: width / 2, padding: 2 });
}
hcat([
svg`<svg width="50" height="100"><rect width=100% height=100% fill="blue"/></svg>`,
svg`<svg width="100" height="50"><rect width=100% height=100% fill="green"/></svg>`
])
hcat([
svg`<svg width="50" height="100"><rect width=100% height=100% fill="blue"/></svg>`,
svg`<svg width="100" height="50"><rect width=100% height=100% fill="green"/></svg>`
], {valign: 0.5})
withBackground(
svg`<svg width="50" height="100"><ellipse cx=50% cy=50% rx=20 ry=45 stroke="lightblue" stroke-width="10"/></svg>`,
{ padding: 5 }
)
withLegend(
svg`<svg width="100" height="100"><rect width="100%" height="100%"/></svg>`,
"label px"
)
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.
