{"id":14765,"date":"2019-07-01T13:54:31","date_gmt":"2019-07-01T17:54:31","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=14765"},"modified":"2019-07-01T16:01:14","modified_gmt":"2019-07-01T20:01:14","slug":"the-evolution-of-the-olympic-pictograms","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/the-evolution-of-the-olympic-pictograms\/","title":{"rendered":"THE EVOLUTION OF THE OLYMPIC PICTOGRAMS"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2264\" height=\"1346\" src=\"https:\/\/i1.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?fit=840%2C500\" alt=\"\" class=\"wp-image-14777\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?w=2264&amp;ssl=1 2264w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?resize=768%2C457&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?resize=1024%2C609&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?resize=800%2C476&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?resize=303%2C180&amp;ssl=1 303w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3-1.jpg?w=1680 1680w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption><a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1TDBKTurXIFWIwU3esjSIDzVYMiibGfwDwdIumDPOvGU&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650\">The Evolution of the Olympic Pictograms<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Introduction<\/strong><\/h3>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\">\u201cA picture is worth a thousand words.\u201d Communicating messages through visualization has been an effective technique used since the beginning of history. Pictogram, conveying the meanings by its representational and pictorial drawing, appeared since cave painting, Egyptian hieroglyphs and Greek geometry. Nowadays, the pictogram is a communication tool to draw attention and help people quickly recognized and understand the messages. It is widely used in our daily life since the demand for quick communication has grown under today\u2019s digital environment which is dominated by audio and visual experiences. Also, it serves as an appropriate way for communication across different countries because it could be understood without language and culture barrier. The most prominent example of pictogram applied in the international event is for the Olympic Games. Comparing to the competition itself, the design of the Olympic pictograms doesn\u2019t have a long history, yet the works are diverse and worth of studying, comparing, and appreciating. Now I invite you to go on a journey with me to see the evolution of the Olympic pictograms throughout the years.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Methods\/Process<\/strong><\/h3>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\"><strong>Research<\/strong><\/p>\n\n\n\n<p>Since pictogram has a long history and wide application, I did research on the internet trying to narrow down the subject to a specific theme. Then I came across an article, <a href=\"https:\/\/theolympians.co\/2019\/03\/18\/olympic-pictograms-1964-and-2020\/\">Olympic Pictograms \u2013 1964 and 2020<\/a>, talking about the story of the first and the latest Olympic pictogram design, which were both from Japan. It aroused my interests and gave me the inspiration to dig deeper into the design history of the Olympic pictograms.<\/p>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\"><strong>Collect Data<\/strong><\/p>\n\n\n\n<p>The data collected on the internet were mainly from <a href=\"https:\/\/mediamadegreat.com\/olympic-pictograms\/\">Olympic Pictograms: Design through History<\/a>, and supplemented by the other two websites, <a href=\"https:\/\/www.wired.com\/2016\/08\/decoding-hidden-meanings-olympic-symbols\/\">Decoding The Hidden Meanings of Olympic Symbols<\/a>, and <a href=\"https:\/\/iconutopia.com\/the-history-of-the-olympic-games-icons\/\">The History of the Olympic Games icons<\/a>. Gathering information from multiple sources help me to get a thorough understanding of the subject and proceed to the next step.<\/p>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\"><strong>Visualize the Evolution<\/strong><\/p>\n\n\n\n<p>I used <a href=\"http:\/\/timeline.knightlab.com\/\">TimelineJS<\/a>, an open-source tool, to create the storytelling timeline by organizing the content in the corresponding <a href=\"https:\/\/www.google.com\/sheets\/about\/\">Google Sheets<\/a>. First of all, I input and edited the data collected previously into categories of time, headline, description, media, and media caption. Then I customized the display format of the content using HTML, changing the background into dark gray. Finally, I published the spreadsheet to the web and enter the URL of the spreadsheet to TimelineJS which then generated the timeline automatically. Throughout the whole editing process, I kept refreshing the preview link to check if I got the satisfying result.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Result<\/strong><\/h3>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\">The data organized in the spreadsheet resulted as a corresponding interactive timeline showcasing the informative texts and images in a very simple, flexible, and effective way.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"916\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?fit=840%2C422\" alt=\"\" class=\"wp-image-14799\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?w=1820&amp;ssl=1 1820w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?resize=300%2C151&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?resize=768%2C387&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?resize=1024%2C515&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?resize=800%2C403&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?resize=358%2C180&amp;ssl=1 358w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.50.37-AM.png?w=1680 1680w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1TDBKTurXIFWIwU3esjSIDzVYMiibGfwDwdIumDPOvGU\/edit#gid=0\">Spreadsheet<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1274\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?fit=840%2C372\" alt=\"\" class=\"wp-image-14800\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?w=2880&amp;ssl=1 2880w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?resize=768%2C340&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?resize=1024%2C453&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?resize=800%2C354&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?resize=400%2C177&amp;ssl=1 400w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/Screen-Shot-2019-07-01-at-11.48.36-AM.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption><a href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=1TDBKTurXIFWIwU3esjSIDzVYMiibGfwDwdIumDPOvGU&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650\">The Evolution of the Olympic Pictograms<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Reflection<\/h3>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\">Doing this exercise made me understand the power of the timeline as a graphical way of displaying events in chronological order. Since browsing the interactive timeline provides a feeling of actually walking through time, it intensifies the sense of the sequence, therefore, makes the content more clear and memorable to the audience. In addition, I\u2019ve learned that organizing data and put it in the right place is the essence of creating order to generate effective data display.<\/p>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\">If I have more time to design with this timeline, I want to input more types of media to provide more diverse and complete information. Also, I would like to learn more about how to use HTML to adjust the display format and make it more interesting. However, if I have the chance to go over this project again, I think the first thing to do is to change the topic. Since the main function of the timeline is to visually present a story or view of history and analysis the pattern between the events, Olympic Pictograms seems to be not the most suitable subject to deal with. Timewise, it has no complexity when it happened every 4 years, also, it has little relation between each design because they were from different cities. Therefore, I think it is more appropriate to see through the history of pictogram from a broader perspective on time and application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Materials<\/h3>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\"><strong>Softwares<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/timeline.knightlab.com\/\">TimelineJS<\/a>: An open-source tool for creating media-rich and interactive storytelling timelines.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.google.com\/sheets\/about\/\">Google Sheets<\/a>: A web-based software used for editing and organizing the content of the timeline.<\/li><\/ul>\n\n\n\n<p class=\"has-text-color has-dark-gray-color\"><strong>Reference Articles<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/theolympians.co\/2019\/03\/18\/olympic-pictograms-1964-and-2020\/\">Olympic Pictograms \u2013 1964 and 2020<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/mediamadegreat.com\/olympic-pictograms\/\">Olympic Pictograms: Design through History<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.wired.com\/2016\/08\/decoding-hidden-meanings-olympic-symbols\/\">Decoding The Hidden Meanings of Olympic Symbols<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/iconutopia.com\/the-history-of-the-olympic-games-icons\/\">The History of the Olympic Games icons<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Introduction \u201cA picture is worth a thousand words.\u201d Communicating messages through visualization has been an effective technique used since the beginning of history. Pictogram, conveying the meanings by its representational and pictorial drawing, appeared since cave painting, Egyptian hieroglyphs and Greek geometry. Nowadays, the pictogram is a communication tool to draw attention and help people&hellip;<\/p>\n","protected":false},"author":662,"featured_media":14774,"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":[],"coauthors":[429],"class_list":["post-14765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-timelines"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/07\/WIRED-OlympicPicto-History-Final3.jpg?fit=2264%2C1346&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-3Q9","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/14765","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\/662"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=14765"}],"version-history":[{"count":9,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/14765\/revisions"}],"predecessor-version":[{"id":14836,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/14765\/revisions\/14836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/14774"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=14765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=14765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=14765"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=14765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}