<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	     xmlns:dc="http://purl.org/dc/elements/1.1/"
	   xmlns:atom="http://www.w3.org/2005/Atom"
	     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>tube &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/tag/tube/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Fri, 14 Feb 2025 08:51:16 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>tube &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[Force Directed Graph of the London Tube Map - including CrossRail!]]></title>
		<link>https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/</link>
					<comments>https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Sun, 14 Feb 2021 12:30:13 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[map]]></category>
		<category><![CDATA[Open Data]]></category>
		<category><![CDATA[tfl]]></category>
		<category><![CDATA[tube]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=38123</guid>

					<description><![CDATA[Force Directed Graphs of the London Underground have been done many times before - but I think I&#039;m the first person to add the new Elizabeth Line (CrossRail).  I&#039;ve also created a JSON graph of all of London&#039;s rail services - including DLR, Trams, C2C, ThamesLink etc.  Demo     Play with it yourself Grab the code from GitLab I&#039;ve also created a version with every London station and train line.  …]]></description>
										<content:encoded><![CDATA[<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&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2021/02/force-directed-graph-of-the-london-tube-map-including-crossrail/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
