Hong Kong MTR Map vs Real Geography
Branch: master
Clone or download
Latest commit c7de20b Sep 19, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add Code Sep 19, 2017
js
HK.gif
README.md
SVG.svg
calibrate_draft_projection.js Add Code Sep 19, 2017
calibrate_real.js Add Code Sep 19, 2017
d3.v4.js Add Code Sep 19, 2017
editor.html
editor.js
editor.png Update README Sep 19, 2017
hk.html Add Code Sep 19, 2017
hk.js
hk2.gif
index2.html Add Code Sep 19, 2017
index3.html Add Code Sep 19, 2017
index_old.html Add Code Sep 19, 2017
kute_test.html Add Code Sep 19, 2017
lines.csv Add Code Sep 19, 2017
main.js
map.png
mtr.jpg Add Code Sep 19, 2017
old.html Add Code Sep 19, 2017
paths.csv
paths_full.csv.xlsx Add Code Sep 19, 2017
paths_old.csv
render.png Update README Sep 19, 2017
stations.csv Add Code Sep 19, 2017
style.css Add Code Sep 19, 2017

README.md

Hong Kong MTR Map vs Real Geography

Posted on Reddit:

After the amazing work on Berlin and Paris metros from u/vinnivinnivinni and u/hflake, I decided to create mine. Javascript based, D3 + some homemade morphing functions, on top of KUTE.js for the islands. Data for the true map from the SVG available on Wikipedia and manually for the stations and the MTR projected map

Output: (click for the animation)

PicSciP Demo Video

~200k views so far

Code

Not the best code ever written for sure, but it was a one shot project, and I learnt so much on the way.

Run a local server
python -m http.server 8000

Visit localhost:8000/hk.html for the final animation, all the other files in the repo are tools to create the animation.

I started with the SVG of Hong Kong MTR system (with real coordinates) from wikipedia, extracted key information (paths) and built a matching tool for the HK MTR plan available in station, generating the first stations.csv. To math SVG path with available paths open localhost:8000/editor.html and modify editor.js, it has a bunch of interesting functions:

  • Auto Assign: Find the closest point for lines given real/plan stations coordinates
  • Reassign what we can: Generate straight lines between points
  • Change C in the middle: Reposition C of Bezier curves to be in the center of two points (red points between two blue dots)
  • Transition: Animate it all
  • Export is made by logging.

alt src

Previous versions

alt src

alt src

Press

As seen in BT and The Guardian.