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:
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?
- 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
Opportunities
Personalized news stories
Interactive installations
Company/organization annual reports
Mike Bostock
Rich Harris
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
- ScrollMagic
- Scrollama: