{"id":21954,"date":"2021-02-03T16:35:04","date_gmt":"2021-02-03T21:35:04","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=21954"},"modified":"2021-02-03T21:05:55","modified_gmt":"2021-02-04T02:05:55","slug":"the-history-of-visualization-in-science","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/the-history-of-visualization-in-science\/","title":{"rendered":"the History of Visualization in science"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"385\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1-1024x469.png?resize=840%2C385&#038;ssl=1\" alt=\"\" class=\"wp-image-21988\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?resize=1024%2C469&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?resize=300%2C137&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?resize=768%2C352&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?resize=1536%2C704&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?resize=800%2C367&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?resize=393%2C180&amp;ssl=1 393w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?w=1750&amp;ssl=1 1750w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A-1.png?w=1680 1680w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Background<\/h2>\n\n\n\n<p>Science is the field that adopted the idea of visualization the earliest and is still widely used to analyze complex data into more understandable visualization for everyone to comprehend.  When I started this assignment, I have minimal knowledge of visualization. I began doing some research from the earliest visualization form, and the scientistic visualization stood out the most. Then I started to see the evolution from hand-drawn to computer-generated, 2D to 3D, and live updates in modern days, it fascinated me. Also, I enjoyed reading visualization graphics over a long article about scientific data, which made me appreciate this topic even more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Process<\/strong><\/h2>\n\n\n\n<p>The article &#8220;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.datavis.ca\/papers\/aaas\/HistSciVis2x2.pdf\" target=\"_blank\">Milestones in the History of Scientific Visualization<\/a>&#8221; and &#8221; <a rel=\"noreferrer noopener\" href=\"http:\/\/euclid.psych.yorku.ca\/SCS\/Gallery\/milestone\/Visualization_Milestones.pdf\" target=\"_blank\">Milestones in the History of Data Visualization<\/a>&#8221; were my primary resources for this project. I also used History of Visualization PowerPoint as a basic guide.<\/p>\n\n\n\n<p>I used the recommended tool <a href=\"https:\/\/timeline.knightlab.com\/#make\">Timeline JS<\/a> by Knight Lab to create this timeline. Timeline JS is an open-source tool to create an interactive timeline along with Google SpreadSheet. Google Spreadsheet template shared by Timeline JS is very intuitive and user friendly. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"411\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5-1024x501.png?resize=840%2C411&#038;ssl=1\" alt=\"\" class=\"wp-image-21977\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=1024%2C501&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=300%2C147&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=768%2C376&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=1536%2C752&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=2048%2C1002&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=800%2C391&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?resize=368%2C180&amp;ssl=1 368w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-5.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p>Although the process was relatively simple, I had some confusion due to a lack of explanation and limitation. For example in the first blue highlighted row, the use the type &#8220;title&#8221; (limited 1 per timeline) to indicate the cover page, and the limited media format created trial and error. There were several times that the timeline failed to update; the most effective way I found is to re-publish. <\/p>\n\n\n\n<p>I also took advantage of the type &#8220;era&#8221;; this allows the timeline to label a span of time in the &#8220;axis&#8221; area with distinct colors. I use this method to divided the timeline into multiple significate eras in the visualization history so the readers can easily compare it to their examples within the same period. We can also see in this timeline how visualization from centuries ago impacted modern data visualization.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1fCiY2BnplCxi2yxWYHweevQFUDsMAEPuhvRfjKZ-1h8\/edit?usp=sharing\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"301\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1-1024x367.png?resize=840%2C301&#038;ssl=1\" alt=\"\" class=\"wp-image-21969\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=1024%2C367&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=300%2C107&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=768%2C275&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=1536%2C550&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=2048%2C734&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=800%2C287&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?resize=400%2C143&amp;ssl=1 400w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/a><\/figure>\n\n\n\n<p>I have found the &#8220;<a href=\"https:\/\/timeline.knightlab.com\/docs\/using-spreadsheets.html\" data-type=\"URL\" data-id=\"https:\/\/timeline.knightlab.com\/docs\/using-spreadsheets.html\" target=\"_blank\" rel=\"noreferrer noopener\">Making a timeline from a Google Spreadsheet<\/a>&#8221; instruction page very helpful. This page explains the Spreadsheet in a more detailed way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Results<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1fCiY2BnplCxi2yxWYHweevQFUDsMAEPuhvRfjKZ-1h8&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650\" target=\"_blank\" rel=\"noopener\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"363\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-1024x443.png?resize=840%2C363&#038;ssl=1\" alt=\"\" class=\"wp-image-21967\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=1024%2C443&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=300%2C130&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=768%2C332&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=1536%2C664&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=2048%2C886&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=800%2C346&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?resize=400%2C173&amp;ssl=1 400w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/a><\/figure>\n\n\n\n<p>This timeline provided an interactive and streamlined experience on how visualization in science has evolved over the centuries. I used the four significant eras of visualization as the foundation and showed several milestones within those periods. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1fCiY2BnplCxi2yxWYHweevQFUDsMAEPuhvRfjKZ-1h8&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650\" target=\"_blank\" rel=\"noopener\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"258\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8-1024x315.png?resize=840%2C258&#038;ssl=1\" alt=\"\" class=\"wp-image-21984\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=1024%2C315&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=300%2C92&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=768%2C236&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=1536%2C472&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=2048%2C630&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=800%2C246&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?resize=400%2C123&amp;ssl=1 400w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-8.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/a><\/figure>\n\n\n\n<p>I started with a graphic showing a disease pattern and end with the current pandemic to show visualization evolution. Today, our visualization technology has combined all the inventions from the past and much more interactive.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1fCiY2BnplCxi2yxWYHweevQFUDsMAEPuhvRfjKZ-1h8&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650\" target=\"_blank\" rel=\"noopener\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"267\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7-1024x326.png?resize=840%2C267&#038;ssl=1\" alt=\"\" class=\"wp-image-21983\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=1024%2C326&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=300%2C96&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=768%2C245&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=1536%2C489&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=2048%2C653&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=800%2C255&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?resize=400%2C127&amp;ssl=1 400w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/image-7.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Reflection<\/strong><\/h2>\n\n\n\n<p>I kept wanting to add more to this timeline, especially with the new technology. I am also interested in future predictions of the visualization with the new technology. I would like to make revisions on the headlines to be more consistent throughout such as the name of the diagram, creator &#8211; diagram name, or just creator. Overall, the timeline accurately demonstrated the information. I am happy with the Timeline JS experience; it is a user-friendly tool to create a timeline quickly. If the Timeline JS tool can have more personalization, that would be great so each project can have its creativities and different from others. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sources<\/h2>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.datavis.ca\/papers\/aaas\/HistSciVis2x2.pdf\" target=\"_blank\">Milestones in the History of Scientific Visualization &#8211; DataVis.ca<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"http:\/\/euclid.psych.yorku.ca\/SCS\/Gallery\/milestone\/Visualization_Milestones.pdf\" target=\"_blank\">Milestones in the History of Data Visualization<\/a><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/towardsdatascience.com\/9-data-visualization-tools-that-you-cannot-miss-in-2019-3ff23222a927\" target=\"_blank\">9 Data Visualization Tools That You Cannot Miss in 2019<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/modus.medium.com\/the-power-of-data-viz-for-telling-stories-about-science-3533f7c64dd5\" target=\"_blank\" rel=\"noreferrer noopener\">The Power of Data Viz for Telling Stories About Science<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Background Science is the field that adopted the idea of visualization the earliest and is still widely used to analyze complex data into more understandable visualization for everyone to comprehend. When I started this assignment, I have minimal knowledge of visualization. I began doing some research from the earliest visualization form, and the scientistic visualization&hellip;<\/p>\n","protected":false},"author":1998,"featured_media":21987,"comment_status":"open","ping_status":"open","sticky":true,"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,1],"tags":[],"coauthors":[1075],"class_list":["post-21954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-timelines","category-visualization"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2021\/02\/1_Pavo0y0tcUMV3yN257da8A.png?fit=1750%2C802&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-5I6","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/21954","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\/1998"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=21954"}],"version-history":[{"count":20,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/21954\/revisions"}],"predecessor-version":[{"id":22022,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/21954\/revisions\/22022"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/21987"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=21954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=21954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=21954"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=21954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}