The avatar for @redblobgames
Amit Patel
I work on explorable explanations, gamedev tutorials, and gamedev tools.
Published
Edited
Aug 24, 2021
6 stars
Insert cell
Insert cell
md`## Demo: all tiles within some distance`
Insert cell
makeGrid((tile, i) => (tile.distance === 0? "center" : tile.distance < distanceLimit ? "explored" : ""));
Insert cell
Insert cell
md`## Demo: tiles in distance order`
Insert cell
makeGrid((tile, i) => (tile.distance === 0? "center" : i < stepLimit ? "explored" : ""));
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<h2>CSS</h2><style>
svg { max-width: 20em; }
.cell { fill: hsl(60, 10%, 90%); stroke: white; stroke-width: 0.02px; }
.explored { fill: hsl(45, 20%, 70%); }
.center { fill: hsl(220, 50%, 70%); }
</style>
`
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