1 / 45

Today ’ s timeline

Today ’ s timeline. In the news - 10 minutes. Intro to Data & Information Graphics - 60 mins. Mobile + Journalism - 45 minutes. Break - 10 minutes. Real-Time Report - 60 minutes. Photoshop for design - now or next week?. Review assignment(s) - Highlights from review

eljah
Download Presentation

Today ’ s timeline

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Today’s timeline • In the news - 10 minutes • Intro to Data & Information Graphics - 60 mins • Mobile + Journalism - 45 minutes • Break - 10 minutes • Real-Time Report - 60 minutes • Photoshop for design - now or next week?

  2. Review assignment(s) - Highlights from review - Highlights from Digital Footprint

  3. Graphics + Web + Data + Journalism Infographics, Data Visualization and Interactives Assistant Professor of Professional Practice Robert Hernandez email: r.hernandez@usc.edu 213.280.5187c | 323.761.9054 Office: 121c

  4. Data Journalism Source: http://www.guardian.co.uk/news/datablog/video/2013/apr/04/what-is-data-journalism-video

  5. Why are Graphics important? • Can communicate complex concepts effectively • Visualizing of info/data can reveal contextual concepts • A mashup of data, design and storytelling

  6. Why are [Web] Graphics important? • Can communicate complex concepts effectively • Visualizing of info/data can reveal contextual concepts • A mashup of data, design and storytelling • Can be presented in an interactive way • Increases engagement and ownership

  7. Defining: in·fo·gra·phic “Information graphics are visual representations of information, data or knowledge often used to support information, strengthen it and present it within a sensitive context.They are specific, context-sensitive and often times hand-crafted.” • Can be static, animated or interactive. Source: Benjamin Wiederkehr, Editor of Datavisualization.ch http://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic

  8. Defining: da·ta vi·su·al·i·za·tion “Data visualizations are visual displays of measured quantities by means of the combined use of a coordination system, points, lines, shapes, digits, letters quantified by visual attributes.They are general, context-free and often times created automatically.” • Can be static, animated or interactive. Source: Benjamin Wiederkehr, Editor of Datavisualization.ch http://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic

  9. Defining: in·ter·ac·tiv·ity “Providing output based on input from the user. This output feeds back into the user's decision process for subsequent interaction. Implying that the user of the software can exert some control over the software, and not just be a passive page-turner recipient.” • Can this be done in other media? NO! Only Web Source: Don Wittekind, assistant professor at the UNC at Chapel Hill

  10. Infographic Examples

  11. Infographic Examples Source: http://thumbnails.visually.netdna-cdn.com/infographics-process_509e119959153.png

  12. Infographic Examples Source: GOOD | http://www.good.is/post/transparency-what-is-the-easiest-way-to-power-a-lightbulb/

  13. Infographic Examples Source: http://www.mediabistro.com/10000words/files/2010/07/shouldilearnprogramming.png

  14. Infographic Examples Source: The Oatmeal | http://theoatmeal.com/comics/misspelling

  15. Infographic Examples Source: foursquare | https://foursquare.com/infographics/10millionhttps://foursquare.com/2010infographic

  16. Infographic Examples Source: http://www.designerinfographics.com/southern-right-whales-infographic.jpg

  17. Infographic Examples Source: WIRED | http://www.wired.com/design/2012/07/you-suck-at-infographics/?utm_campaign=Previous&utm_source=Contextly

  18. Infographic Examples with light interactivity Source: NYTimes | http://elections.nytimes.com/2012/results/president/scenarios

  19. Infographic Examples Source: Tomas Nilsson | http://www.youtube.com/watch?v=-LF5M9nlFQs

  20. Infographic Examples Source: Tomas Nilsson | http://www.youtube.com/watch?v=-LF5M9nlFQs

  21. Data Viz Examples Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/mountains-out-of-molehills/

  22. Data Viz Examples Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/the-billion-dollar-o-gram-2009/

  23. Data Viz Examples Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/the-billion-dollar-o-gram-2009/

  24. Data Viz Examples Source: NYTimes | http://www.nytimes.com/interactive/2009/07/31/business/20080801-metrics-graphic.html

  25. Data Viz Examples Source: NYTimes | http://www.nytimes.com/interactive/2012/08/09/sports/olympics/new-olympic-stars-of-twitter.html?hp

  26. Data Viz Examples Source: Google | http://workshop.chromeexperiments.com/projects/armsglobe/

  27. Data Viz Examples Source: http://www.nytimes.com/interactive/2010/06/29/magazine/rivera-pitches.html?_r=2&

  28. Data Viz Examples Source: http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html?_r=0

  29. Data Viz Examples Source: BBC and Hans Rosling | http://www.youtube.com/watch?v=jbkSRLYSojo

  30. Data Viz Examples Source: BBC and Hans Rosling | http://www.youtube.com/watch?v=jbkSRLYSojo

  31. [ BREAK] Please return in 10 minutes

  32. Assignment #1 Create infographic on neighborhood in district(Photoshop) Must have: Intro text, Pull quote, 2 points of interest, 1 chart/graphic, Photos, Map and Source/Credits. Different neighborhoods.FTP the image (jpg or png) onto your server (ascjweb.com - /graphic/). THEN, post a link to your assignment to this week’s comments. Deadline: Thursday, Feb 27 9AM

  33. Examples

  34. Specs to make one

  35. Title & source Specs to make one [ Intro text ] [ Map fromGoogle Maps ] [ Chart(s) ] Canvas is 1024x768 Photos/Points of interest [ Pullquote ]

  36. Graphic Resources • Mindy McAdams' tutorial on Datahttp://www.jtoolkit.com/data/10,000 Words Blog: Databaseshttp://www.mediabistro.com/10000words/category/database10 Awesome Free Tools To Make Infographicshttp://www.makeuseof.com/tag/awesome-free-tools-infographics/ • Gapminderhttp://www.gapminder.org/ • WeePlaceshttp://www.weeplaces.com/

  37. Graphic Resources • Nathan Yau's FlowingDatahttp://flowingdata.com/Information Is Beautifulhttp://www.informationisbeautiful.net/Chart Pornhttp://chartporn.org/ • Data Visualizationhttp://datavisualization.ch/ • Coolinfographics.comhttp://www.coolinfographics.com/

  38. Assignment 2: Start working on Midterm Multimedia / Story Package 1 Minimum 800 words and one two-minute Webby element. Both must relate to your beat (if you have one) and located within your district. More details: http://elprofe.me/usc/2014/spring/518/midterm/Post the URL to blog post’s comments. Deadline: Thursday, March 13 9AM

  39. Assistant Professor of Professional Practice Robert Hernandez email: r.hernandez@usc.edu twitter: @webjournalist 213.280.5187c | 323.761.9054 Office: 121c

  40. Interactivity Examples Source: Discovery | http://dsc.discovery.com/convergence/titanic/technology/technology.html

  41. Interactivity Examples Source: El Mundo | http://www.elmundo.es/elmundo/2005/graficos/abr/s2/casa_25.html

  42. Interactivity Examples Source: Sun-Sentinel| http://www.sun-sentinel.com/broadband/theedge/sfl-edge-t-canemaker,0,4142989.flash

  43. Interactivity Examples Source: BBC| http://news.bbc.co.uk/2/shared/spl/hi/uk/06/electricity_calc/html/1.stm

  44. Interactivity Examples Source: Marketplace | http://www.marketplace.org/topics/economy/budget-hero

  45. Interactivity Examples Source: KQED | http://blogs.kqed.org/lowdown/2013/11/12/traffic-waves

More Related