Charts

Maps

3D models

Mini games

Polls

Frontend development

• Vue
• D3
• MapboxGL
• Greensock
• Babylon.js
• Brightcove

Data research

• Google Sheets
• R
• Python
• pandas
• matplotlib / seaborn
• CartoDB

Visualization design

• Adobe Illustrator
• Datawrapper
• Mapbox Studio
• Google Earth

Deadlines

Frequent content change

Multiple platforms

Poor content

Do readers actually care?

• Lessons from NYT: https://medium.com/@dominikus/the-end-of-interactive-visualizations-52c585dcafcb
• Only 10–15% of people clicking on buttons — even essential ones
• If you make a tooltip or rollover, assume no one will ever see it

Personalized news stories

Interactive installations

Company/organization annual reports

Mike Bostock

Creator of D3.js

Co-creators ObserverableHQ

Former graphics editor for

  The New York Times

Rich Harris

Creator of Svelte

Creator of Rollup

Graphics Editor for

  The New York Times

Why use scrollytelling?

• Natural for user
• Linear (only two directions: down or up)
• Reversible
• Mobile

Types of scrollytelling

https://bost.ocks.org/mike/scroll/

Swiper / Slider

Time based vs Position based Transition

Tools

• ScrollMagic
  • https://scrollmagic.io/docs/index.html
• Scrollama:
  • https://github.com/russellgoldenberg/scrollama

• https://www.nytimes.com/interactive/2019/04/17/world/europe/notre-dame-cathedral-fire-spread.html

• https://www.nytimes.com/interactive/2019/03/14/arts/design/hudson-yards-nyc.html

New York Times

https://www.lemonade.com/giveback-2019