1. UFCEP6-20-3 Internet Application Development
Rob Stephens
2P27

2. Data visualization Data journalism Representation Presentation
Interaction
Data journalism

3. Created by Duncan Rickelton
The power of information
Created by Duncan Rickelton

4. Goals of Information Visualization
Make large datasets coherent
(Present huge amounts of information compactly)
Present information from various viewpoints
Present information at several levels of detail
(from overviews to fine structure)
Support visual comparisons
Tell stories about the data

5. Data visualization
A visualization of Adam Perer’s Facebook social network. By running a clustering algorithm on top of the network, seven meaningful communities of friends were found representing different facets of his life. Without clustering, the network was too tangled to provide any meaning.
digital distraction

6. Some examples of data visualization
Napolean’s March (graph)
Weather Map (spatial, overlays)
A Century of Meat (timeline, annotated sections)  
Baby Name Voyager (interactive visualization)
Periodic Table (classification) Periodic Table of Desserts
The French engineer, Charles Minard ( ), illustrated the disastrous result of Napoleon's failed Russian campaign of The graph shows the size of the army by the width of the band across the map of the campaign on its outward and return legs, with temperature on the retreat shown on the line graph at the bottom. Many consider Minard's original the best statistical graphic ever drawn.
(interactive visualization) where you can modify/filter data and interact with visualization in real time)

7. Principles of Graphical Excellence
Tufte
Principles of Graphical Excellence
Graphical excellence
is the well-designed presentation of interesting data – a matter of substance, of statistics, and of design
consists of complex ideas communicated with clarity, precision and efficiency
is that which gives to the viewer the greates number of ideas in the shortest time with the least ink in the smallest space
is nearly always multivariate
requires telling the truth about the data.

8. Design Principles for Graphical Integrity
The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities represented.
Clear, detailed, and thorough labeling should be used to defeat graphical distortions and ambiguity. Write out explanations of the data on the graphic itself. Label important events in the data.
Show data variation, not design variation.
The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data.
Graphics must not quote data out of context.

9. This tourist map of Rome is an example of the “pack everything in” school of (non)information design.

10. Like any map, diagram, or statistical graphic with less than the full amount of information available, it is literally “incomplete”. If the information sets are too dense, a hierarchy of needs must be established to constrain the breadth of information so that the graphic communicates what can be clearly understood.

11. Design classic or Ideal Type
In 1931 Harry Beck designed the London Underground Map. He realized that, without reference to the urban landscape, the distance between stops is experientially uniform, almost abstract. So, it is fair to say that as clues to geographic reality disappear, so does the sense of time and distance. Beck’s map, therefore, its critics notwithstanding, was an early visualization of a truly modern (that is, beginning in the late 19th century) movement experience.
What he also realized—perhaps more important— is that the experiential reality of London’s Tube system is a different reality than walking around London, in terms of time, space, units of measurement, and user control. You need to know where you are starting, where want to go, and (in this case) which train to take. Unlike walking, you have limited choices and no orienting scenery; unlike flying, you can choose, within limits, when to get off.

12. three different ways of mapping the London Underground—the Beckian, the geographic, and the Noad hybrid. What they do not show is the relative efficiency of the three approaches. The comparisons at right, showing the entire Underground network at the same width, reveals that the most diagrammatic is the most efficient at showing the congested center of London at the largest scale and with the largest type size.

14. What the tube maps do not show is the relative efficiency of the three approaches. The comparisons at right, showing the entire Underground network at the same width, reveals that the most diagrammatic is the most efficient at showing the congested center of London at the largest scale and with the largest type size.

15. What the tube maps do not show is the relative efficiency of the three approaches. The comparisons at right, showing the entire Underground network at the same width, reveals that the most diagrammatic is the most efficient at showing the congested center of London at the largest scale and with the largest type size.

16. What the tube maps do not show is the relative efficiency of the three approaches. The comparisons at right, showing the entire Underground network at the same width, reveals that the most diagrammatic is the most efficient at showing the congested center of London at the largest scale and with the largest type size.

17. Pie Charts – some issues & alternatives
Pie Charts are now fairly ubiquitous,
Typically used for part – to whole relationships
Some issues
Brain is working to convert 360 to a 10-base.
Difficult to compare similar sized segments
Don’t handle more than 4 or 5 values well
Eye constantly moving to & from the legend
In many cases ranked bars will work better

18. Pie Charts – some issues & alternatives
Ranked bars really only alternative for longer lists

19. Pie Charts – some issues & alternatives
more information per pixel
Multiple Pie Charts to show change particularly difficult to read

20. Design principles
Proximity
Alignment
Repetition
Contrast

21. Proximity
Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

22. Alignment
Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity.

23. Repetition
Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity.

24. Contrast
The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page-it's what makes a reader look at the page in the first place.

25. Flint Hahn: Burning Man infographic

26. Power of information visualization
Illustration of John Snow’s
deduction that a cholera epidemic
was caused by a bad water pump, circa 1854.
Deaths plotted on map.

27. Power of information visualization
Showed that all Cholera cases used the same water pump.
Established that Cholera was a water-borne disease
Source: Visual Explanations by Edward Tufte, Graphics Press, 1997

28. Data journalism Filtering the Flow of Data
New Approaches to Storytelling
Like Photo Journalism with a Laptop
A Remedy for Information Asymmetry
An Answer to Data-Driven PR
Providing Independent Interpretations of Official Information
Dealing with the Data Deluge
See Things You Might Not Otherwise See
Way To Tell Richer Stories
David McCandless, Information is Beautiful

29. Examples of data journalism
MPs expenses
Las Vegas Sun (interactive graph)
Full-Text Visualization of the Iraqi War Logs
Chartball
Eurozone debt web
The Guardian – Reading the riots (Twitter riots interactive)

30. Data journalism Guardian Open Platform
Visual Analytics for Exploring and Understanding Document Collections
Thomson Reuters OpenCalais service
Data-driven journalism
Data Journalism Handbook

31. Data Journalism at the BBC
Enable a reader to discover information that is personally relevant
Reveal a story that is remarkable and previously unknown
Help the reader to better understand a complex issue
Visualization essential
Examples of personalization
School league tables
Road traffic accidents using police statistics
Live London crash map (#crash24)
Economy tracker - unemployment

32. Visualization data
Sites which allow registered users to share data sets and provide data visualization facilities.
ManyEyes
GeoCommons
Gapminder
Check Blackboard Example Toolsets
Using APIs
mySociety Feeds & APIs
Opening up government
Guardian datablog
Information graphics
Released April 2010, the open graph protocol enables you to integrate your web pages into the social graph. Currently designed for web pages representing profiles of real world things (films, sport teams, celebrities, restaurants). Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook pages. Based on the structured data you provide via the OPEN GRAPH protocol, you pages show up richly across Facebook: in user profiles, within search results and in News Feed.