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