Malofiej 23 - Show Don't Tell Workshop

Transcript

1. From Hide and Seek to Scrollitelling The Past, Present and Future Of Interactive Graphics Geoff McGhee Show, Don’t Tell – Malofiej 23 March 17, 2015 gmcghee@stanford.edu @mcgeoff Title of Section Headline of Graphic Menu to more graphics... Navigation menu Item Two Another Item Title of Section Headline of Graphic Menu to more graphics... 1 2 3 4 2. Headline of Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus cursus leo, et facilisis ante hendrerit et. Aliquam nunc mauris, ultricies eu dapibus sed, suscipit eget quam. Proin cursus molestie dictum. Nam lorem erat, eleifend ut convallis nec, dapibus nec mauris. NEXT »
2. Some History
3. Ok, More Recent History
4. Screens Were Smaller ! • Excitement of “interactive” graphics and multimedia • But what constituted interactivity back then? And Newspapers Were Bigger BACK IN THE DAY – THE EARLY 2000S
5. Adapting Print Graphics How Would You Post These Online?
6. Jaime Serra/Clarín
7. John Grimwade/Condé Nast Traveler
8. To this?
9. Tyranny of the 640x480 Screen Below the Scroll? There Be Dragons How did we navigate pages that didn’t fit in the screen? BACK IN THE DAY – THE EARLY 2000S
10. CLICKING
11. CLICKING
12. CLICKING
13. The Necessity of Clicking, Often
14. How Do We Avoid This?
15. From Print to Web “Slicing and Dicing” to Fit a Small, Standard Format Techniques • As long as user has to click anyway… • Create internal navigation for graphic • Everything must fit in viewable area BACK IN THE DAY – THE EARLY 2000S
16. From Print to Web Techniques • Stacked nav on side, or a “stepper” • Overlaying with clickable numbers • Splitting into multiple panes or tabs “Slicing and Dicing” to Fit a Small, Standard Format Title of Section Headline of Graphic Menu to more graphics... Menu to more graphics... Navigation menu Item Two Another Item Title of Section Headline of Graphic Menu to more graphics... Title of Section Headline of Graphic Navigation menu Item Two Another Item TAB ONE TAB TWO TAB THREE 1 2 3 4 2. Headline of Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus cursus leo, et facilisis ante hendrerit et. Aliquam nunc mauris, ultricies eu dapibus sed, suscipit eget quam. Proin cursus molestie dictum. Nam lorem erat, eleifend ut convallis nec, dapibus nec mauris. NEXT » 600px 400px BACK IN THE DAY – THE EARLY 2000S
17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar, mauris sit amet interdum feugiat, nibh eros elementum turpis, ut lobortis lorem neque nec dui. Fusce convallis ipsum vitae nunc sodales pharetra. Aliquam ac ipsum quam. Phasellus imperdiet, purus facilisis egestas porta, libero augue sagittis magna, in feugiat felis nibh sit amet leo. Sed malesuada scelerisque adipiscing. Nulla semper erat eu dui posuere vestibulum. Fusce egestas felis mauris. Donec rhoncus, turpis eu blandit mollis, mi erat semper turpis, vel commodo tortor mi sed nulla. Quisque euismod blandit ante eget posuere. Nulla at massa id est pulvinar sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse hendrerit elit eget eros dignissim id ullamcorp- er enim dictum. Pellentesque ultricies nisi in arcu lacinia convallis. Ut sollicitudin mollis elit, nec ornare leo convallis quis. Duis scelerisque purus ac dui aliquam facilisis. Sed sed metus vitae quam faucibus dignissim a in massa. Pellen- tesque vel enim vitae nibh tincidunt vulputate. Morbi sagittis hendrerit ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus cursus leo, et facilisis ante hendrerit et. Aliquam nunc mauris, ultricies eu dapibus sed, suscipit eget quam. Proin cursus molestie dictum. Nam lorem erat, eleif- end ut convallis nec, dapibus nec mauris. Maecenas fermen- tum ultrices neque a pretium. Ut sollicitudin, nisi et tristique semper, mauris turpis posuere sapien, ac porta nibh mi et enim. Ut suscipit orci ut nisl mattis tempor. Curabitur vestib- ulum aliquam purus eget venenatis. Phasellus scelerisque, tellus id rutrum vehicula, sapien enim dictum massa, sit amet pharetra nibh lorem sed ante. Morbi et nunc vel magna dictum semper eu at justo. Proin faucibus, ligula nec venenatis dapibus, risus lorem suscipit magna, non sagittis sem ligula ut tortor. Praesent porttitor dictum justo quis iaculis. Phasellus nulla diam, luctus ornare vestibulum id, rutrum et lectus. Donec eget massa eu justo Headline of Article Morbi hendrerit rutrum massa vel suscipit. Aliquam hendrerit facilisis arcu nec malesuada. Nulla sed auctor libero. Maecenas non quam ac enim tempor commodo. Nullam magna leo, pretium sed AD AD AD AD “Slicing and Dicing” to Fit a Small, Standard Format From Print to Web Title of Section Headline of Graphic Menu to more graphics... Menu to more graphics... Navigation menu Item Two Another Item Title of Section Headline of Graphic Menu to more graphics... Title of Section Headline of Graphic Navigation menu Item Two Another Item TAB ONE TAB TWO TAB THREE 1 2 3 4 2. Headline of Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus cursus leo, et facilisis ante hendrerit et. Aliquam nunc mauris, ultricies eu dapibus sed, suscipit eget quam. Proin cursus molestie dictum. Nam lorem erat, eleifend ut convallis nec, dapibus nec mauris. NEXT » 600px 400px Fixed-size “Popup” windows float above article page BACK IN THE DAY – THE EARLY 2000S
19. Interactive graphics as storyboards
20. Interactivity = Discovery Interactivity = Work
21. Interactivity = Revealing Interactivity = Hidden
22. Problem #1: Hidden Content Too Many Choices?
23. Where to click?
24. Too much navigation
25. FOMO Fear of Missing Out
26. Problem #1: Hidden Content Solution: the “stepper” 1 2 3
27. But What Did We Rely On?
28. But What Did We Rely On?
29. The Stepper: Revealing the Path • Numbered buttons (or mute bullet symbols) make it easy to advance, or select story points at random • Compact – don’t occupy much space • But what does “2” mean? • Buries material: what happens when you update content in “3”? • Buttons come at a cost: when presentation stops, some users leave rather than clicking a “next” button • Also, too much…
 As Easy as – But There Are Limitations 1 2 3
30. CLICKING
31. CLICKING
32. CLICKING
33. Too much clicking Problem #2
34. The solution? Problem #2
35. Fast Forward to the Present • PC screen sizes increase • Smartphones and tablets appear • Mobile devices bring Hi DPI “retina” screens… increasingly finding their way to PCs • Embedded fonts mean better type options • “Interactivity” not always necessary or on offer, especially for hard news/breaking news • Cross-device “responsive design” has sapped resources for adding interactivity Digital Experience is More Print-Like
36. Reuters
37. Fast Forward to the Present • PC screen sizes increase • Smartphones and tablets appear • Mobile devices bring Hi DPI “retina” screens… increasingly finding their way to PCs • Embedded fonts mean better type options • “Interactivity” not always necessary or on offer, especially for hard news/breaking news • Cross-device “responsive design” has sapped resources for adding interactivity Digital Experience is More Print-Like
38. What is Interactivity For? • Query individual details or data points • Zoom in/out for detail and context • Filter, sort and search • Direct manipulation – rotate, drag, flip • Other types of user input • Explore alternate views Forms of Interaction that Enrich Online Graphics • Sequential navigation…
39. What is Interactivity For? • Inspired by touch devices, manipulating content on screens has become much easier – better than a joystick! Forms of Interaction that Enrich Online Graphics • Sequential navigation…
40. The Era of “Scrollitelling”
41. The New York Times
42. The Guardian
43. Scroll or Swipe-Based Interaction Infographics Where You Never Get Lost • Scrolling is the one behavior that exists across all devices, whether it’s a mouse-wheel, swipe on a trackpad, magic mouse, tablet surface or smartphone screen • It has little or no visual interface that needs to be directly manipulated (in fact, Mac OS 10.7 virtually banished the scroll bar) • Action of “scrolling” is co-opted to trigger other reactions than down movement - cuing a video, rotating, flipping through images, whatever!
44. +
45. “Scrollitelling” • Restores integration of infographics, photos and text we enjoyed in print media – but had lost online • Page scripting enables behaviors to trigger as user passes through page • Triggers can be used to call attention to content that user might have otherwise missed • Scrolling can be loosely or closely tied to interactions • Behavior can be natural or … disorienting Touch-Aided Vertical Content Navigation – With Triggered Events
46. MTV/Good
47. “Scrollitelling” • Restores integration of infographics, photos and text we enjoyed in print media – but had lost online • Page scripting enables behaviors to trigger as user passes through page • Triggers can be used to call attention to content that user might have otherwise missed • Scrolling can be loosely or closely tied to interactions • Behavior can be natural or … disorienting Touch-Aided Vertical Content Navigation – With Triggered Events ! • Scrolling can work both backward and forward – enabling a sort of “scrubbing” behavior
48. National Geographic
49. How it Works
50. Scrolling Formats • Based on “parallax” scrolling, where items can move at different speeds • Some items can remain onscreen longer than others, move faster or slower, even change direction • Script: JQuery scrollspy
 http://davidwalsh.name/js/scrollspy • Behaviors designed to trigger at exact scroll depths, either heading down, or up, or both • Waypoints are like trip-wires • Script: JQuery Waypoints, Skrollr.js
 http://imakewebthings.com/ waypoints/
 http://prinzhorn.github.io/skrollr/ Based on Ratios or “Waypoints” Scrolling by Ratio Scrolling by Waypoints
51. Scrolling Formats Based on Ratios or “Waypoints” Scrolling by Ratio Scrolling by Waypoints
52. Scrolling Formats Based on Ratios or “Waypoints” Scrolling by Ratio Scrolling by Waypoints Browser viewport Page Background
53. Wait, Was that Video in “Cosmic Questions?” No. But I dream of the day we can scrub video by scrolling.
54. Does Scrollitelling Work for Standalone Graphics? Or is scrolling mostly for long reads with multimedia sprinkled around?
55. Die Zeit
56. facesoffracking.org
57. Further Refinement Rules and Conventions Start to Take Form…
58. “How to Scroll” Some of NYTimes Graphics Editor Mike Bostock’s Suggestions Prefer Scrolling to Clicking “Scrolling’s ubiquity makes it almost effortless, as you need not consciously coordinate your hand and eye as you scan. In contrast, clicking on a tab or stepper is a comparatively complex action that requires greater deliberation. Making content visible by scrolling is almost always better than hiding it behind a click.” bost.ocks.org/mike/scroll
59. “How to Scroll” Allow rapid, incremental, reversible scrolling “How should we isolate an individual graphic or video to present it dramatically, rather than awkwardly cropped and cluttered by the arbitrary viewport? There are two schools of thought here. The first is to constrain scrolling to fixed positions at content boundaries. The second is to leave scrolling as-is and instead adapt the content to the viewport. The first approach fundamentally alters the experience of scrolling. I am a strong proponent of the second approach… It preserves direct manipulation whereas the first approach feels indirect and detached; I would rather scroll the page myself than hand-wave a butler to advance the page on my behalf” Some of NYTimes Graphics Editor Mike Bostock’s Suggestions
60. “How to Scroll” Provide instantaneous, consistent feedback “Scrolling should provide instantaneous visual feedback in response to user input; when you scroll using the mouse, touch, or keyboard, you should instantly see the display respond. This feedback is an essential component of direct manipulation and lets you rapidly adjust your input to scroll the desired distance and velocity.” Some of NYTimes Graphics Editor Mike Bostock’s Suggestions
61. “Scrolljacking” “As readers, we have strong expectations on how scrolling should behave. As designers, we may yet change scrolling behavior, but too much change risks confusing or frustrating readers — the phenomenon of scrolljacking.”
62. “Scrolljacking” “As readers, we have strong expectations on how scrolling should behave. As designers, we may yet change scrolling behavior, but too much change risks confusing or frustrating readers — the phenomenon of scrolljacking.”
63. “How to Scroll” Avoid unwanted disruptions ”Use caution playing animations or video as soon as the elements scroll into view, particularly with audio; even though the elements are visible, the reader may not yet have finished reading preceding text. Surprises are likely to distract the reader’s eye and interrupt reading, and repeated disruptions can frustrate readers.” Some of NYTimes Graphics Editor Mike Bostock’s Suggestions
64. Further Considerations Some Hard Earned Lessons
65. Repeating instances of zoomable maps creates headaches– map zoom level and center point have to match Lessons Learned from Scrolling waterinthewest.stanford.edu/groundwater
66. Lessons Learned from Scrolling Dealing with multiple screen sizes raises the complexity
67. Lessons Learned from Scrolling Interactive graphics can get buried in a long article page; having a standalone version is important.
68. Using scrolling to reveal complex texts may not work so well Lessons Learned from Scrolling
69. Beyond Scrolling Other Emerging Formats
70. The Chart Slide Show Bloomberg
71. The No-Touch Build Bloomberg
72. New Uses of Touch Gestures Tableau’s “Project Elastic” tablet demo
73. The True 3D Tour The New York Times
74. Which brings us to…
75. 2. Escaping Flatland with HTML5 Canvas
76. The Advent of 3D Web Graphics • 3D infographics are still a big challenge to create • But they are growing in number, whether made by news organizations or by firms working doing big-budget productions • Not everything is better in 3D, especially data visualizations • Authoring 3D requires browser functionalities that have not been so common in infographics… so far. Browser Support is Spotty But Growing
77. It Begins…
79. Bloomberg View
80. More impressively…
81. Bloomberg View
82. What the?
83. Getting to Know Canvas and WebGL • Understanding how 3D interactive graphics are created requires going under your browser’s hood and taking a look • Unlike the times not so long ago that we needed Flash or video to do interesting animations, modern HTML5 browsers have several ways of rendering graphical and 3D content: Your in-Browser Photoshop and a Bleeding-Edge Feature 2D VISUALS TRUE 3D FAUX 3D SVG - SCALABLE VECTOR GRAPHICS CANVAS - 2D CONTEXT CANVAS - WEBGL
84. Getting to Know Canvas and WebGL • A fundamental concept of computer graphics is the distinction between vector and raster imagery • Vector graphics are mathematically defined points, lines, curves and polygons; they are also called line art. • Raster graphics are composed of individual pixels arranged in a given resolution. They are also called bitmap or resolution-dependent images. Understanding the Difference Between Vector and Raster Graphics VECTOR RASTER SVG - SCALABLE VECTOR GRAPHICS CANVAS - 2D CONTEXT CANVAS - WEBGL
85. Getting to Know Canvas and WebGL • Vector and Raster formats are distinctions made in other contexts, like desktop design applications, geographic information systems, and print publishing. Understanding the Difference Between Vector and Raster Graphics VECTOR RASTER SVG - SCALABLE VECTOR GRAPHICS CANVAS - 2D AND WEBGL ADOBE ILLUSTRATOR ADOBE PHOTOSHOP EPS FILE TIF FILE LINE DRAWING PHOTOGRAPH GIS FEATURE CLASSES GIS RASTER GEODATA HAM AND CHEESE PEANUT BUTTER AND JELLY HAM AND CHEESE PEANUT BUTTER AND JELLY
86. Getting to Know Canvas and WebGL Understanding the Difference Between Vector and Raster Graphics VECTOR FORMAT DISCRETE FEATURES HAM AND CHEESE PEANUT BUTTER AND JELLY RASTER FORMAT COMINGLED Don’t believe me? Can you take the ham and cheese apart? Or take the peanut butter and jelly apart?
87. Getting to Know Canvas and WebGL Examples of Vector and Raster in GIS VECTOR FORMAT FEATURE DATA RASTER FORMAT GEODATA
88. Getting to Know Canvas and WebGL SVG and Canvas: The Difference • SVG is a file format that is human readable, if verbose, and looks a lot like XML:
 <svg> 
 <line x1="0" y1="0" x2="200" y2="200" 
 stroke-width="1" stroke="rgb(0,0,0)"/> 
 </svg> • You can export SVGs directly from Illustrator, as well as edit them • Usually in interactive data visualizations, D3 or another toolkit will dynamically write SVG code to the page SVG - SCALABLE VECTOR GRAPHICS
89. Getting to Know Canvas and WebGL SVG are at the Heart of Many D3 Visualizations • Drawing lines, polygons and text as vector lines in SVG makes many D3 visualizations extremely light and fast, and enables graceful transitions from state to state
90. Getting to Know Canvas and WebGL SVG and Canvas: The Difference • <Canvas> is an HTML5 tag. Given a width and a height, the browser will create a blank space – a “canvas” of that size for drawing on the web page. • This canvas can only be drawn to by Javascript, so it literally requires programming.
 function init() {
 canvas = document.getElementById('testCanvas');
 context = canvas.getContext("2d");
 context.fillStyle= "yellow";
 context.fillRect(rectX,rectY,rectW,rectW);
 } • Canvas has two modes: 2D and “WebGL” for drawing 3D CANVAS (2D)
91. Getting to Know Canvas and WebGL SVG and Canvas: The Difference • People sometimes describe canvas as a Photoshop built into your browser. You can use Javascript to paint all sorts of lines, rectangles and fills using canvas • You can also load and manipulate images in canvas • With canvas you can also do animations; oddly enough, for some types of animations, canvas is much faster than svg (the vector format) even though the browser usually has to completely redraw the entire image • Your mouse cannot interact directly with shapes in the canvas; instead, javascript passes the x and y of your click to the application, which knows what to do. CANVAS (2D)
92. Getting to Know Canvas and WebGL SVG and Canvas: The Difference • 2D canvas is growing in popularity for web and mobile based games CANVAS (2D) Pirates Love Daisies
93. 2D Canvas in Action
94. 2D Canvas in Action
95. “Faux” 3D in 2D Canvas CanvasMol
96. When to Use 2D Canvas (Raster) Instead of SVG (Vector)? • You have a LOT of points or lines 
 (The performance difference is very noticeable) • Have a lot of frames or need smooth tweens • Want to use photorealistic effects– glowing lines
 or complex, textured fills • You want to simulate 3D movement
97. Getting to Know Canvas and WebGL Comparing Performance on Complex Graphics VECTOR (IN FLASH) • Here’s an example of a vector graphic (ok, in Flash) that has a large number of discrete points – in total, over 150,000. • Note the sluggish response to changes to the date ruralwest.stanford.edu/newspapers
98. Getting to Know Canvas and WebGL Comparing Performance on Complex Graphics RASTER (CANVAS) • This is a typical visualization made with CartoDB’s “Torque” engine for time series maps. • It shows Twitter users tweeting about sunrise around the world. • Note the speed of the animation and the scrubbing update. CartoDB and Twitter
99. Getting to Know Canvas and WebGL Comparing Performance on Complex Graphics VECTOR (IN FLASH) CANVAS (2D)
100. How About 3D?
101. Getting to Know Canvas and WebGL Meet WebGL – Powerful But Challenging • Allows the creation of GPU-accelerated 3D animations using the JavaScript language without a plugin like Java, Processing sketch or Flash movie. • Still inconsistently supported by browsers. CANVAS (3D) - THE WEBGL CONTEXT
103. Getting to Know Canvas and WebGL • Javascript library that simplifies drawing to WebGL context. • Easier to grasp for people with familiarity with 3D conventions: The Three.js Javascript Library var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; geometry = new THREE.BoxGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); }
104. 3. Mapbox Studio and the Rise of Vector Web Maps
105. Web Maps and Noise Reduction After the thrill wore off from discovering “slippy” Google Maps, infographics designers started wondering how to calm down the basemap styles.
106. Web Maps and Noise Reduction Over the years, various options have arisen to help make thematic maps better looking and easier to read – even from Google Maps itself. The above images show the Google Maps API with custom style modifications.
107. But even with a profusion of basemap options and the arrival of the Open Street Maps database, we still haven’t had much control over what features we show – or don’t show – in our maps. Or what they look like. For one thing, this traditionally means generating tens of thousands of raster image tiles at various resolutions.
109. The Rise of Vector Maps • Mobile users were first to enjoy the benefits of vector-based maps in apps like Google and Apple Maps. • These vector maps can be re-styled dynamically, can zoom and scale smoothly, and even allow distortion-free rotating and tilting. • In the past year, vector-based Google Maps made it into web browsers, although not yet into the API for creating custom maps. • Mac users got the vector-based Maps app as well. • What do we need to use vector maps in infographics? • One example shows what the future might hold…
110. Urban Layers
111. How We Get Vector Maps… • “UrbanLayers” by the New York based firm MorpoCode uses D3.js and a new javascript tool for rendering vector maps in the canvas with WebGL – called MapboxGL. • To load a map, WebGL then rasterizes the vector graphics for display. • Mapbox, the creator of MapboxGL, has released a desktop application to let map makers enjoy the benefits of vector maps, Mapbox Studio. It’s Confusing, But It Uses Canvas and Raster Display
112. Let’s take a look.
114. A Final Thought
115. Scrollitelling to Infinity and Beyond Lost and Found in the Milky Way
117. Thanks! 
 gmcghee@stanford.edu, @mcgeoff west.stanford.edu datajournalism.stanford.edu