https://shkspr.mobi/blog Regular nonsense about tech and its effects 🙃 Fri, 14 Feb 2025 08:51:16 +0000 en-GB © Terence Eden. 🄯 CC BY-SA. See https://shkspr.mobi/blog/copyright-and-copyleft/ hourly 1 https://wordpress.org/?v=7.1.3 https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg https://shkspr.mobi/blog 32 32 https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/ https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/#comments Sun, 14 Feb 2021 12:30:13 +0000 https://shkspr.mobi/blog/?p=38123 <p>Force Directed Graphs of the London Underground have been done many times before - but I think I'm the first person to add the new Elizabeth Line (CrossRail).</p> <p>I've also created <a href="https://gitlab.com/edent/force-directed-london-tube-map/-/blob/master/TfL%20Graph.json">a JSON graph of all of London's rail services</a> - including DLR, Trams, C2C, ThamesLink etc.</p> <h2 id="demo"><a href="https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/#demo">Demo</a></h2> <iframe title="Force Directed Graph of London Underground - including CrossRail - using D3." width="620" height="349" src="https://www.youtube.com/embed/gclRxDKlCEY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe> <ul> <li><a href="https://edent.gitlab.io/force-directed-london-tube-map/force.html">Play with it yourself</a></li> <li><a href="https://gitlab.com/edent/force-directed-london-tube-map/">Grab the code from GitLab</a></li> <li>I've also created a version with <a href="https://edent.gitlab.io/force-directed-london-tube-map/full.html"><em>every</em> London station and train line</a>.</li> </ul> <h2 id="limitations"><a href="https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/#limitations">Limitations</a></h2> <ul> <li>This is a quick weekend hack - don't expect polished code or performance!</li> <li>"Overlapping" lines don't show. So where a route is served by multiple lines, you'll only see one of them.</li> <li>Zoom is a bit shonky.</li> <li>Relies on an older version of D3 (V5).</li> </ul> <h2 id="background"><a href="https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/#background">Background</a></h2> <p>Drawing the Tube map as a graph is a popular pastime. See these prior arts:</p> <ul> <li>"<a href="http://blogs.casa.ucl.ac.uk/2011/09/01/force-directed-graph-of-tube-lines/">Force-directed graph of tube lines</a>" by Martin Zaltz Austwick (2011)</li> <li>"<a href="https://www.researchgate.net/figure/The-London-Underground-map-with-a-focus-on-Green-Park-created-using-the-method-described_fig2_320371151">Graph Drawing by Weighted Constraint Relaxation</a>" (2017)</li> <li>"<a href="https://www.linkedin.com/pulse/what-would-london-tube-map-look-like-data-scientist-designed-mcnulty/">What would the London Tube Map look like if Data Scientists designed it?</a>" by Keith McNulty (2018)</li> <li>"<a href="https://neo4j.com/blog/going-underground-graphing-pathfinding-london-tube-lines/">Going Underground: Graphing and Pathfinding London Tube Lines</a>" by Joe Depeau (2019)</li> <li>And many others.</li> </ul> <p>I forked some code from <a href="https://gist.github.com/mapio/53fed7d84cd1812d6a6639ed7aa83868">Massimo Santini</a>.</p> <p>Chris Bell maintains an excellent <a href="https://www.doogal.co.uk/london_stations.php">CSV of all London stations and their connections</a></p> <p>The official colours for each line can be found in <a href="https://web.archive.org/web/20210214123302/https://content.tfl.gov.uk/tfl-colour-standards-issue04.pdf">TfL's colour branding guide</a> and in hex versions at <a href="https://oobrien.com/2012/01/tube-colours/">Oliver O'Brien's site</a>.</p> <h2 id="whats-next"><a href="https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/#whats-next">What's next</a></h2> <p>Possible ideas - feel free to <a href="https://gitlab.com/edent/force-directed-london-tube-map/">contribute on GitLab</a>.</p> <ul> <li>Experiment with different layout algorithms.</li> <li>Weight links according to speed, distance, business, or some other metric.</li> <li>Better colour options for non-TfL lines.</li> <li>More efficient code.</li> </ul> <img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=38123&amp;HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager"> https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/feed/ 4