Infographics - 2012 E3 Conestoga

  • 2,866 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,866
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
115
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • The slightly more modern history of infographics might very well start with William Playfair, an early innovator in Statistical Graphics. In 1786, he published The Commercial and Political Atlas, which displayed many bar charts, line graphs and histograms representing the economy in England. He followed this up with the first area chart and first pie chart in 1801.
  • In 1857, English nurse Florence Nightingale used information graphics -- primarily the Coxcomb chart, a combination of stacked bar and pie charts -- to change history and persuade Queen Victoria to improve conditions in military hospitals. Her chart showed the number and causes of deaths during each month of the Crimean War: preventable diseases in blue, wounds in red, and other causes in black.
  • Speaking of England, a big step in the history of infographics was taken in 1933, when Harry Beck created the first map of the London Tube showing only lines to depict public transit routes and stations. This was an important development, since it moved visual diagrams into everyday life.
  • Similarly simplifying things for travelers and tourists, in 1972 Otl Aicher created a set of pictograms for the Munich Olympics that featured stylized human figures. These infographics became incredibly popular and influenced the design of many public signs today -- like the generic stick figure crossing the street on a Walk sign.
  • Moving on to 1975, we come to the father of data visualization, Edward Tufte. That was the year that, while teaching at Princeton, Tufte developed a seminar on statistical graphics with John Tukey, a pioneer in the field of information design. Tufte later self- published Visual Display in 1982, establishing himself as an infographics expert.
  • Recent history includes the advent of charts in office-oriented software, particularly Excel and PowerPoint. This explosion of easy-to-use data visualization tools led to an expansion of infographics in academia and the popularization of business intelligence.Nowadays, of course, web-based data visualization tools are making it easier than ever to create infographics like motion graphics, interactive data visualizations, -- and who knows how the history of infographics will change in the future.
  • Design your infographic to convey one idea really well. You’re not writing a scientific research paper, so don’t expect your reader to dig into a lot of detail. This doesn’t mean you should only visualize one number, but your entire graphic should support one of the major points from the article. You can include additional facts or information to make the infographic stand on its own, but don’t lose sight of the point you want to get across.
  • Design your infographic with your final for viewing size in mind.
  •  Infographics can be used to lead readers to the wrong conclusions. Always cite your data sources and allow readers to dig deeper into the data if they have the desire. Some of the best articles include easy access to the source data with links to a spreadsheet for readers to view on their own.
  • Remember your geometry and visualize differences using area. When trying to convey the scale of your data, many graphics use different sized shapes or images to show amounts relative to each other. The reader’s eye sees the total area of the image as indicative of scale, not just the height of the image.
  •  Include visuals: Illustrations and photos included in the infographic make a big difference.
  • Work on the assumption that your infographic may be viewed or shared without the article you originally designed it for. Make sure that the final graphic includes the following pieces:• Copyright, to be explicit about any rights and terms of use• Source data, so anyone can check your facts• Designer’s name, always give credit to the artist/illustrator/programmer/designer• Original image/article address, so anyone who sees the image can find your original article
  • se whatever tools you have available to create your infographic. Of course, the tools you use will depend on what you are trying to visualize. Many infographics can be created using simple applications like a vector drawing program (like Microsoft Visio), a charting program (like Microsoft Office or Apple iWork) or an image editing program (like Adobe Photoshop).
  • Approach an infographic as you would, any other form of design. Put together a skeleton of words and arrows, grouping relevant data together and visualizing the flow of information using flowcharts. Because infographics are usually complex, flowcharts will simplify the process and connect everything precisely for you.
  • A color scheme is very important to convey a wide array of messages while keeping the reader confined inside the infographic. With huge and complex infographics, readers will become quickly confused and their perceptions will be scattered all over the place if they don’t have colors tying down their thoughts visually. You can have 2, 3 or 10 colors but assigning them before you begin designing will be the most important thing you do.
  • There are two kinds of graphics in an infographic. They are theme graphics and reference graphics.Theme graphic is the defining visual of the design and is usually always included in the infographic, except when the infographic is more statistic based. Choosing the right theme graphic will tell you reader at a glance what knowledge you wish to share.Reference graphics are not mandatory in the design. They are usually icons used as visual pointers to avoid cluttering up the design when a lot of content needs to be represented. They are brilliantly capable of making numerous references using the same instance. Sometimes words aren’t even necessary if powerful reference icons are used, a practice more and more designers are using in a bid to make their infographics as word-free as possible.
  • It goes without saying that all infographics must be thoroughly researched and the data presented must be backed up by established facts. While doing that, you will inevitably end up with piles of data. Sifting through that you must condense and decide what data is the most relevant and how you are going to present it. The ratio of data to the graphics works best if it is 1:1.Another extremely important point to remember is demographics. Who is going to be using your infographic? Are they regular office going people who are used to staring at suburban train line infographics or tourists from a non-English speaking country or 10 year old impressionable kids who are being taught to recognize bullying and raise a voice against it. Depending on the demographics, your infographics will accordingly reflect colors, icons, knowledge and complexity.
  • Frame your idea clearly. Take a disciplined approach to visual storytelling. Your primary point should be clear and supported by context and detail. The main art should draw us in. Sidebars should be well-focused. Don’t spam us with too much information; nobody has time these days.
  • Tool for generating word clouds
  • Tool for generating word clouds
  • The heart of the site is a collection of data visualizations. All the visualizations on Many Eyes have an attached discussion forum. On Many Eyes you can:1. View and discuss visualizations 2. View and discuss data sets 3. Create visualizations from existing data setsIf you register, you can also: 4. Rate data sets and visualizations 5. Upload your own data 6. Create and participate in topic centers 7. Select items to watch 8. Track your contributions, watchlist, and topic centers 9. See comments that others have written to you
  • A free, online version of software that helps you create custom diagrams and charts.
  • A free, online version of software that helps you create custom diagrams and charts.
  • Tableau Public is a free service that lets anyone publish interactive data to the web. Once on the web, anyone can interact with the data, download it, or create their own visualizations of it. No programming skills are required. Be sure to look at the gallery to see some of the things people have been doing with it.
  • Google's Public Data Explorer provides public data and forecasts from a range of international organizations and academic institutions including the World Bank, OECD, Eurostat and the University of Denver. These can be displayed as line graphs, bar graphs, cross sectional plots or on maps.
  • The Pew Research Center is a nonpartisan fact tank that provides information on the issues, attitudes and trends shaping America and the world.
  • Statistics Canada – Canadian Stats
  • Statistics Canada – Canadian Stats
  • US Open Data
  • US Open Data
  • And of course – an infographic on infographics

Transcript

  • 1. A Picture is Worth a 1000 Words Introduction to Infographics Melanie Parlette, BA, MLIS Library Resource Centre
  • 2. What we’re going to cover• What is an Infographic?• Why do I need them?• Where can I find Infographics?• What do I need to make my own Infographic?• Making an Infographic• Great Resources
  • 3. What is an Infographic?• visualizations that present complex information quickly and clearly• visualizations that integrate words and graphics to reveal information, patterns or trends• visualizations that are easier to understand than words alone• visualizations that are beautiful and engaging Source: http://visual.ly/what-is-an-infographic
  • 4. History Source: http://www.katieandemil.com/images/who-invented-pie-chart-1.jpg
  • 5. History Source: http://understandinguncertainty.org/coxcombs
  • 6. HistorySource: http://www1.icsi.berkeley.edu/~stellayu/artvis/project/roadmap/old_map.jpg
  • 7. HistorySource: http://observatory.designobserver.com/media/images/otl_aicher_525.jpg
  • 8. History Source: http://www.kqed.org/assets/img/arts/blog/hd-tufte.jpg
  • 9. In the Current ContextVideo: http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization.html
  • 10. Why should Icare aboutInfographics?
  • 11. Increasing Popularity
  • 12. Easy to share Image Source: http://blog.exacttarget.com/blog/s mall-business-big-results/social- blogs-and-emailoh-my
  • 13. Lots of Information –Source: Quick!http://infographiclist.files.wordpress.com/2012/05/cancerincanada_4faa89f6bfb14.jpg
  • 14. EXPLORING
  • 15. Source: http://www.flickr.com/photos/cooljerk/479832255/sizes/o/in/photostream/
  • 16. Source:http://lokeshdhakar.com/coffee-drinks-illustrated/
  • 17. The Canadian Oil BoomSource: http://www.visualcapitalist.com/portfolio/the-canadian-oil-boom-oil-sands-intro
  • 18. The many shades of caregiving Source: http://www.innovation.ca/en/ResearchinAction/Infographics/7059
  • 19. Whether or not the Danes thinks its ethical to wearreligious symbols in public professions Source: http://www.peterorntoft.com/HTML%20filer/infocontext1.html
  • 20. Source:http://i.imgur.com/kWAJo.jpg
  • 21. TYPES
  • 22. Maps Everyone has Infographics! (This one came from Canadian Living)Source:http://www.canadianliving.com/food/cooking_school/the_great_canadian_food_map_an_interactive_infographic.php
  • 23. TimelinesSource: http://www.bbc.co.uk/programmes/p00cgkfk
  • 24. TimelinesSource:http://www.allianz.com.au/car-insurance/infographic/car-digital-technology/img/allianz-car-insurance-digital-tech-infographic.jpg
  • 25. ResourceSource: http://visual.ly/why-startups-fail
  • 26. ResourceSource: http://visual.ly/why-startups-fail
  • 27. ComparativeSource: http://visual.ly/google-vs-facebook-guide-brand-pages
  • 28. Flow ChartsSource: http://www.shouldiworkforfree.com/
  • 29. ResumeSource: http://www.behance.net/gallery/Resume/751330
  • 30. Visualizing Data Source: http://www.bbc.co.uk/programmes/p00cgkfk
  • 31. Interactive Visualizations Source: http://www.nytimes.com/interactive/2008/05/05/science/20080506_DISEASE.html
  • 32. CREATINGBEST PRACTICES
  • 33. Be Concise Source: http://www.rei.com/pix/marketing/images/rei- backpacking-infographic.jpgBEST PRACTICES Source:http://digitalnewsgathering.wordpress.com/2010 /04/24/10-tips-for-designing-infographics/
  • 34. Be VisualBEST PRACTICES Source: http://blog.goireland.com/wp- content/uploads/2012/03/GuinnessVsBeer_ Final_700x7138.jpg Source:http://digitalnewsgathering.wordpress.com/2010/04/24/10-tips-for-designing-infographics/
  • 35. Be TransparentBEST PRACTICES Source: http://visual.ly/instagram-vs-new-york-times Source:http://digitalnewsgathering.wordpress.com/2010/04/24/10-tips-for-designing-infographics/
  • 36. Source:Be Accurate http://s3files.core77.com/blog/images/2011/04/Stanford_Kay- Carbon_Footprint_Infographic-full.jpg BEST PRACTICES Source:http://digitalnewsgathering.wordpress.com/2010 /04/24/10-tips-for-designing-infographics/
  • 37. Source: http://www.dgquarterly.com/site/wp- content/uploads/2012/03/Plot-lines.jpgBe AttractiveBEST PRACTICES Source:http://digitalnewsgathering.wordpress.com/2010 /04/24/10-tips-for-designing-infographics/
  • 38. BeGracious • Copyright, to be explicit about any rights and terms of use • Source data, so anyone can check your facts • Designer’s name, always give credit to the artist/illustrator/progra mmer/designer • Original image/article address, so anyone who sees the image can find your original article Source: http://www.sonice.ca/good-for-you/organic-choice BEST PRACTICES Source:http://digitalnewsgathering.wordpress.com/2010 /04/24/10-tips-for-designing-infographics/
  • 39. BeCreativeBEST PRACTICES Source: http://blog.ffctn.com/what-is-data-visualization Source:http://digitalnewsgathering.wordpress.com/2010 /04/24/10-tips-for-designing-infographics/
  • 40. CREATINGTIPS
  • 41. 1. Put togetherthe general ideasyou want toconvey.TIPS Source: http://spyrestudios.com/the-anatomy-of-an-infographic-5-steps-to-create-a-powerful-visual/
  • 42. 2. Pick yourcolour scheme.TIPS Source: http://spyrestudios.com/the-anatomy-of-an-infographic-5-steps-to-create-a-powerful-visual/
  • 43. 3. Choose yourGraphics.TIPS Source: http://spyrestudios.com/the-anatomy-of-an-infographic-5-steps-to-create-a-powerful-visual/
  • 44. 4. Research andData.TIPS Source: http://spyrestudios.com/the-anatomy-of-an-infographic-5-steps-to-create-a-powerful-visual/
  • 45. 5. Edit.TIPS Source: http://spyrestudios.com/the-anatomy-of-an-infographic-5-steps-to-create-a-powerful-visual/
  • 46. CREATINGTOOLS FOR CREATING
  • 47. TOOLS FOR CREATING http://visual.ly/
  • 48. TOOLS FOR CREATING http://www.easel.ly/
  • 49. TOOLS FOR CREATING http://www.wordle.net/
  • 50. TOOLS FOR CREATING http://www.tagxedo.com
  • 51. TOOLS FOR CREATING http://www-958.ibm.com/software/data/cognos/manyeyes/
  • 52. TOOLS FOR CREATING http://creately.com
  • 53. TOOLS FOR CREATING https://cacoo.com/
  • 54. TOOLS FOR CREATING http://www.tableausoftware.com/public/
  • 55. CREATINGDATA SOURCES
  • 56. DATA SOURCES http://www.google.com/publicdata/directory
  • 57. DATA SOURCES http://pewresearch.org/databank/datasets/
  • 58. DATA SOURCES http://www.statcan.gc.ca/
  • 59. DATA SOURCES http://www.data.gc.ca/default.asp?lang=En&n=F9B7A1E3-1
  • 60. DATA SOURCES https://explore.data.gov/
  • 61. DATA SOURCES http://data.worldbank.org/
  • 62. PLACES TO GO
  • 63. Source: http://www.informationisbeautiful.net/
  • 64. Source: http://visual.ly/
  • 65. Source: http://www.nytimes.com/pages/multimedia/index.html
  • 66. Source: http://www.guardian.co.uk/data/series/show-and-tell
  • 67. Source: http://www.good.is/infographics
  • 68. Source:http://www.coolinfographics.com/
  • 69. Source: http://visualizing.org/
  • 70. Bringing it home • Becoming “visually literate” – Need to prepare students (and ourselves) to be successful learners. – Infographics encourage creative and informed individuals(Source: http://resourcelinkbce.wordpress.com/2011/07/04/info-what-developing-visual-literacy-through-infographics/)
  • 71. Bringing it home• Prompting Comprehension – Help students want to learn more(Source: http://learning.blogs.nytimes.com/2011/04/08/data-visualized-more-on-teaching-with-infographics/
  • 72. Bringing it home There are three key ways to use Infographics in the classroom: 1. As a source of information 2. As a tool to teach visual and critical literacy 3. As a way for students to express their or others’ data Additional Reading: Teaching With Infographics | A Student Project Model http://learning.blogs.nytimes.com/2010/08/27/teaching-with- infographics-a-student-project-model/(Source: http://resourcelinkbce.wordpress.com/2011/07/04/info-what-developing-visual-literacy-through-infographics/)
  • 73. My Data• Example:• 562,789 Visits to the LRC• 102,202 Hits to our Research Help Guides• 20,925 Questions Answered• 13,818 Book/Media Loans• 264 Instructional Workshops• 88 Research Help Guides• 80 Computer Workstations• 7 Bookable Study Rooms
  • 74. Let’s make an Infographic ????? 562,789 ????? 102,202 ?????Visits to the LRC Research Guide ????? Hits 7 bookable ? study rooms ? = 1000 questions answered