Data in Motion

A presentation at D3 Unconf in September 2017 in San Francisco, CA, USA by Sarah Drasner

DATA IN MOTION SARAH DRASNER @SARAH_EDO

LET’S START FROM THE BEGINNING. What happens when you look an an image?

Saccade SCANNING

Why Is This Important?

Draw Attention & Connect States
http://bit.ly/2h3BfFp

HOW? FILTERING/ REORDERING SHOWING GREATER CONTEXT SHOWING CHANGE OVER TIME REVEALING FOR CLARITY

FILTERING/ REORDERING

Filtering & Reordering RETAINING CONTEXT

D3 Chained Transitions SIMPLE TRANSITION . transition () . attr ( "cy" , 820 ) . attr ( "r" , 5 ) . attr ( "fill" , "url(#radgrad)" ) . duration ( 1300 ) . delay (( d , i ) => {
return
6000
( i
40 )
})

D3 INTERPOLATE PATH SIMPLE TRANSITION D3 Chained Transitions https://github.com/pbeshai/d3-interpolate-path

Morphing :
Greensock ADVANCED TRANSITION https://codepen.io/sdras/pen/BodKjP

Morphing ADVANCED TRANSITION

Morphing :
Greensock ADVANCED TRANSITION TweenLite .to( "#circle" , 1 , {morphSVG: ”#square" });

Morphing :
Greensock ADVANCED TRANSITION findShapeIndex( "#square" , "M10 315 L 110 215" );
UTILITIES

Morphing :
Greensock ADVANCED TRANSITION function
flame () {
var tl = new TimelineMax(); tl.add( "begin" ); tl.to(blurNode, 2.5 , { attr: { stdDeviation: 3 } }, "begin" );
var num = 9 ;
for ( var i = 1 ; i <= num; i++) { tl.to(fStable, 1 , { morphSVG: { shape: "#f"
I }, opacity: (( Math .random() * 0.7 ) + 0.7 ), ease: Linear.easeNone }, "begin+="
i); }

Morphing :
Greensock ADVANCED TRANSITION

FILTERING/REORDERING Greensock
For Complex Shape Interpolations D3
For Chaining With Simple Elements

SHOWING GREATER CONTEXT

SHOWING CONTEXT Reduced Cognitive Load Through Spatial Awareness Kathy Sierra, “Badass: Making Users Awesome”

Using Spatial Awareness To Drive Meaning SHOWING GREATER CONTEXT fallen.io

USE THE SVG’S VIEWBOX AS A CAMERA

Viewbox As A Camera RETAINING CONTEXT

Viewbox As A Camera RETAINING CONTEXT getBBox ();

Viewbox As A Camera RETAINING CONTEXT

Viewbox As A Camera RETAINING CONTEXT codepen.io/sdras/pen/dXoLEJ

Viewbox As A Camera RETAINING CONTEXT

nikon.com/about/sp/universcale

SHOWING CHANGE OVER TIME

Motion As A Time Signifier CHANGE OVER TIME codepen.io/sdras/pen/RZGqxR
//this formats the hour info without a library getCurrentHour(zone) {
let newhr = new
Date ().toLocaleTimeString( 'en' , { hour: '2-digit' , minute: '2-digit' , hour12: true , timeZone: zone })
return newhr },

Scrollytelling CHANGE OVER TIME letsfreecongress.org

Scrollytelling CHANGE OVER TIME nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan

Greensock’s Timeline CHANGE OVER TIME codepen.io/sdras/pen/ByEWON

Greensock’s Syntax CHANGE OVER TIME codepen.io/sdras/pen/Wramvo

Greensock’s Timeline CHANGE OVER TIME tl .pause(); // Pause timeline tl .resume(); // Continue playback tl .restart(); // Restart the timeline tl .play(X); // Play from Xs tl .play(-X); // Play Xs from end tl .seek(X); // Go to Xs or 'label' tl .reverse(); // Reverse playback anytime tl .timeScale(x); // Speed up/slow down timeline tl .progress( 0.5 ); // Skip to halfway

Greensock’s Timeline CHANGE OVER TIME github.com/sdras/gsap-player

Scrollytelling Options STORYTELLING IN CODE PIXEL TO PIXEL POINT TRIGGERRED • Skrollr • Map timeline progress to scroll event (semi-manual) • ScrollMagic • ScrollStory • Waypoints • Tr i g g e r s i n g l e t i m e l i n e o ff of scroll event (semi- manual) • ScrollMagic • ScrollStory • GraphScroll

Emotion Attaches To
The Limbic
System STORYTELLING

Emotion Attaches To
The Limbic
System STORYTELLING codepen.io/sdras/pen/YZBGNp coordinates(e) {
this .startArms.progress( 1
(e.clientX / walleCoords)).pause(); },

Scrollytelling CHANGE OVER TIME nytimes.com/interactive/2016/07/07/world/americas/bolivia-climate-change-lake-poopo TEXT AND
IMAGE

codepen.io/sdras/pen/dPqRmP

Marrying Text And Image STORYTELLING // use in a timeline call
tl . staggerTo (foo . words ,
0.8 ,
{
rotationY :
60 ,
y :
300 ,
opacity :
0 ,
ease : Power4 . easeIn
},
0.1 ) ;
SPLITTEXT // instantiate new split text var foo
new SplitText( " #bar ",
{ type :" words ",
//optional
wordsClass :" word "
} ) ;

codepen.io/sdras/pen/RNWaMX

codepen.io/sdras/pen/RNWaMX

Storytelling With Interactive Text And Image STORYTELLING

codepen.io/sdras/pen/RNWaMX

REVEALING FOR CLARITY

Motion As Information REVEALING FOR CLARITY

Motion As Information REVEALING FOR CLARITY codepen.io/sdras/pen/qZBgaj .hexagons
path {
opacity : 0 ; } $elements : 2000 ; @for
$i
from
0
to
$elements {
.hexagons
path:nth-child ( #{$i} ) {
$per : $i / 50 ;
animation : 2s
#{$per} s ease hexagons both ; } } @keyframes
hexagons {
100% {
opacity : 1 ; } }

Motion As Information REVEALING FOR CLARITY

Get The Data On The Page, Then Reveal It

antievictionmappingproject.net/ellis.html

banxico.org.mx/mibanxico/capitulo1/

Combine! DATA IN MOTION FILTERING GREATER CONTEXT SCROLLYTELLING REVEALING pudding.cool/2017/03/redraft/

Motion Gives Our Data Another Dimension

THANK YOU! SARAH DRASNER @SARAH_EDO

Sarah Drasner
@sdras

1 / 56

Finding ways to express information to viewers always requires understanding how visual properties and development affect them. But our understanding of data becomes richer when we consider it across another dimension: time. This talk goes over some of the theory and practical application for animating data visualizations.