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   高级网页程序员



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



3D models

Mini games


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



Frequent content change

Multiple platforms

Poor content

Do readers actually care?


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

Swiper / Slider

Time based vs Position based Transition



New York Times

My work in an Interactive Graphics Team

By yongjun21

My work in an Interactive Graphics Team

  • 2,446