Today ’ s timeline
description
Transcript of Today ’ s timeline
![Page 1: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/1.jpg)
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?
![Page 2: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/2.jpg)
Review assignment(s)- Highlights from review
- Highlights from Digital Footprint
![Page 3: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/3.jpg)
Graphics + Web + Data + Journalism
Infographics, Data Visualization and Interactives
Assistant Professor of Professional PracticeRobert Hernandez
email: [email protected] | 323.761.9054
Office: 121c
![Page 4: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/4.jpg)
Data Journalism
Source: http://www.guardian.co.uk/news/datablog/video/2013/apr/04/what-is-data-journalism-video
![Page 5: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/5.jpg)
Why are Graphics important?
• Visualizing of info/data can reveal contextual concepts
• Can communicate complex concepts effectively
• A mashup of data, design and storytelling
![Page 6: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/6.jpg)
• 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
![Page 7: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/7.jpg)
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.chhttp://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic
• Can be static, animated or interactive.
![Page 8: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/8.jpg)
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.chhttp://www.quora.com/What-is-the-difference-between-a-data-visualization-and-an-infographic
• Can be static, animated or interactive.
![Page 9: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/9.jpg)
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
![Page 10: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/10.jpg)
Infographic Examples
![Page 11: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/11.jpg)
Infographic Examples
Source: http://thumbnails.visually.netdna-cdn.com/infographics-process_509e119959153.png
![Page 12: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/12.jpg)
Infographic Examples
Source: GOOD | http://www.good.is/post/transparency-what-is-the-easiest-way-to-power-a-lightbulb/
![Page 13: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/13.jpg)
Infographic Examples
Source: http://www.mediabistro.com/10000words/files/2010/07/shouldilearnprogramming.png
![Page 14: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/14.jpg)
Infographic Examples
Source: The Oatmeal | http://theoatmeal.com/comics/misspelling
![Page 15: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/15.jpg)
Infographic Examples
Source: foursquare | https://foursquare.com/infographics/10million https://foursquare.com/2010infographic
![Page 16: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/16.jpg)
Infographic Examples
Source: http://www.designerinfographics.com/southern-right-whales-infographic.jpg
![Page 17: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/17.jpg)
Infographic Examples
Source: WIRED | http://www.wired.com/design/2012/07/you-suck-at-infographics/?utm_campaign=Previous&utm_source=Contextly
![Page 18: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/18.jpg)
Infographic Examples
Source: NYTimes | http://elections.nytimes.com/2012/results/president/scenarios
with light interactivity
![Page 19: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/19.jpg)
Infographic Examples
Source: Tomas Nilsson | http://www.youtube.com/watch?v=-LF5M9nlFQs
![Page 20: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/20.jpg)
Infographic Examples
Source: Tomas Nilsson | http://www.youtube.com/watch?v=-LF5M9nlFQs
![Page 21: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/21.jpg)
Data Viz Examples
Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/mountains-out-of-molehills/
![Page 22: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/22.jpg)
Data Viz Examples
Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/the-billion-dollar-o-gram-2009/
![Page 23: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/23.jpg)
Data Viz Examples
Source: Information is Beautiful | http://www.informationisbeautiful.net/visualizations/the-billion-dollar-o-gram-2009/
![Page 24: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/24.jpg)
Data Viz Examples
Source: NYTimes | http://www.nytimes.com/interactive/2009/07/31/business/20080801-metrics-graphic.html
![Page 25: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/25.jpg)
Data Viz Examples
Source: NYTimes | http://www.nytimes.com/interactive/2012/08/09/sports/olympics/new-olympic-stars-of-twitter.html?hp
![Page 26: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/26.jpg)
Data Viz Examples
Source: Google | http://workshop.chromeexperiments.com/projects/armsglobe/
![Page 27: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/27.jpg)
Data Viz Examples
Source: http://www.nytimes.com/interactive/2010/06/29/magazine/rivera-pitches.html?_r=2&
![Page 28: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/28.jpg)
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
![Page 29: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/29.jpg)
Data Viz Examples
Source: BBC and Hans Rosling | http://www.youtube.com/watch?v=jbkSRLYSojo
![Page 30: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/30.jpg)
Data Viz Examples
Source: BBC and Hans Rosling | http://www.youtube.com/watch?v=jbkSRLYSojo
![Page 31: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/31.jpg)
[ BREAK]Please return in 10 minutes
![Page 32: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/32.jpg)
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
![Page 33: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/33.jpg)
Examples
![Page 34: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/34.jpg)
Specs to make one
![Page 35: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/35.jpg)
Specs to make one
Canvas is 1024x768
Title & source
[ Intro text ]
[ Map fromGoogle Maps ]
[ Pullquote ]
[ Chart(s) ]
Photos/Points of interest
![Page 36: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/36.jpg)
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/
![Page 37: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/37.jpg)
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/
![Page 38: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/38.jpg)
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.
![Page 39: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/39.jpg)
Assistant Professor of Professional PracticeRobert Hernandez
email: [email protected]: @webjournalist
213.280.5187c | 323.761.9054Office: 121c
![Page 40: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/40.jpg)
Interactivity Examples
Source: Discovery | http://dsc.discovery.com/convergence/titanic/technology/technology.html
![Page 41: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/41.jpg)
Interactivity Examples
Source: El Mundo | http://www.elmundo.es/elmundo/2005/graficos/abr/s2/casa_25.html
![Page 42: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/42.jpg)
Interactivity Examples
Source: Sun-Sentinel| http://www.sun-sentinel.com/broadband/theedge/sfl-edge-t-canemaker,0,4142989.flash
![Page 43: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/43.jpg)
Interactivity Examples
Source: BBC| http://news.bbc.co.uk/2/shared/spl/hi/uk/06/electricity_calc/html/1.stm
![Page 44: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/44.jpg)
Interactivity Examples
Source: Marketplace | http://www.marketplace.org/topics/economy/budget-hero
![Page 45: Today ’ s timeline](https://reader035.fdocuments.net/reader035/viewer/2022062517/56813e7c550346895da8a86f/html5/thumbnails/45.jpg)
Interactivity Examples
Source: KQED | http://blogs.kqed.org/lowdown/2013/11/12/traffic-waves