{"id":9630,"date":"2018-07-02T19:06:42","date_gmt":"2018-07-02T23:06:42","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=9630"},"modified":"2019-01-11T00:19:52","modified_gmt":"2019-01-11T05:19:52","slug":"contemporary-history-of-nyc-from-2007-to-2017-a-timelinejs-visualization","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/contemporary-history-of-nyc-from-2007-to-2017-a-timelinejs-visualization\/","title":{"rendered":"A Timeline of New York City’s Contemporary History from 2007 to 2017"},"content":{"rendered":"

Introduction to Timelines<\/h2>\n

Creating a timeline involves listing a series of events from beginning to end. Given the desire to learn more about my new home, I became interested in representing significant events in the recent, contemporary history of NYC.\u00a0<\/span>As a new resident to New York City, it\u2019s important for me to find and establish reference points in my surroundings. Besides fighting the learning curve with getting to know how to get around, there are other means of connecting to the spirit of the city. New York City is rich by many means, especially in its vast history.<\/span><\/p>\n

Specifically, events progress between the years of 2007 and the end of 2017. They correlate between significant topics like financial, architectural, environmental and sports events. The information is also supplemented with the annual population based on New York City Census population data.<\/span><\/p>\n

Methodology & Materials<\/h2>\n

Naturally, my internet search gave way to a list of contemporary events on Wikipedia. That timeline dates back to the 1500s and is an ongoing list. For the purpose of this timeline, I searched the contemporary list<\/a>. I gathered notes on dates, links to references and summaries of the events. References provided information like specific dates and interesting tidbits. <\/span><\/p>\n

Wikimedia Commons<\/a> provides plenty of images under a long list of NYC-based categories. I gathered two dozen images to use for the backgrounds of 24 slides. After gathering information and materials, the collected data was analyzed and edited using a text editor. <\/span><\/p>\n

The decision to use TimelineJS<\/a>\u2014a story-telling tool by Northwestern University’s Knight Lab<\/a>\u2014to present a timeline with visual and interactive elements was clear, due to the flexibility in working with an established template to manipulate images and copy. The spreadsheet template provided by TimelineJS as a download to Google Drive is intuitive when it comes to finding corresponding fields with what displays when you preview the timeline. Data pertaining to population was labeled as era<\/em>, to create the additional navigation element. After entering all the information into the corresponding fields of the Google Sheets template<\/a>, the timeline was published, then previewed for review. Once it\u2019s published, any changes are reflected, as long as the page with the timeline is refreshed.<\/span><\/p>\n

\"Google

Google Sheets template for TimelineJS<\/p><\/div>\n

Results<\/h2>\n

Pre-attentive attributes of \u201cform, color, position, and motion can be used to display abstract data in ways that are rapidly perceptible and easily graspable\u201d (Few, 2009). In this case the interactive timeline is an exploration of visual and typographical tactics to allow readers to easily and enjoyably perceive the events in an easy-to-digest manner. The timeline created on Timeline.JS based on contemporary events in NYC is successful in creating and impactful story.<\/span><\/p>\n

\"Screen

Screen shots of several slides from the timeline.<\/p><\/div>\n

\"Screen

Screen shots of several slides from the timeline.<\/p><\/div>\n

\"Screen

Screen shots of several slides from the timeline.<\/p><\/div>\n

\"Screen

Screen shots of several slides from the timeline.<\/p><\/div>\n

The embedded timeline:<\/span><\/p>\n

[iframe src=’https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=13rkKJv9cVKxjuRjgdt3qxWKo7VEkGlEQNHmWZFuTdFo&font=Default&lang=en&initial_zoom=2&height=650′ width=’100%’ height=’650′ webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder=’0′][\/iframe]<\/span><\/p>\n

Click this link, to be directed to the timeline:<\/span><\/p>\n

https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/contemporary-history-of-nyc-2007-2017<\/a><\/span><\/p>\n

Future Directions<\/h2>\n

Since the audience for this particular narrative is not specific, the plotted values ranged in topics. If an initial test was performed by tasking actors to perform several exercises, it would be interesting to note their responses, criticism of the interface and content, as well as the visual design implementations. For example, one can only imagine that sports fans would see it as both educational and entertainment tools-in-one, but perhaps they would want to use particular images, colors, and fonts. On the other hand, someone interested in the architecture of high-rise structures would require quantifiable statistics about buildings. <\/span><\/p>\n

Timeline.JS also allows for users to modify the background (whether it\u2019s an image or color) and to choose from a small set of paired fonts. It is unfortunate that one cannot sync more fonts from TypeKit or Google Fonts, nor does one have control of diminishing the shadow effect on the text.\u00a0<\/span><\/p>\n

Further, Timeline.JS should explore introducing a y-axis to present information on a second variable to display time-series patterns like trend, rate of change, and cycles (Few, 2009). The presentation of time is exceptional, and so it would be a significant scientific, operational and managerial tool, if values to analyze that time were introduced.<\/span><\/p>\n

References<\/span><\/h3>\n

Barone, V. (2017, January 03). Second Avenue subway’s New Year’s Day opening drew 48,200. Retrieved July 1, 2018, from https:\/\/www.amny.com\/transit\/second-avenue-subway-draws-thousands-of-riders-for-new-year-s-day-opening-1.12842779<\/span><\/p>\n

BBC. (2013, June 28). News Corp officially splits in two. Retrieved July 1, 2018, from https:\/\/www.bbc.com\/news\/business-23104822<\/span><\/p>\n

Brooks, M., Meserve, J., & Ahlers, M. (2009, January 15). Airplane crash-lands into Hudson River; all aboard reported safe. Retrieved June 28, 2018, from http:\/\/www.cnn.com\/2009\/US\/01\/15\/new.york.plane.crash\/index.html<\/span><\/p>\n

Cook, L. (2018, June 12). 13 tallest skyscrapers in the city. Retrieved June 28, 2018, from https:\/\/www.amny.com\/real-estate\/tallest-buildings-in-nyc-1.9216740<\/span><\/p>\n

Council on Tall Buildings and Urban Habitat (CTBUH). (2018). New York Times Tower. Retrieved from http:\/\/www.skyscrapercenter.com\/building\/new-york-times-tower\/423<\/span><\/p>\n

Cotter, H., & Smith, R. (2015, December 09). The Best in Art of 2015. Retrieved July 1, 2018, from https:\/\/www.nytimes.com\/interactive\/2015\/12\/09\/arts\/design\/best-art-2015.html?ref=arts&_r=0<\/span><\/p>\n

Davis, N. (2018, January 26). Was Super Bowl LI best of all time? Ranking every game. Retrieved June 28, 2018, from https:\/\/www.usatoday.com\/story\/sports\/nfl\/2018\/01\/24\/ranking-ever-super-bowl-game-li-patriots-tom-brady\/1061541001\/<\/span><\/p>\n

Dunlap, D. W. (2017, April 27). 3 New Bridges Rise in New York, With Looks That Could Stop Traffic. Retrieved July 1, 2018, from https:\/\/www.nytimes.com\/2017\/04\/27\/nyregion\/3-new-bridges-rise-in-new-york-with-looks-that-could-stop-traffic.html<\/span><\/p>\n

Few, S. (2009).\u00a0Now you see it: Simple visualization techniques for quantative analysis. Oakland, CA: Analytics Press.<\/span><\/p>\n

Frank, R., Efrati, A., Lucchetti, A., & Bray, C. (2009, March 14). Madoff Jailed After Admitting Epic Scam. Retrieved June 28, 2018, from https:\/\/www.wsj.com\/articles\/SB123685693449906551<\/span><\/p>\n

Isaac, M., & Gelles, D. (2017, December 21). Kickstarter Focuses Its Mission on Altruism Over Profit. Retrieved June 29, 2018, from https:\/\/www.nytimes.com\/2015\/09\/21\/technology\/kickstarters-altruistic-vision-profits-as-the-means-not-the-mission.html<\/span><\/span><\/p>\n

Kaplan, M. (2013, July 29). The Man Behind Humans of New York: Brandon Stanton. Retrieved June 30, 2018, from https:\/\/www.americanphotomag.com\/man-behind-humans-new-york-brandon-stanton<\/span><\/p>\n

Kickstarter, PBC. (2018, June 30). Stats. Retrieved June 30, 2018, from https:\/\/www.kickstarter.com\/help\/stats?ref=press<\/span><\/p>\n

Leland, J., & Nir, S. M. (2017, August 22). After 62 Years and Many Battles, Village Voice Will End Print Publication. Retrieved July 1, 2018, from https:\/\/www.nytimes.com\/2017\/08\/22\/nyregion\/village-voice-to-end-print-publication.html<\/span><\/p>\n

Maske, M. (2012, February 05). Super Bowl 2012: Giants beat Patriots 21-17 in a heartstopping repeat of 2008 title game. Retrieved July 1, 2018, from https:\/\/www.washingtonpost.com\/sports\/redskins\/super-bowl-2012-giants-beat-patriots-21-17-in-a-heartstopping-repeat-of-2008-title-game\/2012\/02\/02\/gIQAmfAssQ_story.html?noredirect=on&utm_term=.1a11c4177ae2<\/span><\/p>\n

Melvyn Dubofsky (2013).\u00a0The Oxford Encyclopedia of American Business, Labor, and Economic History. Oxford University Press. pp.\u00a0470\u2013.\u00a0ISBN\u00a0978-0-19-973881-6.<\/span><\/p>\n

MLB Advanced Media, LP. (2018). Championship 2009. Retrieved June 30, 2018, from http:\/\/mlb.mlb.com\/nyy\/history\/championship09.jsp<\/span><\/p>\n

Navarro, M. (2010, March 16). Bring On the Bees. Retrieved June 30, 2018, from https:\/\/cityroom.blogs.nytimes.com\/2010\/03\/16\/bring-on-the-bees\/<\/span><\/p>\n

O\u2019Connor, A. (2007, February 23). After 200 Years, a Beaver Is Back in New York City. Retrieved June 28, 2018, from https:\/\/www.nytimes.com\/2007\/02\/23\/nyregion\/23beaver.html<\/span><\/p>\n

Ossad, J. (2011, May 23). New York City outdoor smoking ban begins. Retrieved July 1, 2018, from https:\/\/web.archive.org\/web\/20110721122019\/http:\/\/articles.cnn.com\/2011-05-23\/us\/new.york.smoking.ban_1_smoking-on-public-beaches-smoking-ban-secondhand-smoke?_s=PM:US<\/span><\/p>\n

Roudman, S. (2013, July 29). Bank of America’s Toxic Tower. Retrieved June 28, 2018, from https:\/\/newrepublic.com\/article\/113942\/bank-america-tower-and-leed-ratings-racket<\/span><\/p>\n

Silbert, S. (2016, July 14). Introducing .nyc: New York City to get its own top-level domain. Retrieved July 1, 2018, from https:\/\/www.engadget.com\/2013\/07\/02\/new-york-city-to-get-nyc-domain\/<\/span><\/p>\n

Tangel, A. (2015, September 14). New Hudson Yards Subway Station Opens on NYC’s Far West Side. Retrieved July 1, 2018, from https:\/\/www.wsj.com\/articles\/new-subway-station-opens-on-nycs-far-west-side-1442171470<\/span><\/p>\n

The Associated Press. (2015, May 29). One World Trade Center Observatory Opens to Public. Retrieved July 1, 2018, from https:\/\/www.usnews.com\/news\/us\/articles\/2015\/05\/29\/observatory-at-one-world-trade-center-opens-to-public<\/span><\/p>\n

Verrill, C. (2016, March 04). New York City’s $4 billion World Trade Center Transportation Hub is finally open to the public – take a look inside. Retrieved July 1, 2018, from http:\/\/www.businessinsider.com\/the-new-world-center-transportation-hub-2016-3<\/span><\/p>\n

Image Attributions (number corresponds to slide)<\/span><\/h3>\n

1 – By Daniel Schwen [CC BY-SA 2.5 (https:\/\/creativecommons.org\/licenses\/by-sa\/2.5)], from Wikimedia Commons<\/span><\/p>\n

2 – By Haxorjoe [CC BY-SA 3.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/3.0) or GFDL (http:\/\/www.gnu.org\/copyleft\/fdl.html)], from Wikimedia Commons<\/span><\/p>\n

3 – By Wildlife Conservation Society, video still from NYT<\/span><\/p>\n

4 – By Big blue giants [CC BY-SA 4.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/4.0)], from Wikimedia Commons<\/span><\/p>\n

5 – By Arnoldius [CC BY-SA 3.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/3.0)], from Wikimedia Commons<\/span><\/p>\n

6 – By Red Carlisle [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons<\/span><\/p>\n

7 – By Ajay Tallam (originally posted to Flickr as IMG_0106) [CC BY-SA 2.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/2.0)], via Wikimedia Commons<\/span><\/p>\n

8 – By Karen Green from NYC (IMG_20150422_190414431_HDR) [CC BY-SA 2.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/2.0)], via Wikimedia Commons<\/span><\/p>\n

9 – By Affiliate (New York Yankees World Series 2009 Game 6 029) [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons<\/span><\/p>\n

10 – By Eden, Janine and Jim from New York City (One Bryant Park) [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons <\/span><\/p>\n

11 – Dietmar Rabich\u00a0\/ Wikimedia Commons\u00a0\/ \u201cM\u00fcnster, Park (Weseler Stra\u00dfe) — 2017 — 9203\u201d\u00a0\/ CC\u00a0BY-SA\u00a04.0<\/span><\/p>\n

12 – By Sanva1959 [CC BY-SA 3.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/3.0)], from Wikimedia Commons<\/span><\/p>\n

13 – By David Shankbone [CC BY-SA 3.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/3.0) or GFDL (http:\/\/www.gnu.org\/copyleft\/fdl.html)], from Wikimedia Commons<\/span><\/p>\n

14 – By SAB0TEUR (Eli Manning throws the ball) [CC BY-SA 2.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/2.0)], via Wikimedia Commons<\/span><\/p>\n

15 – Santi Garcia [CC BY 3.0 (https:\/\/creativecommons.org\/licenses\/by\/3.0)], via Wikimedia Commons<\/span><\/p>\n

16 – By user:AngMoKio [CC BY-SA 2.5 (https:\/\/creativecommons.org\/licenses\/by-sa\/2.5)], from Wikimedia Commons<\/span><\/p>\n

17 – By Digital-Designs (Freedom Tower – NYC) [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons<\/span><\/p>\n

18 – By Metropolitan Transportation Authority of the State of New York (34 St-Hudson Yards Opening) [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons<\/span><\/p>\n

19 – By Beyond My Ken [GFDL (http:\/\/www.gnu.org\/copyleft\/fdl.html) or CC BY-SA 4.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/4.0)], from Wikimedia Commons<\/span><\/p>\n

20 – By Arild V\u00e5gen [CC BY-SA 4.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/4.0)], from Wikimedia Commons<\/span><\/p>\n

21 – By Metropolitan Transportation Authority of the State of New York (86th Street Second Av. Subway Station Unveiled) [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons<\/span><\/p>\n

22 – By Tdorante10 [CC BY-SA 4.0 (https:\/\/creativecommons.org\/licenses\/by-sa\/4.0)], from Wikimedia Commons<\/span><\/p>\n

23 – By Eden, Janine and Jim from New York City (Village Voice) [CC BY 2.0 (https:\/\/creativecommons.org\/licenses\/by\/2.0)], via Wikimedia Commons<\/span><\/p>\n

24 – By Giorgio Galeotti [CC BY 4.0 (https:\/\/creativecommons.org\/licenses\/by\/4.0)], from Wikimedia Commons<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction to Timelines Creating a timeline involves listing a series of events from beginning to end. Given the desire to learn more about my new home, I became interested in representing significant events in the recent, contemporary history of NYC.\u00a0As a new resident to New York City, it\u2019s important for me to find and establish…<\/p>\n","protected":false},"author":253,"featured_media":9636,"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":[5,124,190,189,120],"coauthors":[358],"class_list":["post-9630","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-timelines","tag-information-visualization","tag-nyc-history","tag-time-series","tag-timeline","tag-timelinejs-visualization"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/07\/INFO658-lab-report-images-1-header.jpg?fit=1200%2C600&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-2vk","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/9630","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\/253"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=9630"}],"version-history":[{"count":10,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/9630\/revisions"}],"predecessor-version":[{"id":9662,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/9630\/revisions\/9662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/9636"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=9630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=9630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=9630"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=9630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}