WingNews logo WingNews
top | item 32647227

Show HN: Ubähnchen – Animated subway map of Berlin

278 points| Elzear | 3 years ago |xn--ubhnchen-1za.vercel.app

102 comments

order

rob74|3 years ago

Nice! Would be more realistic (and more Mini Metro-like) if the trains actually stopped at the stations though. Also, the trains don't have to disappear and reappear at the terminal stations, they could just stay there until they are scheduled to go back - after all, that's what they do in reality as well...

Any chance that the source could be made available ;) ?

ant6n|3 years ago

The solution with fade out / fade in is pretty clever. Short layovers will cross-fade automatically, but you don’t need complicated internal information about which train continues from one run to the next.

Stopping would be neat, but may also be visually messy.

pantalaimon|3 years ago

Strangely S-Bahn does stop at stations, U-Bahn does not.

Maybe a difference in the source data?

NeoTar|3 years ago

I really like it! Well done!

- As others have mentioned, it seems dodgy on Firefox. The button to switch between U-Bahn and S+U mode doesn't seem to work at all on Safari (?)

- Completely unreasonable request, but it would be cool if it were to show the current engineering works - i.e. the U1 not running, and the temporary U12 taking over the western U2 and U1

If anyone else is a urban railways geek, then may I introduce you to CartoMetro - https://cartometro.com/ - an amazingly detailed map of various (mostly French) urban rail systems (although sadly lacking Berlin!)

radiosnob|3 years ago

Very nice. Given the smoothness, I first thought this was real-time:) As someone who lives in Berlin, I didn't know there was an open API for the VBB. I'll have to have a look at it.

And loving the Minimetro vibes! (Running this on android 10 on a OnePlus 7pro - runs smooth in Chrome)

once_inc|3 years ago

I too thought for a moment that this was real-time until I noticed the absolutely frighting speed at which these trains would be passing through the tubes.

People waiting at a station would be sucked onto the tracks by the vortex created in the wake of a passing train. The front of the trains would probably be red hot with friction, while the passengers would be screaming until their train reached the end of the line, where it would pass out of existence, presumably into another dimension.

That is, until god slowed reality back down to 1x speed.

quantumduck|3 years ago

I don't know if VBB used this, but most transit agencies publish their data in two standard formats these days GTFS for static schedules and GTFS-real time for real-time data. Any application you build around these formats would immediately scale to pretty much every big city.

Google maps and Apple maps provide transit directions in their apps using GTFS and GTFS real time data (partly the reason why Apple maps was able to add transit directions feature so easily - Google had to deal with the transit agencies years before that and convinced them to publish data in open source standard formats).

YLE118|3 years ago

Agreed on the minimetro feel!

I thought it was live too, I wonder if there's a way to do that? I like that you can see both the s and u bahn, though I kind of wish the abstract map would carry over.

MBCook|3 years ago

Yeah the ridiculous speed confused me for a little bit before I saw the “x50“ up in the corner.

This is really great, and despite saying it’s desktop optimized it worked great on my iPhone.

Love it.

miniwark|3 years ago

The problem with Berlin is than there are many operators for public transport by train:

* U-Bahn, for the subways (underground & aerial)

* S-Bahn, for sub-urban lines (mostly aerial)

* Traway in est-Berlin

A map, live or not need at least to combine the U-Bahn and the S-Bahn, (and if possible the tramway too), because you generally need to use both networks (with the same ticket) to travel. Staying in only one of the network is just not practical.

derhuerst|3 years ago

It's such a shame that the official Tram network map [1] almost fits the U-Bahn/S-Bahn map [2], but not exactly.

My assumption is that, when BVG designed these, they had separate maps in mind already early in the process, because including all station names on a tiny printed map is not feasible. With those transparent maps at the trams' windows though, or especially with a digital zoomable map, this would be completely feasible.

According to a BVG email from a few years ago, there isn't even a machine-readable version of this map, which is why I hand-digitised it. [3] So sad because the creativeness of the internet combined with a "remixabe" [4] (or at least forkable) version would likely kick off cool projects!

If anyone wants to attempt merging them, please open an Issue in [5] to let me know!

PS: Do you know about the (experimental) BVG bus map? [6]

[1] https://www.bvg.de/dam/jcr:d45105f2-6752-4ec5-b882-893657205... [2] https://www.bvg.de/dam/jcr:60a89e3b-f88d-4d48-b8a6-98ab340ad... [3] https://github.com/derhuerst/bvg-topological-map/issues/7#is... [4] https://github.com/derhuerst/remix-bvg-map-frontend [5] https://github.com/derhuerst/bvg-topological-map [6] https://www.bvg.de/dam/jcr:ee4647c3-ce1e-4b0a-9546-b1848b85e...

jkukul|3 years ago

There's actually a button in the upper right corner to enable both S+U Bahn! Although the app gets a little sluggish for me when I enable them both.

floodle|3 years ago

When you say "operator": isn't it all BVG?

sccxy|3 years ago

Looks great!

If author wants some inspiration then this tokyo map is awesome:

https://github.com/nagix/mini-tokyo-3d

jansan|3 years ago

In the Shinjuku city hall many years ago there was an animation showing how population desitiy changes in Tokyo during one day. It was absolutely mindblowing, but I have never been able to find it online.

If someone happens to know where I can find this animation I would be really grateful.

Elzear|3 years ago

Thanks for sharing this! It will definitely be helpful, as I am considering updating my map to use WebGL.

codethief|3 years ago

Wow, it even includes weather (rain) and airplanes.

bugmen0t|3 years ago

Reminds me of the official live map "Livekarte" at https://www.vbb.de/fahrinfo/

probably_wrong|3 years ago

For those like me who just see a regular map, click on "Livekarte & Multi-Mobilität" on the right, then "Livekarte", and then "An".

Quanttek|3 years ago

Extremely slow for some reason in Firefox on Mac OS for me

jeroenhd|3 years ago

Same here. A profile suggests that most native time is spent rendering the backdrop shadow of the text rendered to the canvas, and most of the remaining CPU time is spent on the drawText Javascript call.

Looks like Mozilla has something to optimize!

runxel|3 years ago

Totally unusable in Firefox on Windows 10 as well.

janfoeh|3 years ago

Buses and subway positions for Hamburg: https://hvv.live

jarek83|3 years ago

I love it. I'm from Poland and lived for a while in Warsaw, where public transport also has all this kind of tracking, BUT the operator when asked about making this data available to travelers, he replied something like "Why would people need it? It's internal data and it will stay like that".

akie|3 years ago

It's super smooth on Chrome, but it's doing (say) 1 frame per second on Firefox.

artogahr|3 years ago

Same for me, even I set "layers.acceleration.force-enabled" to true. Chrome and Chromium are smooth.

EDIT: Turning "High Resolution" (in the settings of the webpage on top right) off and on seems to fix the issue somehow? It's smooth now, but reloading takes it back to choppy.

phil294|3 years ago

It's definitely a website bug, as goes from 1 FPS to smooth if you go to S+U and back to U again. (debugger didn't help, but it's all minified anyway)

y42|3 years ago

Not even 1 FPS on my Firefox and it's also eating CPU like nothing. Good thing: This kind of simulates the sound of the subway.

(Nevertheless: Beautiful!)

pindab0ter|3 years ago

On Safari the animations are smooth but mouse clicks are barely registered or only after a few seconds.

rob74|3 years ago

It's also smooth for me (also Chrome) in "U-Bahn only" mode, but when I switch to "U+S", it's noticeably less smooth (10 fps?). It gets better if you deactivate the "city map background" in the settings.

ale42|3 years ago

Works fine on Firefox for me

hk__2|3 years ago

Try clicking on the S+U on the right. In Chrome it’s super smooth on the U view, but somehow when you switch to the S+U one it’s very laggy.

jonas-w|3 years ago

With firefox on android, even though it says it isn't optimized, it runs perfectly smooth even in s+u mode

pantalaimon|3 years ago

It's getting choppy for me in Chrome when enabling the S and U Bahn mode

meinaccount00|3 years ago

Worth checking that Firefox is (also) using the GPU correctly.

threatripper|3 years ago

Same for me (FF103.0.2 on Ubuntu 22.04)

bambax|3 years ago

Smooth for me on FF (desktop).

philholden|3 years ago

I did something very similar to this in 2012:

http://philholden.me.uk/kraya/routemap/

I wanted to simply draw and SVG of the bus route map. The timetable had the lat long of stop positions. I was using d3 so having drawn the map it almost zero effort to animate the busses. It was just a standard transition with a delay and a duration.

hubraumhugo|3 years ago

Well executed side project with a great name! :) Where do you get the data from?

NeoTar|3 years ago

It's mentioned in the 'about' page (click the 'i' link) - https://news.ycombinator.com/reply?id=32647603&goto=item%3Fi...

> Schedules are extracted from the GTFS data of the VBB (loaded on Fri, 26 Aug 2022 13:11:26 GMT) which contains arrival time and departure time of every hour of every day. The movement of the train is simulated at constant speed between stations.

amaccuish|3 years ago

Nice, only thing is it's not currently accurate. The U1 and U2 have temporarily combined into the U12.

Elzear|3 years ago

Thanks for the comment! It made me realize I forgot to move a file. It's fixed now (you might need to clear your cache). And the live data toggle is now enabled.

fs111|3 years ago

This has exited forever for all parts of the VBB https://www.vbb.de/fahrinfo/ You can turn on individual forms (S-Bahn, U-Bahn, Bus, Ferries etc) of tranport on the right hand side menu.

bergenty|3 years ago

On a tangent, buying a ticket for a tourist is a real pain on the Berlin system. You have to know what a zone is, what specific station etc. would be great to have a standard fare like in NYC.

pushreply|3 years ago

so cool! nice work! maybe Munich is next? :)

fock|3 years ago

the S-Bahn there actually has a DB-provided live-map https://s-bahn-muenchen-live.de

I don't know, if they have an open API though (Google of course gets access. Which is......)

purecode|3 years ago

There is a real Berlin live map of subway, bus and railway at: https://www.vbb.de/fahrinfo/ by the operator.

Seems no english version available, you have to

  - click upper right corner "Livekarte"
  - click on the menu again "Livekarte"
  - select means of transport: radio buttons for subway, railway etc
  - zoom in to see subway

derhuerst|3 years ago

Note that this just interpolates the vehicles' positions based on their delay, which in turn is calculated based on periodic pings that the vehicle sends AFAIK. So the map does not show realtime positions in the same sense as e.g. HSL's trip planner does [1][2]. In fact, the location and speed of a vehicle can be very off.

Personally, I loathe this map, because it gives an impression of accurate data, even though it isn't that precise. VBB gets credit for providing supposedly reliable data, even though they could (and should, given amount of tax money spent) provide much better data!

[1] In the departures section on the left, tap on one of the upcoming departures to see the vehicle in realtime: https://reittiopas.hsl.fi/terminaalit/HSL%3A1000105?locale=e... [2] https://digitransit.fi/en/developers/apis/4-realtime-api/veh...

divan|3 years ago

What's the purpose of animation here?

It seems to have no information about actual train position, or am I missing something?

Closi|3 years ago

I think it is just a toy :)

But the trains are sort-of-actual positions based on the time in the top right hand corner and the latest estimated arrival times, but time is moving forwards at 50x speed.

Markoff|3 years ago

[deleted]

GekkePrutser|3 years ago

xn-- domains are fallback Unicode compatibility domains for systems that don't support it. It's mainly seen in Asia. So it's not the intended representation of the domain name, that's ubähnchen.vercel.app

I think ubähnchen means little U-bahn.

It's interesting to see Germans are still very strict with their letter accents even in domain names. I'm from the Netherlands myself and because we mainly use US keyboards (there is a NL type but nobody uses it), accents are a PITA to type so people started leaving them out. These days they're almost extinct, as is the ligature for "ij". We're pretty pragmatic like that. Personally I wouldn't even care if we phase Dutch out for English, it's just much more useful on a global scale. But that's probably a step too far for most.

hk__2|3 years ago

> Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something.

Elzear|3 years ago

The link I posted was https://ubahnchen.vercel.app but, because there is a redirection, HackerNews changed it automatically.

You can also memorize ubaehnchen.vercel.app

numpad0|3 years ago

That’s punycode encoding, defined in RFC3492(2003) but not getting much traction since.

detaro|3 years ago

ubähnchen.vercel.app seems quite memorable