Beginner: overlaid, moveable images?

I’m new to Observable and would like to use it to make embedded interactive explanations for my blog.

Two use cases:

  1. 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.

  2. 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

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):


Hi Bryan, thanks for putting together the chess notebook.

I forked it and added responsive layout to the boards:

Feel free to merge it into yours and I’ll delete the fork. :+1:

1 Like

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!

1 Like

Thanks Christian! I think I’ve corrected the extra attribute just now too. Feel free to let me know if you see anything else.

@bgchen — This is great stuff.

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…


Thanks so much guys! This is a wonderful starting point for me!