Storytelling in an age of data
Visualizations, explorables and dashboards
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.
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.
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 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.
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
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!
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.
Questions?
www.vslashr.com | chiloong@vslashr.com
