# Noob question: subway-map like visualization / animation

**URL:** <https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884>\
**Category:** Uncategorized\
**Created:** [June 15, 2018, 9:51am UTC](https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884 "2018-06-15T09:51:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![barto](https://avatars.discourse-cdn.com/v4/letter/b/e9c0ed/32.png) [@barto](https://talk.observablehq.com/u/barto)\
**Post date:** [June 15, 2018, 9:51am UTC](https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884/1 "2018-06-15T09:51:10Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 15, 2018, 1:26pm UTC](https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884/2 "2018-06-15T13:26:05Z")

</div>

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/](https://css-tricks.com/svg-line-animation-works/)

---

<div class="post-metadata">

**Author:** ![barto](https://avatars.discourse-cdn.com/v4/letter/b/e9c0ed/32.png) [@barto](https://talk.observablehq.com/u/barto)\
**Post date:** [June 15, 2018, 4:55pm UTC](https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884/3 "2018-06-15T16:55:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 15, 2018, 5:28pm UTC](https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884/4 "2018-06-15T17:28:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [June 18, 2018, 2:25pm UTC](https://talk.observablehq.com/t/noob-question-subway-map-like-visualization-animation/884/5 "2018-06-18T14:25:47Z")

</div>

Although I think this is not a good place for this question  
(I recommend slack’s [help](https://d3js.slack.com/messages/C07EVSL59/) channel for that)

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