{"id":21864,"date":"2021-01-29T14:36:44","date_gmt":"2021-01-29T19:36:44","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=21864"},"modified":"2021-02-03T13:57:41","modified_gmt":"2021-02-03T18:57:41","slug":"the-evolution-of-new-york-citys-subway-map","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/the-evolution-of-new-york-citys-subway-map\/","title":{"rendered":"The Evolution of New York City’s Subway Map"},"content":{"rendered":"\n

Stepping down into an NYC subway station for the first time can be a disorienting experience. How do New Yorkers successfully get from Point A to Point B without consulting employees of the Metropolitan Transit Authority every step of the way? <\/p>\n\n\n\n

The NYC subway map has gone through several transformations to attempt to successfully visualize vital information through modern aesthetics. The goal has always been to provide valuable insights into routes, stops, and transfers. Though it can be occasionally difficult to hunt for a specific station name among the almost 500 current stations, the modern-day map has made quite a few improvements under the hood allowing New Yorkers and tourists to (mostly<\/em>) confidently head in the right direction. <\/p>\n\n\n\n

Materials<\/h2>\n\n\n\n

TimelineJS<\/a>, an open-sourced tool created by Knight Lab<\/a>, was used to construct the timeline visualization. TimelineJS uses G<\/a>o<\/a>ogle Sheets<\/a> to pull in customizable information. Data including dates and photos were sourced from the official site of the MTA<\/a>, NYC Subway<\/a>, and Curbed<\/a> and fed into Google Sheets to produce the final product.<\/p>\n\n\n\n

Methods<\/h2>\n\n\n\n
\"\"<\/a>
Screenshot of the final TimelineJS visualization.<\/figcaption><\/figure>\n\n\n\n

Taking a step back to the original map is a bizarre experience- in contrast to the current 27 subway lines under the MTA alone, the original 1920s visualizations include the routes of three separate transit companies, each with their own separate maps. I wanted to present the evolution in chronological order to demonstrate the impact of the merger, as well as specific major influencers and their re-designs.<\/p>\n\n\n\n

While there are dozens of varieties of maps available featuring subtle changes throughout history, I chose to focus on the maps that represented significant re-designs that impacted users’ experience dramatically. Presenting them chronologically provided a logical arrangement allowing the user to dramatically compare their current mental model of the map to the original maps of the 1920s. In researching the topic and figuring out the best method to do this, there were several visualizations that caught my eye.<\/p>\n\n\n\n

\"\"<\/a>
The interactive New York Times visualization.<\/figcaption><\/figure><\/div>\n\n\n\n

The New York Times timeline (above) was very visually dynamic. Each slide zooms in over 5x and takes the user on a dizzying experience gliding through a route, and presenting the user with a historical fact. However, only the modern-day map was pictured, and the map improvements throughout time were explained, but not shown.<\/p>\n\n\n\n

From this, I learned that I wanted to present only the most interesting facts to provide the most entertaining experience without interactivity. However, I also wanted to ensure the historical maps were pictured.<\/p>\n\n\n\n

In Google Sheets<\/a>, I began my timeline with a title page and included 6 slides that brought the user from 1924 to today’s map. I chose to input historical significance in each description to provide context and create a deeper connection with the reader.<\/p>\n\n\n\n

\"This<\/figure>\n\n\n\n
\"\"
Without the map set as the background (above), the colors, text, and font would be impossible to visualize.<\/figcaption><\/figure><\/div>\n\n\n\n

While I originally kept the background of each slide white, I realized there were details that would be difficult to pick up on without a closer image. To resolve this, I added the URL of each slide photo to the background as well. My intention was to allow the user to pick up on the nuances of change.<\/p>\n\n\n\n

Additionally, rather than place each slide on the date the map was introduced, I chose to expand the date until the beginning of the next evolution, as demonstrated below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This would help the user understand that this map replaced the previous one, rather than introduced as a supplementary option.<\/p>\n\n\n\n

Reflection<\/h2>\n\n\n\n

While concrete maps were the center of this research, it would be worth integrating the evolution of the mobile experience of maps as well. New information such as real-time arrivals, announcements, and changes in service are constantly updated and widely available in the digital versions found on the official MTA app and third-party applications. Many stations also feature a touchscreen display featuring similar map information but delivered on a large-scale. <\/p>\n\n\n\n

I also came across speculative designs for future iterations. It would be interesting to add these as future cards on the timeline to demonstrate possibilities for users; the current MTA map will certainly evolve before we know it.<\/p>\n\n\n\n

The final timeline can be experienced here<\/a>.<\/h2>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Stepping down into an NYC subway station for the first time can be a disorienting experience. How do New Yorkers successfully get from Point A to Point B without consulting employees of the Metropolitan Transit Authority every step of the way? The NYC subway map has gone through several transformations to attempt to successfully visualize…<\/p>\n","protected":false},"author":1996,"featured_media":0,"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":[149,339],"tags":[441],"coauthors":[1058],"class_list":["post-21864","post","type-post","status-publish","format-standard","hentry","category-labs","category-timelines","tag-timeline-2"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-5GE","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/21864","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\/1996"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=21864"}],"version-history":[{"count":14,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/21864\/revisions"}],"predecessor-version":[{"id":21962,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/21864\/revisions\/21962"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=21864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=21864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=21864"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=21864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}