🏠 back to Observable

Beginner: overlaid, moveable images?


#1

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?


#2

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


#3

Hi Bryan, thanks for putting together the chess notebook.

I forked it and added responsive layout to the boards: https://beta.observablehq.com/@cw/hello-chess

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


#4

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!


#5

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


#6

@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…


#7

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