Data Visualisation for Data journalism at Melbourne University

1,566 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,566
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Data Visualisation for Data journalism at Melbourne University

  1. 1. Data Visualisation Ben Hosken ben@flinklabs.com @flinklabs
  2. 2. Melbourne trains
  3. 3. Mobile phone locations
  4. 4. Shopping Trolley Movement
  5. 5. Service Navigation
  6. 6. Social Networks
  7. 7. F1 Racing
  8. 8. Sin in Melbourne
  9. 9. Housing and real estate
  10. 10. Introduction
  11. 11. Interactive visual representationof data to improve cognition
  12. 12. It is not new
  13. 13. Data telling stories
  14. 14. Exploration and Engagement
  15. 15. Good and Bad
  16. 16. Visual Cortex FTW
  17. 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. 18. 3 Vs of Big Data Velocity Volume Variety
  19. 19. Accelerating power
  20. 20. Changing expectations
  21. 21. Consumer devices leading the way
  22. 22. Tells a story you can interact with
  23. 23. Data visualisation turnssomething you want to find intosomething you can see - J Stray
  24. 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. 25. The Reality
  26. 26. Where to start
  27. 27. Audience ?
  28. 28. What is the purpose!
  29. 29. Multi-faceted team
  30. 30. Data’s Journey
  31. 31. Tell the story don’t just show the data
  32. 32. 1000s of stories
  33. 33. Draw the viewer into the data
  34. 34. Data
  35. 35. Big data often means big mess
  36. 36. Toiling in the Data Mines
  37. 37. Not just the averages
  38. 38. Anscombe’s Quartet
  39. 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. 40. Get the basics right
  41. 41. Don’t deceive with the data 1
  42. 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. 43. Data Sources
  44. 44. Tools
  45. 45. Design for DataVisualisation
  46. 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. 47. Points, lines and planes
  48. 48. Do they remind you of anything? BIG HINT!!! Points Lines Planes
  49. 49. Scale is relative
  50. 50. Issues with Colour
  51. 51. Issues with Colour
  52. 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. 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. 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. 55. Visual EncodingForm Orientation Line Length Line Width Size Shape Curvature Enclosure MotionColour Intensity Hue Position 2-D Grouping S Few
  56. 56. Gestalt Principles of Visual Perception Similarity Similarity Connection Continuity Closure Enclosure Proximity Proximity Proximity
  57. 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. 58. Driving and data
  59. 59. Demos
  60. 60. An Example - AFL Flags http://www.flinklabs.com/projects/afl/aflflags.html
  61. 61. An Example - AFL Flags
  62. 62. Concept sketches
  63. 63. Climate Skeptics Network http://www.flinklabs.com/clients/democracy/
  64. 64. Live Where? http://www.flinklabs.com/projects/livewhere
  65. 65. Doing it Yourself
  66. 66. Raphael.js
  67. 67. Processing
  68. 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. 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. 70. ResourcesShow me the numbers - Stephen FewGuide to Information Graphics - Dona Wong
  71. 71. Inspiration
  72. 72. Hans Rosling Video
  73. 73. Data visualisation often showsyou answers to questions you didn’t know you had

×