{"id":6473,"date":"2017-05-31T16:17:12","date_gmt":"2017-05-31T20:17:12","guid":{"rendered":"http:\/\/research.prattsils.org\/?p=6473"},"modified":"2017-05-31T16:17:12","modified_gmt":"2017-05-31T20:17:12","slug":"maps-london-underground","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/maps-london-underground\/","title":{"rendered":"Maps of the London Underground"},"content":{"rendered":"<p>This <a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1tsvQq79TpkVvUvectWoTvqEpcWA8Zx_hD-YnbHBTtc4&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650\" target=\"_blank\" rel=\"noopener noreferrer\">project<\/a> explored the development of the London Underground Map designs over the course of the twentieth and twenty-first centuries. The current London Underground Map is a schematic design that relies on color, linear and geometric forms to signify the city\u2019s complex transit network, rather than strictly follow London\u2019s geographic plan. As a result, an individual can navigate the London Underground network by just knowing the start point of their journey, where they have to change lines, and their destination. As the London Underground Map design relies on perception and cognition of its visual information to denote meaning, the development of the map\u2019s designs makes this an optimal subject to explore and visually examine over a period of time.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.bbc.co.uk\/london\/travel\/downloads\/tube_map.gif\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium aligncenter\" src=\"https:\/\/i0.wp.com\/www.bbc.co.uk\/london\/travel\/downloads\/tube_map.gif?resize=840%2C561\" width=\"840\" height=\"561\" \/><\/a><\/p>\n<p>TimelineJS was used to build a visually rich and interactive timeline of the London Underground Map designs from its inception to today. As seen within examples featured on the TimelineJS website, this timeline software would allow for the visual changes within the maps designs to be easily visualized and identified by viewers. In addition, the natural progression of these timelines allows both visual and textual information to convey its narrative. Therefore, the development of the London Underground Map designs was an ideal concept to express through TimelineJS.<\/p>\n<p>&nbsp;<\/p>\n<p>The initial data used within this lab was found within the interactive timeline, <em>Milestones in the history of thematic cartography, statistical graphics, and data visualization <\/em>(2001). Henry Beck\u2019s re-design of the London Underground Map in 1933 was the first data point within my dataset.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/tube33.gif\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-6490 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/tube33-620x435.gif?resize=468%2C328\" alt=\"\" width=\"468\" height=\"328\" \/><\/a><\/p>\n<p>From there I researched the history of the London Underground and its Maps, selecting a variety of data points that collectively would narrate the development of the Underground Map before and after Beck\u2019s significant re-design. Each of these points were curated within the TimelineJS Google spreadsheet, which would be generated into my timeline.<\/p>\n<p>&nbsp;<\/p>\n<p>My first steps with creating this visualization directed my attention towards acquiring all of the data needed. I was initially less centered on the design of the timeline and more on its content. Once I acquired and determined the specific points that would be featured in this visualization, I then focused on its design. As the strengths of a timeline are its visual narrative, my timeline design highlights the visual information collected, such as images of various maps at different periods in time, and a documentary . By following methods discussed in class as well as within MacDonald\u2019s text, \u201cUsing Color Effectively in Computer Graphics\u201d, my timeline highlighted the colors and details within the various visual media of London Underground Maps through the application of a gray background-color. In addition, as this timeline intended to visually compare London Underground Maps throughout the twentieth and twenty-first centuries, it was important to ensure that a similar viewpoint or perspective of the London Underground Maps were used consistently throughout each point along the timeline.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.44.41-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-6491 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.44.41-PM-620x298.png?resize=620%2C298\" alt=\"\" width=\"620\" height=\"298\" \/><\/a><\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.46.54-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-6493 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.46.54-PM-620x294.png?resize=620%2C294\" alt=\"\" width=\"620\" height=\"294\" \/><\/a><\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.47.07-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-6495 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.47.07-PM-620x293.png?resize=620%2C293\" alt=\"\" width=\"620\" height=\"293\" \/><\/a><\/p>\n<p>The main visualization in which deviated from my visual information system was the point at which Henry Beck re-designed the tube map in 1933. At this particular point, I chose to instead include a video clip I had cut from a BBC documentary film, &#8220;Secrets of Underground London&#8221; (re-aired March, 2017), that briefly but clearly discusses the development of this modern transit map design. As I had determined through my research of the History of the London Underground Map designs, Beck\u2019s re-design of the tube map was such a groundbreaking creation that I decided to visually represent it differently from the other points along my timeline.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.54.26-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-6498 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.54.26-PM-620x315.png?resize=453%2C274\" alt=\"\" width=\"453\" height=\"274\" \/><\/a><\/p>\n<p>As the TimelineJS Google spreadsheet was restrictive in its design features and types of acceptable media, I had difficulty throughout the creation of this timeline visualization including all of the visual information I acquired. This can be seen within the below visualization, which represents the minor changes and evolution of Beck\u2019s tube designs over the course of 30 years. I had originally intended to include images from three different map designs Beck produced throughout this period of time, each highlight a slight change in the map\u2019s design. But I was unable to attain the desired visual effect I intended. Therefore, in the style in which I had created the other visualization points within this timeline, I chose to create a simple and minimalistic point.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.54.54-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-6499 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-2.54.54-PM-620x315.png?resize=620%2C315\" alt=\"\" width=\"620\" height=\"315\" \/><\/a><\/p>\n<p>When viewed in its entirety, this timeline of the development of the London Underground Map designs throughout the twentieth and twenty-first centuries clearly informs that as the city\u2019s transit networks expanded and became more complex and interconnected over time, the map designs simultaneously became simpler. Geographic accuracy was less important than its comprehension and function. It is clear that since Beck\u2019s re-design, the tube map has been designed according to concepts of cognition and visual perception.<\/p>\n<p>&nbsp;<\/p>\n<p>If I were to move forward with this project, I think it would be interesting to explore another aspect which I had not expected to be important to this topic or detectable within this initial project \u2013 the development of London underground\u2019s network size<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignright\" src=\"https:\/\/i0.wp.com\/www.bbc.co.uk\/london\/travel\/downloads\/tube_map.gif?resize=261%2C175\" width=\"261\" height=\"175\" \/><\/p>\n<p><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/1908.jpeg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-6500 alignleft\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/1908-620x495.jpeg?resize=219%2C175\" alt=\"\" width=\"219\" height=\"175\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>1908 Underground Map (left); 2017 Underground Map (right)<\/p>\n<p>As seen within the visualization points within this timeline, there is a clear correlation between the development of the tube map and the transit network size. Using the &#8220;Group&#8221; feature in the TimelineJS, I would juxtapose these two datasets within this future project.<\/p>\n<p>[iframe src=&#8221;https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1tsvQq79TpkVvUvectWoTvqEpcWA8Zx_hD-YnbHBTtc4&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650&#8243; width=&#8221;100%&#8221; height=&#8221;650&#8243;]<\/p>\n<p>Sources:<\/p>\n<p><em>The London Tube Map Archive<\/em> (2002). http:\/\/www.clarksbury.com\/cdl\/maps.html<\/p>\n<p>Graham-Smith, D. (2016). &#8220;The History of the Tube Map.&#8221; <em>The Londonist. http:\/\/londonist.com\/2016\/05\/the-history-of-the-tube-map<\/em><\/p>\n<p><em>Historical London Underground Maps (2005). http:\/\/www.geocities.ws\/lhsoicher\/undergroundmaps.html<\/em><\/p>\n<p><em>The London Transport Museum. https:\/\/www.ltmuseum.co.uk<\/em><\/p>\n<p>York, C. (2016). &#8220;London Underground Maps Show Evolution of The Tube Over The Last 153 Years.&#8221; <em>The Huffingtonpost<\/em>. http:\/\/www.huffingtonpost.co.uk\/2016\/02\/24\/london-underground-maps-s_n_9305458.html<\/p>\n<p>BBC.com (2013). &#8220;Tube 150th anniversary: How the Underground map evolved.&#8221; <em>BBC <\/em>online. http:\/\/www.bbc.com\/news\/uk-england-london-20943525<\/p>\n<p>Wikipedia. &#8220;Tube Map&#8221;. https:\/\/en.wikipedia.org\/wiki\/Tube_map<\/p>\n<p>Wikipedia. &#8220;History of the London Underground.&#8221; https:\/\/en.wikipedia.org\/wiki\/History_of_the_London_Underground<\/p>\n<p>Friendly, M. &amp; Denis, D. J. (2001). <em>Milestones in the history of thematic cartography, statistical graphics, and data visualization.<\/em> Web document, <tt>http:\/\/www.datavis.ca\/milestones\/<\/tt><\/p>\n<p>MacDonald, L. W. (1999). &#8220;Using Color Effectively in Computer Graphics&#8221; <em>Computer Graphics and APplications, IEEE 19(4): 20-35.<\/em><\/p>\n<p>BBC [Documentary Film] (re-aired March, 2017) &#8220;Secrets of Underground London&#8221;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This project explored the development of the London Underground Map designs over the course of the twentieth and twenty-first centuries. The current London Underground Map is a schematic design that relies on color, linear and geometric forms to signify the city\u2019s complex transit network, rather than strictly follow London\u2019s geographic plan. As a result, an&hellip;<\/p>\n","protected":false},"author":282,"featured_media":6490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"coauthors":[],"class_list":["post-6473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visualization"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-1Gp","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/6473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/users\/282"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=6473"}],"version-history":[{"count":0,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/6473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=6473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=6473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=6473"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=6473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}