My work in an Interactive Graphics Team

Yong Jun

Shanghai, 19 Oct 2019

Thong Yong Jun 汤詠竣

Singapore Press Holdings   新加坡报业控股

The Straits Times  海峡时报

 

Senior Web Developer   互动图表团

Interactive Graphics Team   高级网页程序员

 

GitHub:

https://github.com/yongjun21

We are...

     Part of the newsroom. Digital first. Mobile first.
 

We do...

     Visual stories, Data stories, Interactives


We have...

     Developers, Designers, Data researchers, Journalists, Editor

 

What leads me to this work

Data visualization - 数据可视化

 

Data journalism - 数据驱动新闻

 

Interactive storytelling - 互动叙事

Data visualization

Charts

Maps

3D models

Mini games

Polls

Data journalism

Interactive storytelling

Tools we use

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

Challenges

Deadlines

Frequent content change

Multiple platforms

Poor content

Do readers actually care?

Opportunities

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

Scrollytelling

Why use scrollytelling?

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

Types of scrollytelling

Swiper / Slider

Time based vs Position based Transition

Tools

Examples

New York Times

My work in an Interactive Graphics Team

By yongjun21

My work in an Interactive Graphics Team

  • 2,687