![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/1.png?resize=840%2C473\")
<\/p>\n<\/p>\n
Infographics, a term created by clipping and compounding the words \u2018Information\u2019 and \u2018Graphics\u2019, are visual or graphic representations of information which allow clear and swift communication. They leverage human beings\u2019 visual system\u2019s ability to identify patterns and trends.<\/p>\n
Creating infographics is not a new technique in any way, as the earliest storytellers were the cavemen that lived on the earth forty thousand years ago. These cave dwellers took up their brushes in the form of cave paintings, which told stories about various events that they thought were noteworthy. This was hence, an act of using graphics to present information so as to communicate with others, which is what we define as \u2018Infographics\u2019.<\/p>\n
There have been many iconic infographic inventions in the past that were so robust, that they are still widely used today with minimum, or in some cases, no modifications at all. It is very intriguing to learn about the inventors\u2019 creative genius that led to these incredible information visualizations. I, therefore, decided to create a timeline view of some of these spectacular inventions belonging to the 19th<\/sup> century, which I found to be the most relatable due to my background in Engineering and Technology, having used many of these myself in the recent past. My goal is to showcase these fantastic time-tested inventions in a chronological order, using a popular information visualization tool.<\/p>\n I began my study by analyzing RJ Andrew\u2019s \u201cHistory of Infographics<\/a>\u201d<\/strong>, which was shared by my information visualization professor. It is a wonderful data source to find out about iconic inventions in the world of infographics in an interactive fashion. I started reading blurbs about each of the inventions on the website, while simultaneously making a list of the ones that really piqued my interest. Some of these gave me a huge nostalgia trip as well, as I had used them several years back when I was pursuing my Bachelor\u2019s in Engineering \u2013 for instance, Mendeleev\u2019s Periodic Table, which I used to use quite a lot to fetch elements and figure out their atomic number.<\/p>\n With a lot of Google searching, I was able to find good articles about the visualizations that I had selected to showcase, so as to fetch the clearest definitions I could find to put onto the timeline. This helped me learn more about these visualizations and their variations, for instance, the pie chart has a variant that helps visualize hierarchical data, by using concentric circles. This variant is known as the \u2018multilevel pie chart\u2019.<\/p>\n My next step was to choose appropriate sample images for these visualizations in order to effectively communicate their appearance and use. Yet again, I made use of the articles I had previously visited to find good sample images. Google image search also helped me discover good images that I could use.<\/p>\n As I was collecting all the aforementioned data points, I was simultaneously entering them into my OneNote app in an organized manner. After this was complete, I transferred the data over to the Timeline JS spreadsheet [Fig 1] and followed the steps on their website to generate the timeline. I made several changes thereafter to modify the look and feel by changing the images used to improve readability and effectiveness.<\/p>\n [Fig 1: Google Sheets Template]<\/p><\/div>\n Please access \u2013<\/p>\n [Fig 2: Gallery of screenshots of my TimlelineJS Project]<\/p>\n From this timeline [Fig 2], I hope to make viewers aware of how far back in time these amazing inventions were made in the field of Infographics. I want them to see how robust these were and how little or nothing has changed about them since their invention. \u00a0I hope my use of imagery helps them understand the visualizations at first glance and learn how the 19th<\/sup> century contributed to the world of infographics.<\/p>\n I always enjoy the feeling of learning a new tool or technique and TimlineJs was no exception. I felt that it is truly a spectacular tool which someone having no technical background can also use. However, my technology background really made me gauge the shortcomings of this tool based on my own experience of HTML and JavaScript. I constantly felt the lack of user interface customizations, which makes the bottom section of the timelines look almost the same for many users. This way anyone who is familiar with the tool can tell at first glance that TimelineJS was used. This brings down the uniqueness factor significantly.<\/p>\n Yet another pain point of mine was that although most of my events were coincidentally evenly spaced to about a decade in between each, one event was almost two decades apart, making it appear as an awkward long jump on my timeline. I believe that a way to show an axis break (or kink) between larger gaps and shortening them a bit could be a good idea, making it look more evenly spaced.<\/p>\n Finally, I invested a lot of time in selecting background images for my timeline. However, I later realized that the images, even though subtle, were huge sources of distraction and also made the text harder to read. I, therefore, decided to remove the background images and use a subtle background color instead. I will definitely avoid this in the future.<\/p>\n Introduction Infographics, a term created by clipping and compounding the words \u2018Information\u2019 and \u2018Graphics\u2019, are visual or graphic representations of information which allow clear and swift communication. They leverage human beings\u2019 visual system\u2019s ability to identify patterns and trends. Creating infographics is not a new technique in any way, as the earliest storytellers were the…<\/p>\n","protected":false},"author":512,"featured_media":10514,"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":[251,247,5,120],"coauthors":[353],"class_list":["post-10374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-timelines","tag-history-of-infographics","tag-infographics","tag-information-visualization","tag-timelinejs-visualization"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/1.png?fit=3840%2C2160&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-2Hk","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/10374","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\/512"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=10374"}],"version-history":[{"count":10,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/10374\/revisions"}],"predecessor-version":[{"id":10529,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/10374\/revisions\/10529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/10514"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=10374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=10374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=10374"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=10374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Materials<\/strong><\/h2>\n
Tools<\/em> –<\/h4>\n
\n
Dataset<\/em> \u2013<\/h4>\n
\n
Methodology<\/h2>\n
![\"\"](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/Spreadheet.png?resize=840%2C269\")
Results<\/strong><\/h2>\n
\n
![\"Noteworthy](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/1.png?w=416&h=234&ssl=1\" "\\"1\\"")
<\/a> Noteworthy Infographic Inventions from the 19th Century <\/div> <\/div> <\/div> ![\"Pie](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/2.png?w=416&h=234&ssl=1\" "\\"2\\"")
<\/a> Pie Charts <\/div> <\/div> <\/div> <\/div> ![\"Stacked](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/3.png?w=416&h=234&ssl=1\" "\\"3\\"")
<\/a> Stacked Bar Charts <\/div> <\/div> <\/div> ![\"Cumulative](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/4.png?w=416&h=234&ssl=1\" "\\"4\\"")
<\/a> Cumulative Frequency Curve <\/div> <\/div> <\/div> <\/div> ![\"Evolutionary](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/5.png?w=416&h=234&ssl=1\" "\\"5\\"")
<\/a> Evolutionary Tree <\/div> <\/div> <\/div> ![\"Normal](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/6.png?w=416&h=234&ssl=1\" "\\"6\\"")
<\/a> Normal Curve <\/div> <\/div> <\/div> <\/div> ![\"Organizational](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/7.png?w=416&h=234&ssl=1\" "\\"7\\"")
<\/a> Organizational Chart <\/div> <\/div> <\/div> ![\"Periodic](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/8.png?w=416&h=234&ssl=1\" "\\"8\\"")
<\/a> Periodic Table <\/div> <\/div> <\/div> <\/div> ![\"Age](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/9.png?w=416&h=234&ssl=1\" "\\"9\\"")
<\/a> Age Pyramid <\/div> <\/div> <\/div> ![\"Venn](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/10.png?w=416&h=234&ssl=1\" "\\"10\\"")
<\/a> Venn Diagram <\/div> <\/div> <\/div> <\/div> ![\"Poverty](\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/09\/11.png?w=836&h=470&ssl=1\" "\\"11\\"")
<\/a> Poverty Map <\/div> <\/div> <\/div> <\/div> <\/div>\nReflection & Future Directions<\/strong><\/h2>\n
References<\/h2>\n
\n
\nhttps:\/\/infowetrust.com\/scroll\/<\/a><\/strong><\/li>\n
\nhttps:\/\/www2.le.ac.uk\/offices\/ld\/resources\/numerical-data\/pie-charts<\/a><\/strong><\/li>\n
\nhttps:\/\/study.com\/academy\/lesson\/what-is-a-stacked-bar-chart.html<\/a><\/strong><\/li>\n
\nhttps:\/\/www.wyzant.com\/resources\/lessons\/math\/statistics_and_probability\/averages\/cumulative_frequency_percentiles_and_quartiles<\/a><\/strong><\/li>\n
\nhttps:\/\/evolution.berkeley.edu\/evolibrary\/article\/0_0_0\/evotrees_primer_02<\/a><\/strong><\/li>\n
\nhttps:\/\/www.chegg.com\/homework-help\/definitions\/normal-curve-31<\/a><\/strong><\/li>\n
\nhttps:\/\/www.lucidchart.com\/pages\/organizational-charts<\/a><\/strong>
\nhttps:\/\/www.lucidchart.com\/pages\/venn-diagram<\/a><\/strong><\/li>\n
\nhttps:\/\/www.livescience.com\/25300-periodic-table.html<\/a><\/strong><\/li>\n
\nhttps:\/\/populationeducation.org\/what-population-pyramid\/<\/a><\/strong><\/li>\n
\nhttps:\/\/en.wikipedia.org\/wiki\/Poverty_map<\/a><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"