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. As a new resident to New York City, it’s 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.

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.

Methodology & Materials

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. I gathered notes on dates, links to references and summaries of the events. References provided information like specific dates and interesting tidbits.

Wikimedia Commons 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.

The decision to use TimelineJS—a story-telling tool by Northwestern University’s Knight Lab—to 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, to create the additional navigation element. After entering all the information into the corresponding fields of the Google Sheets template, the timeline was published, then previewed for review. Once it’s published, any changes are reflected, as long as the page with the timeline is refreshed.

Results

Pre-attentive attributes of “form, color, position, and motion can be used to display abstract data in ways that are rapidly perceptible and easily graspable” (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.

The embedded timeline:

[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]

Click this link, to be directed to the timeline:

https://cdn.knightlab.com/libs/timeline3/latest/embed/contemporary-history-of-nyc-2007-2017

Future Directions

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.

Timeline.JS also allows for users to modify the background (whether it’s 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. 

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.

References

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

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

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

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

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

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

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/

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

Few, S. (2009). Now you see it: Simple visualization techniques for quantative analysis. Oakland, CA: Analytics Press.

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

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

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

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

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

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

Melvyn Dubofsky (2013). The Oxford Encyclopedia of American Business, Labor, and Economic History. Oxford University Press. pp. 470–. ISBN 978-0-19-973881-6.

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

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/

O’Connor, 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

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

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

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/

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

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

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

Image Attributions (number corresponds to slide)

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

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

3 – By Wildlife Conservation Society, video still from NYT

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

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

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

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

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

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

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

11 – Dietmar Rabich / Wikimedia Commons / “Münster, Park (Weseler Straße) — 2017 — 9203” / CC BY-SA 4.0

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

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

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

15 – Santi Garcia [CC BY 3.0 (https://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons

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

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

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

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

20 – By Arild Vågen [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia Commons

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

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

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

24 – By Giorgio Galeotti [CC BY 4.0 (https://creativecommons.org/licenses/by/4.0)], from Wikimedia Commons