I’m new to Observable and would like to use it to make embedded interactive explanations for my blog.
Two use cases:
I would like to show a piece of hardware with a ton of buttons on it, and let a user toggle through different overlays to show what different buttons do depending on which function buttons they hold down.
I would like to show how the potential moves of chess pieces interact with each other on a board. This would require a static chess board with user-moveable chess pieces on it, which have a trail of potential moves attached to them which stop when they reach the edge of the board. For example, the tower would be a plus-shape that would extend to both edges, with the tower in the middle.
Question: Are the above scenarios possible in Observable, and if so, are there related libraries and/or examples I should look at?
Your first use case is certainly possible; my instinct would be to try to use the d3 library to achieve what you want (but maybe that’s just because I’ve been learning that recently…). It’s a bit hard to say more without knowing exactly what you want, but you may want to look at some of the “featured collections” on this site for inspiration https://beta.observablehq.com/@observablehq?tab=collections.
The second one should also be possible via the use of the chess.js and chessboard.js libraries. Just for you, I put together a demonstration notebook (the highlight example at the end may be most relevant):
Thanks for the credit, Bryan. I noticed the fork brought over an extra blank max-width attribute. Seems like chrome canary on my phone has some input quirks. Makes edits a bit tricky but not having to be attached to a desktop is fantastic!
It makes me want to combine it with your previous notebook loading data from a Google Sheet — to make some sort of format where you can easily write a spreadsheet to generate a notebook with nicely-formatted, blow-by-blow commentary for a given chess game…
