Data Visualisation for Data journalism at Melbourne University

  • 987 views
Uploaded on

Guest lecture on data visualisation to students studying data journalism at Melbourne University.

Guest lecture on data visualisation to students studying data journalism at Melbourne University.

More in: Technology
  • 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
987
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
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

Transcript

  • 1. Data Visualisation Ben Hosken ben@flinklabs.com @flinklabs
  • 2. Melbourne trains
  • 3. Mobile phone locations
  • 4. Shopping Trolley Movement
  • 5. Service Navigation
  • 6. Social Networks
  • 7. F1 Racing
  • 8. Sin in Melbourne
  • 9. Housing and real estate
  • 10. Introduction
  • 11. Interactive visual representationof data to improve cognition
  • 12. It is not new
  • 13. Data telling stories
  • 14. Exploration and Engagement
  • 15. Good and Bad
  • 16. Visual Cortex FTW
  • 17. Accelerating data 48 hours of video every minute. 35,000 “likes” every minute. 175 million tweets every day. 30B FB shares each month.
  • 18. 3 Vs of Big Data Velocity Volume Variety
  • 19. Accelerating power
  • 20. Changing expectations
  • 21. Consumer devices leading the way
  • 22. Tells a story you can interact with
  • 23. Data visualisation turnssomething you want to find intosomething you can see - J Stray
  • 24. Data Visualisation Process Define Data Design Develop DeliverDefine the problem and Gather the Data Brainstorm ideas Develop "architecture Deliver final producthigh level goals Load and explore data Sketch rough designs tracer bullet" Install softwareAgree on scope and Produce data patterns Create concepts Code iterations of product Handover to clienttimings Identify potential narrative Develop interactive Test and resolve issues Prepare support channelsUnderstand the target "hot spots" prototypes Conduct final QA Launch visualisationaudience and platforms Discuss with target Present alternatives Conduct post mortemKick off project audience
  • 25. The Reality
  • 26. Where to start
  • 27. Audience ?
  • 28. What is the purpose!
  • 29. Multi-faceted team
  • 30. Data’s Journey
  • 31. Tell the story don’t just show the data
  • 32. 1000s of stories
  • 33. Draw the viewer into the data
  • 34. Data
  • 35. Big data often means big mess
  • 36. Toiling in the Data Mines
  • 37. Not just the averages
  • 38. Anscombe’s Quartet
  • 39. Maths - Triple M + RMean, median and mode are three kinds of “averages”.Let’s use this set of numbers as an example 13, 18, 13, 14, 13, 16, 14, 21, 13The mean is the "average" youre used to, where you add up all the numbersand then divide by the number of numbers.(13 + 18 + 13 + 14 + 13 + 16 + 14 + 21 + 13) ÷ 9 = 15The median is the "middle" value in the list of numbers. To find the median,your numbers have to be listed in numerical order, so you may have to rewriteyour list first.13, 13, 13, 13, 14, 14, 16, 18, 21The mode is the value that occurs most often. If no number is repeated, thenthere is no mode for the list.13 occurs 4 times. 14 occurs twice and the rest occur once. So 13 is themode.And the range is the difference between the largest and smallest values.
  • 40. Get the basics right
  • 41. Don’t deceive with the data 1
  • 42. Don’t deceive with the data 2 Q1 Q2 Q3 Q4 Sales $195,000 $196,000 $197,000 $202,000 Hockey Stick Growth Flat Growth $202,000 $220,000 $200,000 $165,000 $198,000 $110,000 $196,000 $55,000 $194,000 $0 Q1 Q2 Q3 Q4 Q1 Q2 Q3 Q4 Sales Sales
  • 43. Data Sources
  • 44. Tools
  • 45. Design for DataVisualisation
  • 46. What is design?Design is a set of decisions about a product. It’snot an interface or aesthetic, a brand or colour.Design is the actual decisions. - Rebecca Cox
  • 47. Points, lines and planes
  • 48. Do they remind you of anything? BIG HINT!!! Points Lines Planes
  • 49. Scale is relative
  • 50. Issues with Colour
  • 51. Issues with Colour
  • 52. Author vs Viewer Driven Martini Glass Author driven, linear narrative initially Opens up to viewer driven at end Tell a story then exploration e.g. Interactive news Interactive Slideshow Balance of author and viewer driven Exploration at each stage Primarily linear narrative Drill Down Story Viewer driven narrative Initial high level overview Viewer then drills into detail e.g. Interactive map
  • 53. Count the number of 5s 7 6 2 7 8 7 3 2 3 6 7 7 5 8 2 3 7 1 5 6 8 6 0 0 9 7 4 8 5 8 5 4 1 4 3 5 7 7 0 3 3 4 0 2 3 6 8 1 7 3 8 3 1 8 2 3 7 9 8 1 0 1 4 9 9 3 0 7 8 6 6 8 6 8 6 3 8 3 5 0 7 7 6 2 8 7 1 4 6 1 9 7 7 6 3 5 0 8 0 5 8 1 2 1 5 1 8 0 9 3
  • 54. Count the number of 5s 7 6 2 7 8 7 3 2 3 6 7 7 5 8 2 3 7 1 5 6 8 6 0 0 9 7 4 8 5 8 5 4 1 4 3 5 7 7 0 3 3 4 0 2 3 6 8 1 7 3 8 3 1 8 2 3 7 9 8 1 0 1 4 9 9 3 0 7 8 6 6 8 6 8 6 3 8 3 5 0 7 7 6 2 8 7 1 4 6 1 9 7 7 6 3 5 0 8 0 5 8 1 2 1 5 1 8 0 9 3
  • 55. Visual EncodingForm Orientation Line Length Line Width Size Shape Curvature Enclosure MotionColour Intensity Hue Position 2-D Grouping S Few
  • 56. Gestalt Principles of Visual Perception Similarity Similarity Connection Continuity Closure Enclosure Proximity Proximity Proximity
  • 57. Maps and Geo Just because it is a location doesn’t mean it is best shown as a map. Population New South Wales Victoria Queensland Western Australia South Australia Tasmania Australian Capital Territory Northern Territory 0 2,000,000 4,000,000 6,000,000 8,000,000 Compared to Victoria New South Wales State/Territory Population Queensland New South Wales 7,247,700 Victoria 5,574,500 Western Australia Queensland 4,513,000 South Australia Western Australia 2,387,200 South Australia 1,645,000 Tasmania Tasmania 511,700 Australian Capital Territory 370,700Australian Capital Territory Northern Territory 232,400 Northern Territory Australia 22,485,300 -100% -75% -50% -25% 0% 25% 50%
  • 58. Driving and data
  • 59. Demos
  • 60. An Example - AFL Flags http://www.flinklabs.com/projects/afl/aflflags.html
  • 61. An Example - AFL Flags
  • 62. Concept sketches
  • 63. Climate Skeptics Network http://www.flinklabs.com/clients/democracy/
  • 64. Live Where? http://www.flinklabs.com/projects/livewhere
  • 65. Doing it Yourself
  • 66. Raphael.js
  • 67. Processing
  • 68. Google Fusion Tables About Fusion Ta bles Search Sea rch this site Ex ample Galle ry Help Fusion Tables New Features Example Galle Tour The applicat ion | Using the API | Any shape bo ry Video Gallery Demographics undaries | Info-r | Businesses ich windows | Ma Example Galle king data work ry | Data gatherin g | Crisis Respon Tutorials se | Talks & Papers Request a featur e Fusion Tables AP I Follow @Google FT on Twitter Tell th e story with data The Guardian Da Host data on lin taBlog maps rio e locations and su t Australia offers spect s addresse government da Gath er data in context of socia s in tasets realtime l factors. See sit online in Fusion Google election e. How it Tables format. coverage hand was done Cit izens can vie realtime data up led w, filt er and do dates during the hosted data wit wnload Iowa h just a browser. GOP primary to See site. deliver result s du night as ballots ring the were counted. How it was done See site. Simple in fograp hics with Fu sio n Tables Troop levels ov er time The Al Jazeera tim eline shows ho have changed in w troop lev els in Wh os hacking the last ten years Afghanistan ? . See site. You can visualize data right from Hacking Incide your Fusion Ta nt Database (W ble data. The We HID) provides inf b statistical analy ormation for sis of web appli cat ions security incidents. See sit e. Use th e Fu sio n Tables APIs Local newspa pers, worldwi Find a local pape de r and read it in Look at Cook language. See sit your own Explore Cook Co e. untys budget fro Sh are bike tra m 1993 ils to 2011 and lea Share your GPS rn how the mo tracks wit h oth spent. See site. ney is being er mountain biking enthusiasts by the table itself. editing See site. How it w
  • 69. D3 Examples Documentation Source en Documents ​ Overview Data-Driv les . See more examp to you bring data on data. D3 helps nipulating do cuments based ities of ript library for ma the full capabil ards gives you D3.js is a JavaSc is on web stand ualization , SVG and CS S. D3’s emphas ining powerful vis life using HTML mework, comb yourself to a proprietary fra rs without tying tion. modern browse to DOM manipula driven approach compon ents and a data- est version here: Download the lat ment d3.v2.js - develop uction (minified) d3.v2 .min.js - prod s snippet: release, copy thi tly to the latest Or, to link direc ipt> v2.js"></scr "http:// d3js.org/d3. <script src= . load on GitHub s are also av ailable for down The full sour ce and example als. Read more tutori # Introduction Model (DOM), an d then apply da ta-driven cument Object le from an bind arbitrary da ta to a Do rate an HTML tab D3 allows you to use D3 to gene ample, you can ooth cument. For ex bar chart with sm transformations to the do interactive SVG me da ta to create an . Or, use the sa array of numbers eraction. solves transitions and int ture. Instead, D3 conceivable fea that seeks to provide every pr oprietary lithic framework ta. This avoids D3 is not a mono nts based on da tion of docume bilities of web sta ndards icient manipula the crux of the problem: eff sing the full capa ordinary flexibility, expo ly fast, supp orting large and affords extra d, D3 is extreme representation minimal overhea le allows code HTML 5 and SVG. With animation. D3 ’s functional sty such as CSS3, for interaction and namic behaviors ts and plugins. datasets and dy on of componen diverse collecti reuse through a t selections. Read more abou # Selections thod names are verbose, and the tedious: the me ple, to 3C DOM API is state. For exam nts using the W of temporary Mo difying docume nual iteration and bookkeeping oach requires ma imperative appr raph elements: t color of parag change the tex "); ByTagName("p .getElements hs = document i++) { var paragrap aphs.length; 0; i < paragr for (var i = paragraphs.i tem(i); te", null);
  • 70. ResourcesShow me the numbers - Stephen FewGuide to Information Graphics - Dona Wong
  • 71. Inspiration
  • 72. Hans Rosling Video
  • 73. Data visualisation often showsyou answers to questions you didn’t know you had