{"id":11988,"date":"2018-12-16T18:33:51","date_gmt":"2018-12-16T23:33:51","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=11988"},"modified":"2019-01-10T23:49:52","modified_gmt":"2019-01-11T04:49:52","slug":"visualizing-time-throughout-time","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/visualizing-time-throughout-time\/","title":{"rendered":"Timekeeping Over Time: Temporal Visualizations Across History"},"content":{"rendered":"

Our Relationship with Time<\/h1>\n

Time is a universal dimension of\u00a0 human experience, but the ways in which time has been measured, expressed, and adapted throughout history vary. The practice of timekeeping is ultimately a pragmatic one. Time must be kept to make future plans, to record past events, and to make decisions relative to time as a resource. The kinds of plans, events, and decisions that people make are not only based around practical matters (like resource availability or seasons), but are also shaped by social and cultural matters (for instance, religious observation).<\/p>\n

The visual-narrative potential of timelines assists us in explaining ourselves and our stories, as well as in managing practical endeavors. For instance, writers often use timeline software like Aeon Timeline<\/a>, while project managers use GANNT software to keep track of parallel tasks (figs. 1, 2<\/em>).<\/p>\n

 <\/p>\n

\"\"

Figure 1. The Aeon Timeline interface.<\/p><\/div>\n

 <\/p>\n

\"\"

Figure 2. GANNT chart template for Microsoft Excel. (Source: Microsoft<\/a>)<\/em><\/span><\/p><\/div>\n

 <\/p>\n

Inspiration and Goals<\/h1>\n

Just like time provides a framework through which to interpret and organize our worlds, time-based visualizations create conceptual<\/em> frameworks for educational and cultural content. Often used to illustrate cross-cultural and cross-period relationships, the “timelining” of time itself<\/em>\u00a0 highlights both difference and commonality between cultural groups and periods of thought across history (fig.<\/em> 3).<\/em> Depending on the variance with which an interpretation of history is accepted, the way we conceive of time has the potential to be destructively self-perpetuating, or, to challenge anachronistic views of the past.<\/p>\n

 <\/p>\n

\"Heilbrunn

Figure 3. Heilbrunn Timeline of Art History. Southeast Asia, 1400\u20131600 A.D. (Source: The Metropolitan Museum of Art<\/a>)<\/em><\/p><\/div>\n

The Metropolitan Museum of Art’s Heilbrunn Timeline of Art History<\/em><\/a> is a resource that I frequent for both research and and personal interest. When approaching creating a timeline, no matter how simple, it was important to me to communicate something about the world and how we move through it. Further than timelining time, I decided to timeline<\/em> an aspect of the timelining<\/em> of time \u2014 <\/em>which, for my purposes, meant creating a timeline of clocks and watches.<\/p>\n

Tools, Planning, and Assembling the Dataset
\n<\/strong><\/h1>\n

Knowing which tools would be used from the outset was helpful, giving me a set of parameters to plan for. \u00a0Tasked with using Timeline.js<\/a> as the platform for my visualization, I knew that I would be using their Google Sheets template<\/a> to organize the data I found, and also, the kind of information required of my dataset.<\/p>\n\n\n\n\n\n\n
\n

Tools<\/h2>\n<\/td>\n<\/tr>\n

Type<\/strong><\/td>\nName and Source<\/strong><\/td>\n<\/tr>\n
Time-series visualization web application<\/td>\nTimeline.js<\/a><\/td>\n<\/tr>\n
Spreadsheet software<\/td>\nGoogle Sheets<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Finding objects that I wanted to feature in my timeline was not difficult \u2014 but finding objects with consistent metadata standards that would support my narrative across the history of timekeeping was exceptionally challenging. Looking for regulated metadata and proper citation information across numerous cultural institutions was more time-consuming than I had imagined, but I eventually cobbled together a small dataset of nine rows that I felt represented both digital and analog timekeeping methods, various approaches to visualization, and spanning sufficient historical periods to take advantage of Timeline.js’ “era” data type (see references at the end of this post for source information<\/em>).<\/p>\n

Data and Visual Formatting<\/h1>\n

Several time periods and the earliest of my objects were estimated to originate in BCE, and their date ranges had to be input as negative values (fig. 4<\/em>).<\/p>\n

 <\/p>\n

\"\"

Figure 4. Art historical \/ cultural periods with BCE date ranges were recorded with negative values.<\/p><\/div>\n

To create hyperlinks to my media citation sources in a way that Timeline.js’ styling did not prohibit, links had to be hard-coded into the provided spreadsheet. (This is not best practice, as the mark-up syntax that I used has been deprecated since the adoption of HTML5, but it accomplished my immediate goals.) Simple HTML was also used to force the kind of spacing that I wanted to see in the visual design of my timeline.<\/p>\n

Eras, ultimately, were something I had to let go of. They neither looked very good or served a useful purpose, as my object dates were often too distant from one another to illustrate meaningful relationships using eras (fig.<\/em> 5<\/em>).<\/p>\n

 <\/p>\n

\"\"

Figure 5. The way that eras displayed on the timeline interfered with the legibility of the entire visualization.<\/p><\/div>\n

 <\/p>\n

Results and Reflection<\/h1>\n
\"\"

Figure 6. Final layout of object slides.<\/p><\/div>\n

 <\/p>\n

In the future, should I use Timeline.js again, it would be ideal to adjust the timeline’s appearance using proper CSS. The final timeline design is the result of working within the rigid restrictions of Timeline.js’ template \u2014 and attempting to circumvent its limitations with archaic, ill-advised HTML hard-coding. However inflexible that may have rendered the visualization, it still displays nicely on desktop devices, where resources like this are usually viewed from.<\/p>\n

View the final timeline here.<\/strong><\/a><\/p>\n

 <\/p>\n

\n

References and Additional Reading<\/strong><\/h3>\n

Scott, Nora E. 1935. “An Egyptian Sundial<\/a>.” In Bulletin of The Metropolitan Museum of Art, vol. 30, no. 4 (April), pp. 88\u20139<\/p>\n

The Antikythera Mechanism<\/a>, ca. 130\u2014101 BCE. National Archaeological Museum of Athens, Greece, X 15087.<\/p>\n

Wright M.T. (2012) The Front Dial of the Antikythera Mechanism<\/a>. In: Koetsier T., Ceccarelli M. (eds) Explorations in the History of Machines and Mechanisms. History of Mechanism and Machine Science, vol 15. Springer, Dordrecht<\/p>\n

Astrolabe<\/a>. The Metropolitan Museum of Art Collection Online. (artwork in the public domain; The Metropolitan Museum of Art)<\/p>\n

Terrestrial Globe Clock<\/a>. National Maritime Museum, Greenwich, London.<\/p>\n

Schneider, Boris. Digital Mechanics Designed for the Wrist<\/a>. 2018. IWC Schaffhausen.<\/p>\n

Digital Clock – ‘Plato Clock<\/a>\u2019, England, circa 1910. Museums Victoria Collections.<\/p>\n

Pulsar Electronic Wristwatch<\/a>. National Museum of American History, Smithsonian Institution, Washington D.C.<\/p>\n

International Business Machines Corporation. IBM Simon Communicator Users Manual<\/a>, 1994.<\/p>\n

Hein, Buster. \u201ciOS 10\u2019s \u2018Raise to Wake\u2019 only works on new iPhones.<\/a>\u201d Cult of Mac, 2016.<\/p>\n","protected":false},"excerpt":{"rendered":"

Our Relationship with Time Time is a universal dimension of\u00a0 human experience, but the ways in which time has been measured, expressed, and adapted throughout history vary. The practice of timekeeping is ultimately a pragmatic one. Time must be kept to make future plans, to record past events, and to make decisions relative to time…<\/p>\n","protected":false},"author":492,"featured_media":12252,"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":[189,317],"coauthors":[350],"class_list":["post-11988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-timelines","tag-timeline","tag-timeline-js"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/TimeStock.jpeg?fit=5657%2C3824&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-37m","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/11988","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\/492"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=11988"}],"version-history":[{"count":10,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/11988\/revisions"}],"predecessor-version":[{"id":12253,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/11988\/revisions\/12253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/12252"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=11988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=11988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=11988"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=11988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}