1. Today ’ s timeline Intro to Data & Information Graphics - 60 mins Mobile + Journalism - 45 minutes Break - 10 minutes In the news - 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.edur.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-videohttp://www.guardian.co.uk/news/datablog/video/2013/apr/04/what-is-data-journalism-video

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

6. Visualizing of info/data can reveal contextual concepts Can communicate complex concepts effectively A mashup of data, design and storytelling Can be presented in an interactive way Why are [Web] Graphics important? 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. ” Source: Benjamin Wiederkehr, Editor of Datavisualization.ch http://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic Can be static, animated or interactive.

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. ” Source: Benjamin Wiederkehr, Editor of Datavisualization.ch http://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic Can be static, animated or interactive.

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. ” Source: Don Wittekind, assistant professor at the UNC at Chapel Hill Can this be done in other media? NO! Only Web

10. Infographic Examples

11. Source: http://thumbnails.visually.netdna-cdn.com/infographics-process_509e119959153.pnghttp://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/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.pnghttp://www.mediabistro.com/10000words/files/2010/07/shouldilearnprogramming.png

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

15. Infographic Examples Source: foursquare | https://foursquare.com/infographics/10million https://foursquare.com/2010infographichttps://foursquare.com/infographics/10million

16. Infographic Examples Source: http://www.designerinfographics.com/southern-right-whales-infographic.jpghttp://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=Contextlyhttp://www.wired.com/design/2012/07/you-suck-at- infographics/?utm_campaign=Previous&utm_source=Contextly

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

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

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

21. Data Viz Examples Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/mountains- out-of-molehills/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/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/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.htmlhttp://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?hphttp://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/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&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=0http://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=jbkSRLYSojohttp://www.youtube.com/watch?v=jbkSRLYSojo

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

31. [ BREAK] Please return in 10 minutes

32. 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. Create infographic on neighborhood in district (Photoshop) Assignment #1 Deadline: Thursday, Feb 27 9AM

33. Examples

34. Specs to make one

35. Canvas is 1024x768 Title & source [ Intro text ] [ Map from Google Maps ] [ Pullquote ] [ Chart(s) ] Photos/Points of interest

36. Graphic Resources Mindy McAdams' tutorial on Data http://www.jtoolkit.com/data/ 10,000 Words Blog: Databases http://www.mediabistro.com/10000words/category/data base 10 Awesome Free Tools To Make Infographics http://www.makeuseof.com/tag/awesome-free-tools- infographics/ http://www.jtoolkit.com/data/000words/category/data base 10 Awesome Free Tools To Mak Gapminder http://www.gapminder.org/gapminder.org/ WeePlaces http://www.weeplaces.com/ WeePlaces http://www.weeplaces.com/

37. Graphic Resources Nathan Yau's FlowingData http://flowingdata.com/ Information Is Beautiful http://www.informationisbeautiful.net/ Chart Porn http://chartporn.org/ http://flowingdata.com/sbeautiful.net/ Chart Porn http://char Data Visualization http://datavisualization.ch/ation.ch/ Coolinfographics.com http://www.coolinfographics.com/ Coolinfogr/

38. Multimedia / Story Package 1 Assignment 2: Start working on Midterm Deadline: Thursday, March 13 9AM 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.http://elprofe.me/usc/2014/spring/518/midterm/

39. Assistant Professor of Professional Practice Robert Hernandez email: r.hernandez@usc.edur.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.htmlhttp://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.htmlhttp://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.flashhttp://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.stmhttp://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-herohttp://www.marketplace.org/topics/economy/budget-hero

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