Storytelling in an age of data

Visualizations, explorables and dashboards

Intro

Data is important...

...but it ain't worth much if you can't explain why it is important.

DIGITAL STORYTELLING =

TECH + DATA + ART

The confluence of data and new technologies present opportunities to explore how stories are told.

Exploring digital frontiers requires both artists and engineers.

It is a blend of good design, content and technology.

Ideas

Interactive annual reports
Live event visualizations
Code art, presentation decks
Applications and dashboards

Interactive annual reports

Data viz and explorables for Temasek review

We've been building explorable tables, charts and calculators for the Temasek Review site (annual report) since 2015.
Glassy, eye-catching unique animations that help tell the story that they want to tell.

Turn complicated spreadsheets into interactive tables

See the interactive tables on the Temasek review site.

Redesign bad charts into better ones

Check out the simulation portfolio chart on the Temasek review site.

Explorables and calculators

See how we grew, 20-year outlook and portfolio highlights explorables.

There are more! This is just a sample selection.

Custom Chinese charts

All charts and tables done by us for Temasek have a custom Chinese version.

For example, here's the Chinese version of how we grew and 20-year outlook explorables.

Here's the Chinese version of transportion and industrials table.

Chinese charts and tables often have custom logos, kerning and layout that is different from English charts.

Helix to globe

Showcase visualization for Temasek review website for TR2019
Also converted into an AR (augmented reality) showcase demo piece.

Event visualizations

MCI event visualization

We have built a bespoke solution for a client of ours in 2019, MCI consulting (an international events company).

This is a live event visualization based on real-time data input from an audience.

What you are seeing is on V/R's staging server, MCI consulting has it on their own official website, which we help administer.

MCI live event 1

Data is all collected on live mobile survey inputs, designed specifically for the audience.

MCI live event 2

This is a then visualized live (shown to audience) based on collected results.

You can see this here.

MCI live event 3

Every survey has their own individual result (we collect emails). MCI sends them their own personalized results later.

You can see this here.

MCI live event 4

Personalizing results are an excellent way to make the event sticky for attendees.
So far this bespoke solution has been used in events in 3 events around the world: Antwerp, Rio De Janerio and Singapore.
Audience use QR codes to access the various links for the live events.
There is a moderation page for the surveys (hidden to audience), so that the event organizers can tweak the data live as necessary.
All data submitted for each event are tracked and stored. From a data perspective, data is gold and can be used for all kinds of business models.

Temasek 3D photo visualization

3D photo directory viz showcase for Temasek for their global event in Shenzhen, China.

Temasek 3D viz event

Photo submission from Temasek staff was conducted over 3-day period, and the visualization was constantly updated live with new data during the event.
Visualization was showcased on large event hall screen (full stage) across 3 days.
Visualization was also meant to be used as an internal directory (for people to find each other) after the event.
Designed to be reused for future Temasek events.

Temasek 3D viz functionality

Unique animations for each of the different filters (by year, by division, etc.)
Ability to search for staff who attended this event and submitted their photos. There is an autocomplete search bar for this function.
Application works on both mobile and desktop form factors.
Building this code art piece was an exploratory process with Temasek.

Code art, games and decks

Temasek purpose tree

Code art piece designed for Temasek's internal campaign.
Live visualization throughout the year that shows all purpose statements submitted by staff. The more statements are submitted, the fuller the trees and the forest becomes.

Temasek purpose tree 2

Parallax animations between the forest, tree and sky views.
Resting animations, together with sound!
Code art works on both mobile and desktop form factors.

Temasek purpose tree 3

Visualization was used at a live Temasek event in 2022.
Data is taken from Temasek's internal sharepoint system directly (a custom intgeration). Once setup, the process is automated as long as the data is updated (from Temasek's end).

Cyberdefender

Cyberdefender was a game written for Fortinet in 2016.
You play as a Chief Security Officer (CSO) trying to survive a year with a limited budget. Every quarter you will attacked by a random attack, and you have to survive.
Tip: Just buy the 1st item.

Cyberdefender 2

Used as a marketing piece of the content, the game was localized for various languages beyond English, e.g. Japanese, Chinese Simplified, Chinese Traditional etc.
Game script was designed by Fortinet's cyber security evangelist, and the game was hosted by Fortinet themselves.
There was a call to action / custom backend enhancement that allowed end user's to save their scores to compare with each other.

BASF: presentation decks

Explorable web deck designed mainly for self-service exhibition touch screens at their China event in 2018.
Integrated with BASF's own content microsite.
Easy switching between English and Chinese as dictionary function is built into the code.
Works on both mobile and desktop form factors.

BASF: presentation decks 2

Also did 2 more web content decks for BASF: Elastopave and Haptex
Sound and tons of animation!
Different from video because you can add in links and custom user experience gestures if needed.
Interesting fact: Rain is procedurally generated to minimize size so decks are always fast to load.

Apps and dashboards

Metro Metrics frontend

We built a rail transport editor for Ministry of Transport analysts to draw rail maps, which were sent to A*Star's backend for modelling / machine learning.
Also included a visualization component to show resilency of network, plus other metrics when the model comes back from the backend.
Modern frontend JS stack using Vue, D3, Bulma. Backend done using Swagger (by A*Star)
A*Star won an award for this product based on our frontend prototype work for them. Much of the dashboard design is from V/R.

PSA frontend prototyping

Custom D3 visualization for PSA's berth product. Visualization design does not exist anywhere else, and functionality had to built from scratch in D3.js
Componentized into an Angular 9 component for PSA's tech team to use within their product, using GitLab to sync.
Also did other geospatial visualization prototypes for PSA (D3, mapbox, leaflet).

Attilatech dashboard prototyping

Custom vue implementation of Attilatech's security dashboard prototype
Tech stack is Vue, Vuex, Vuetify and D3 for the graphing visualization.
Graph visualization was totally different form the original design.

Guangdong CDC contact tracing viz

Custom viz work for Guangdong CDC for their contact tracing whitepaper.
Based on this Singapore Covid dashboard which went viral in July 2021.
The design allows you to filter by many various parameters and to search for and highlight nodes of interest.

Fortimastermind

Regional security quiz developed for our client Fortinet, where over 150 teams participated in 4 timed, self-marked quizzes over the period of a month.
Full frontend and backend project, which included user authentication, logging / marking of timed quizzes based on Fortinet content, collation and reporting of data results.
Architecture stack: Vue / Bootstrap for frontend, Node.js/Express/ MongoDB for backend. Hosting: BitBucket (Git), AWS, Netlify.

Stalford Crashcourse

School administration system for students, teachers, scheduling, attendance.
Both frontend and backend, this was a transformation project designed to capture all data aspects of their business and then build applications on top of this platform.
Architecture stack: Vue / Bulma for frontend, Node.js/Express/ MongoDB for backend.
Hosting: BitBucket (Git), AWS.

Lots of visualization work

We've done a ton of code art and visualization work across the 10 years we've been around.

This is just a selection of case studies. If you need references, do ping!

About

Chi-Loong

Product UX and engineering skills, with experience doing dozens of projects for clients across SMB, government and MNCs. Was head of engineering at start-up Mogul.
Ex-journalist / PR / marketing. Past lives in tech, in-house, agency, and media, like Straits Times, British Telecoms, and GollinHarris.
Currently adjunct lecturer at SUTD for masters module in visualization. Taught at SIT and code schools (all adjunct positions) like General Assembly, SGCodeCampus teaching software engineering.
I have about 10 years of experience in tech client management, PR and journalism, another 10 years+ in tech engineering work, and about 3 teaching tech.

Why V/R?

In a nutshell, quality.

We design and build beautiful quality interactive work for clients because we're passionate about the work.

An entirely local Singaporean outfit, we build serious games, data visualizations, animations and product dashboards.

We believe our work speaks for itself - a blend of good UX storytelling and technical excellence.