Noob question: subway-map like visualization / animation

Hi there,

unfortunately, I am an absolute beginner with JS, D3 etc.

I’d like to visualize data with an animation that displays a subway map, similar to http://memoryunderground.com/

What would be the best way to approach this?

Are there any ready-made libraries, code snippets that already do something similar on Obersvable?

Thank you very much,
Bart

Personally I’m not aware of any libraries that do the heavy lifting for you.

As for the line animation, you can use the CSS properties stroke-dasharray and stroke-dashoffset. A more in-depth explanation can be found at https://css-tricks.com/svg-line-animation-works/

1 Like

thanks for the link!

I am also looking for a way to include and visualize what choices a user makes on the site (like which buttons they click), and have that visualized at the end.

Since you already seem to have a picture in your head of what you’re trying to create, perhaps you can outline your concept (e.g. what a user should see, what interactions they can make etc). That way we can focus on individual problems and questions.

Please also keep in mind that there are limits to what can be achieved (in a sensible way) in Observable. A good approach might be to focus on individual problems and prototype or explore them separately in their own notebooks. Once you feel confident that you’ve understood and solved them, you can try to bring them back together in one “final” notebook.

1 Like

Although I think this is not a good place for this question
(I recommend slack’s help channel for that)

I think this block by John Walley will help you - https://bl.ocks.org/bumbeishvili/faeb74dab69b6d8d18e68fe1f4dbf72b

1 Like