{"id":6455,"date":"2017-05-31T15:55:44","date_gmt":"2017-05-31T19:55:44","guid":{"rendered":"http:\/\/research.prattsils.org\/?p=6455"},"modified":"2017-05-31T15:55:44","modified_gmt":"2017-05-31T19:55:44","slug":"lab-report1-visualizing-history-seafloor-mapping-using-knight-labs-timelinejs","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/lab-report1-visualizing-history-seafloor-mapping-using-knight-labs-timelinejs\/","title":{"rendered":"Milestones in Bathymetry Using Knight Lab\u2019s TimelineJS"},"content":{"rendered":"<h3><strong>Introduction<\/strong><\/h3>\n<p>The goal of this first lab was to select\u00a0a historical category or topic within data visualization and create visual representation of milestones using a software tool. \u00a0The purpose, to capture developments occurring over a large span of time and present them in a format that informs, engages, and invites further interest in the topic. \u00a0I chose to visualize the milestones in the mapping of the ocean floor. \u00a0The progression of scientific advancements can be taken for granted in the present day given the technology at our finger tips. \u00a0However, many of those advancements were achieved in\u00a0the last 50 years. A timeline offers\u00a0perspective\u00a0by presenting these scientific milestones succinctly in their historical context.<\/p>\n<h3>Methods<\/h3>\n<p>I started by\u00a0reviewing the timeline of milestones in data visualizations produced by Denis and Friendly (2001). Cartography is one of the oldest technologies represented in their timeline. Though seafloor mapping was not explicitly graphed, brief research into ocean cartography quickly led me to seafloor mapping, its\u00a0technology and contributors. I was inspired by bathymetric (seafloor topography) maps available from\u00a0the National Oceanic and Atmospheric Administration (NOAA) based on\u00a0survey data collected since the beginning of the 20th century.<\/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-12.50.12-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6463 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-12.50.12-PM-620x131.png?resize=724%2C153\" alt=\"\" width=\"724\" height=\"153\" \/><\/a><\/p>\n<p><span style=\"font-weight: 200\">These maps illustrate the parts of the world\u2019s oceans that have been surveyed. \u00a0As dense as the lines appear, upon close inspection they reveal that the ocean is largely unexplored with only 10-15% of the oceans mapped. \u00a0NOAA&#8217;s marine trackline survey data\u00a0used to create these visualizations date from 1939 to present. \u00a0I was curious to learn about the history and evolution of the technology. \u00a0<\/span><span style=\"font-weight: 200\">The evolution\u00a0of sounding (the process of measuring the depth of the seafloor) technology and bathymetry offer\u00a0a well documented history lending itself to an\u00a0interactive timeline. \u00a0The multitude of imagery available, including maps\/charts, photos and illustrations, support a visual guide to this history.<\/span><\/p>\n<p><span style=\"font-weight: 200\">TimelineJS is an open source application developed by Knight Lab\u00a0requiring little to no technical expertise. \u00a0The timeline is created by adding date, text, and media to a spreadsheet template.\u00a0With coding unnecessary, anyone can create a great looking, interactive tool. \u00a0I followed\u00a0Timeline\u2019s guidelines for telling a concise story, namely, choosing a strong narrative with events leading to major developments and keeping\u00a0it short (20 slides maximum). \u00a0Once I had read through several timelines online, I selected a format\u00a0which would meet the goal of presenting the material in an engaging manner\u00a0and still convey the significance of the milestone. As in any scientific discipline, the history of bathymetry includes prominent contributors behind the discoveries. \u00a0Highlighting the technical\u00a0achievements and their contributors produced the best narrative.\u00a0 Exploration is a always a good story as it is all about &#8220;firsts&#8221;.<\/span><\/p>\n<p><span style=\"font-weight: 200\">The timeline data was\u00a0\u00a0derived from extracting information from sources within the\u00a0disciplines of oceanic exploration\u00a0and history. \u00a0Details came primarily from NOAA, founded in 1970 though\u00a0active through\u00a0its ancestor agencies since the 19th century. \u00a0Their photo library, which includes early maps, is completely archived online \u00a0 Additionally, I used \u00a0blogs and educational sites as supplemental\u00a0sources.<\/span><\/p>\n<h3>Results &amp; Discussion<\/h3>\n<p><span style=\"font-weight: 200\">The <a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1YzpwUBDpxIHEqU6Athwi1iHDTGnSFoTtanES8OFup8s&amp;font=Fjalla-Average&amp;lang=en&amp;initial_zoom=5&amp;height=650\">ocean mapping timeline<\/a> focuses on significant\u00a0technological developments, key individuals, and visualizations (maps). \u00a0The resulting timeline is an interesting introduction to a complex topic. \u00a0<\/span>Bathymetry has a 3,500 year history and it was difficult\u00a0deciding where to begin. \u00a0Since sounding methods were relatively unchanged for hundreds of years, I thought it relevant to show how long the technology had been in place. \u00a0<a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-12.50.23-PM.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\" wp-image-6462 aligncenter\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2017\/05\/Screen-Shot-2017-05-31-at-12.50.23-PM-620x480.png?resize=502%2C389\" alt=\"\" width=\"502\" height=\"389\" \/><\/a>Initially, representing BCE dates and the long time span caused the time intervals to expand to 100 years which made the recent centuries difficult to process. \u00a0Though customization of the timeline is limited, the application offered an\u00a0option. \u00a0Increasing the zoom level from default 2 to 5 resulted in reduction to 10 year intervals which are more spread out on the timeline.<\/p>\n<p><span style=\"font-weight: 200\">My first iterations of timeline had over 20 events. \u00a0By consolidating some events into eras and keeping only the most significant events in each time period resulted in a more focused visualization. Combining related images into one slide by making one the background also helped to edit some redundant details and gave texture to the slides. \u00a0For additional interested, I added a thumbnail of a nautical compass to the flags. References were consolidated and presented as links on the final\u00a0slide. \u00a0To make the timeline a more interactive learning experience I would add relevant website and media links to some of the slides. \u00a0Time did not allow for the proper\u00a0curating and editing required to make them effective in the narrative.<\/span><\/p>\n<p><span style=\"font-weight: 200\">TimelineJS is exceedingly user-friendly but some of the limitations can be frustrating. \u00a0According to their tech support forum, many of the display limitations, such as font\u00a0<\/span><span style=\"font-weight: 200\">colors and sizes, can be handled with knowledge of javascript\/json and\/or CSS. \u00a0Unfortunately, I was not able to customize my timeline due to lack of skill. \u00a0 Even limited\u00a0coding skills would be effective in\u00a0personalizing the appearance and maximizing the functionality of the software. \u00a0 Despite, these minor obstacles, I accept the limitations as necessary to create an open source product for a very general audience. \u00a0<\/span><\/p>\n<p>[iframe src=&#8221;https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1YzpwUBDpxIHEqU6Athwi1iHDTGnSFoTtanES8OFup8s&amp;font=Fjalla-Average&amp;lang=en&amp;initial_zoom=5&amp;height=650&#8243; width=&#8221;100%&#8221;<br \/>\nheight=&#8221;650&#8243;]<\/p>\n<h3><strong>References<\/strong><\/h3>\n<p><span style=\"font-weight: 200\">Few, S. (2009) <\/span><i><span style=\"font-weight: 200\">Now you see it: Simple visualization techniques for quantitative analysis<\/span><\/i><span style=\"font-weight: 200\">. \u00a0Oakland, CA: Analytics Press<\/span><\/p>\n<p><span style=\"font-weight: 200\">Friendly, M. &amp; Denis, D. J. (2001). <\/span><i><span style=\"font-weight: 200\">Milestones in the history of thematic cartography, statistical graphics, and data visualization<\/span><\/i><span style=\"font-weight: 200\">. Retrieved from <\/span><a href=\"http:\/\/www.datavis.ca\/milestones\/\"><span style=\"font-weight: 200\">http:\/\/www.datavis.ca\/milestones\/<\/span><\/a><\/p>\n<p><i><span style=\"font-weight: 200\">Make a timeline (n.d.)<\/span><\/i><span style=\"font-weight: 200\">. Retrieved from <a href=\"http:\/\/timeline.knightlab.com\/\">http:\/\/timeline.knightlab.com<\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The goal of this first lab was to select\u00a0a historical category or topic within data visualization and create visual representation of milestones using a software tool. \u00a0The purpose, to capture developments occurring over a large span of time and present them in a format that informs, engages, and invites further interest in the topic.&hellip;<\/p>\n","protected":false},"author":210,"featured_media":6463,"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-6455","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-1G7","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/6455","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\/210"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=6455"}],"version-history":[{"count":0,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/6455\/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=6455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=6455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=6455"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=6455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}