{"id":7397,"date":"2017-09-14T16:48:38","date_gmt":"2017-09-14T20:48:38","guid":{"rendered":"http:\/\/research.prattsils.org\/?p=7397"},"modified":"2017-09-14T16:48:38","modified_gmt":"2017-09-14T20:48:38","slug":"timeline-information-visualization-public-eye","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/timeline-information-visualization-public-eye\/","title":{"rendered":"Timeline of Information Visualization in the Public Eye"},"content":{"rendered":"<p><strong>Introduction<\/strong><\/p>\n<p><span style=\"font-weight: 400\"> First attracted to the quaint idea of a 1913 Graph Parade in New York noted in the <\/span><a href=\"http:\/\/datavis.ca\/milestones\/\"><span style=\"font-weight: 400\">Milestones in the History of Thematic Cartography Statistical Graphics and Data Visualization Project<\/span><\/a><span style=\"font-weight: 400\">, I examined their timeline and outside sources to find other major events in the history of popular information visualization. While data and information visualization arose from specialized fields like statistics and astronomy, visualization lends itself easily to popular interest as a tool of clarification and communication. Today, information visualization is commonly taught in primary education in the United States. Software like Excel and Google Forms and Sheets make visualization from data simple and sometimes instantaneous for many casual users. Infographics are commonplace in print and online media. The progression of this popularity began early in the history of visualization, through industry and individual efforts, which I documented on an interactive timeline.<\/span><\/p>\n<p><strong>Materials<\/strong><\/p>\n<p><span style=\"font-weight: 400\">I used Michael Friendly and Daniel J Denis\u2019s <\/span><a href=\"http:\/\/datavis.ca\/milestones\/\"><span style=\"font-weight: 400\">Milestones project<\/span><\/a><span style=\"font-weight: 400\"> as a primary dataset, along with an additional milestone that I thought fit the topic. I then used Knight Lab\u2019s <\/span><a href=\"https:\/\/timeline.knightlab.com\/\"><span style=\"font-weight: 400\">Timeline JS<\/span><\/a><span style=\"font-weight: 400\"> in conjunction with Google sheets as my visualization software, accessed through Google Chrome. I then edited my embed HTML in TextEdit and published (or rather attempted to publish) the visualization through WordPress.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Many of my images were found through <\/span><a href=\"http:\/\/commons.wikimedia.org\"><span style=\"font-weight: 400\">Wikimedia Commons<\/span><\/a><span style=\"font-weight: 400\"> and the Milestones site.<\/span><\/p>\n<p><strong>Methods<\/strong><\/p>\n<p><span style=\"font-weight: 400\">I began by selecting a broad array of events from the Milestones timeline, from the 1913 parade to any conference held on the topic. I chose events that fit three categories: semi-public events, mostly public events, and public events. \u2018Semi-public\u2019 events are ones that were not open or visible to the larger public but did present information visualization to a broader audience within other fields. This included statistical and public health conferences. \u2018Mostly public\u2019 events include anything that would have been open to the public, but were limited by cost, from textbooks to public but ticketed events to payware. Then I added to the list any other events not included in the milestones project that seemed to fit. I began with fifteen events.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Through the Timeline JS website, I created a copy of the Google Sheet template in my own Google Drive. I then filled out the template with my events, culling overly broad events like statistics conferences without visualizations from the list. I sourced images from public domain or Creative Commons sites, though the use of images from other sites might have been covered under fair use for this educational and arguably transformative project. In the end I was left with ten events:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1857<\/span> <span style=\"font-weight: 400\">Third International Statistical Congress has graph display<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1868<\/span> <span style=\"font-weight: 400\">Statistical diagrams used in a school textbook<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1892<\/span> <span style=\"font-weight: 400\">Patrick Geddes founds the Outlook Tower<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1895<\/span> <span style=\"font-weight: 400\">First public film screening of the first motion picture<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1911<\/span> <span style=\"font-weight: 400\">First International Hygiene-Exhibition in Dresden<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1913<\/span> <span style=\"font-weight: 400\">Graph Parade in New York<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1920-1926<\/span> <span style=\"font-weight: 400\">Statistical diagrams and graphics get slew of dedicated textbooks<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1933<\/span> <span style=\"font-weight: 400\">Re-design of the routes of the London underground rail system<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1982<\/span> <span style=\"font-weight: 400\">USA Today&#8217;s color weather map ushers in color info graphics in newspapers<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">1987<\/span> <span style=\"font-weight: 400\">Excel 2.0 Introduced for PC<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">From there I followed the Timeline JS instructions, making my sheet public and entering the URL into their site. Using their generated embed code, I created an HTML file to test the visualization in my browser.<\/span><\/p>\n<p><span style=\"font-weight: 400\">I then made edits to the visualization based on what I saw in this preview. I added labels to the \u201cGroup\u201d field to distinguish each of the three levels of public access and troubleshot any faulty images. I added a final row to my sheet and changed the \u201cType\u201d field to \u201ctitle\u201d so that I could include an introductory slide to my timeline with an image that was appropriate to the topic but not tied to any particular event.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Finally, I attempted to embed the visualization into WordPress. At first I did not succeed, but I try, tried again and it should now display.<\/span><\/p>\n<p><strong>Results and Discussion<\/strong><\/p>\n<p><span style=\"font-weight: 400\">If the WordPress embed does not work, the timeline can be viewed here: <a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1Ob2vARdzjgnDOQYHYqhBFtG1wejjairn3SeGeqoIfao&amp;font=Default&amp;lang=en&amp;initial_zoom=0&amp;height=650\">Information Visualization in the Public Eye<\/a><\/span><\/p>\n<p>https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1Ob2vARdzjgnDOQYHYqhBFtG1wejjairn3SeGeqoIfao&#038;font=Default&#038;lang=en&#038;initial_zoom=0&#038;height=650<\/p>\n<p><!-- iframe plugin v.4.3 wordpress.org\/plugins\/iframe\/ --><\/p>\n<p><span style=\"font-weight: 400\">The process of creating the timeline was very simple through Timeline JS. I was already familiar with Google Sheets, where most of the editing and work takes place, so troubleshooting any issues was straightforward. I found the resultant timeline to be effective at conveying the progression of major events in the popular history of information visualization, as well as beautiful and fairly easy to manipulate from the user-end.<\/span><\/p>\n<p><span style=\"font-weight: 400\">I was disappointed in some of the visual limitations. Groups, for example, are displayed in a font that was too pale to easily view on my 2009 Mac running Google Chrome or on a PC running Firefox, obscuring the themes that I was trying to demonstrate. While I believe this may be customizeable, it was not immediately evident how I would do that. I also think that both the spreadsheet template and the actual timeline should have fields for attribution of the background image. While this information could be included in the same field as the main image attribution, this is not made clear and discourages full attribution of images.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Future Directions<\/span><\/p>\n<p><span style=\"font-weight: 400\">In future I would like to use more background images in my timeline, as well as avoiding the use of some lower-resolution images. I would also like to learn more about further customizations of Timeline JS to improve visibility for both the standard user and vision-impaired users that might have difficulty with the pale grey-on-white scheme of the standard timeline.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In terms of content, I would like to do more research than I did for this project outside of the Milestones timeline. The options there for popular uses, celebrations, and displays of information visualization were limited. This is likely because their focus was on technical achievements, but I would like to dive deeper into the social adoption and popular view of graphics outside of the statistical field. I would also include Google Sheets and open source software in future timelines.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction First attracted to the quaint idea of a 1913 Graph Parade in New York noted in the Milestones in the History of Thematic Cartography Statistical Graphics and Data Visualization Project, I examined their timeline and outside sources to find other major events in the history of popular information visualization. While data and information visualization&hellip;<\/p>\n","protected":false},"author":271,"featured_media":0,"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-7397","post","type-post","status-publish","format-standard","hentry","category-visualization"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-1Vj","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/7397","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\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=7397"}],"version-history":[{"count":0,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/7397\/revisions"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=7397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=7397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=7397"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=7397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}