A collection of interactive visual stories on the web
Description
visualrambling.space is a collection of interactive visual stories that explore technical topics through engaging, animated visualizations. My goal with this project is to make complex concepts more accessible and enjoyable for a wider audience. It has attracted over 70,000 visitors in the first six months since launching and continues to grow through shares on platforms like Hacker News, Reddit, and design communities.
Process
Choosing Topic
Every story begins with a topic that genuinely interests me and offers strong potential for visual exploration.
Research
Once I choose a topic, I dive into a wide range of materials to gather information, build understanding, and find the main story to highlight.
Writing
In this phase I develop the narrative, breaking complex ideas into simpler, more digestible parts while simultaneously thinking about how best to visualize them.
Implementation
Finally, I build the interactive stories using Three.js for 3D rendering and object creation, and Anime.js to bring the visuals to life through smooth animation.
Breaking Down Hollywood's Choice of Shooting Medium
Description
For this visual essay published by The Pudding, I analyzed IMDb data to investigate filmmakers' choices between film and digital shooting. I looked at when directors opted for one medium over the other, and whether those decisions correlated with movie genres or production budgets.
Process
Idea Conception
The Pudding team encouraged us to find a topic we were personally passionate about. I proposed exploring the long-standing film vs. digital debate in cinema.
Data Collection and Cleansing
I gathered raw data from IMDb and performed thorough cleaning and preparation.
Exploratory Analysis
With clean data in hand, I used SQL and Python to explore patterns and uncover interesting trends.
Data Visualization Design
Next, I designed visualizations that would best support and enhance the story.
Implementation
Finally, I built the interactive piece as a web page using D3.js and React.
Visualizing foreign fishing activities
Description
This project was created for Data For A Cause, a challenge to produce data visualizations for non-profit organizations. The task was to visualize global fishing activities carried out in foreign countries' territories, using data provided by Global Fishing Watch.
Process
Data Cleansing & Aggregation
I aggregated roughly 6 million rows of fishing activity data by the vessel's home country and the fishing territory to make analysis and visualization more manageable.
Data Visualization Design
The challenge brief emphasized highlighting fishing by vessels from wealthier countries in the waters of poorer nations. After exploring options, I decided on an interactive map showing where and how long each country's fleet fishes in foreign waters.
Implementation
I built the interactive visualization as a web page using D3.js and React.
Visualizing Google Trends Data for Famous K-Pop Groups
Description
This personal project began when BTS exploded in popularity in the US around late 2017. Having followed K-Pop in Indonesia since around 2012, I became curious whether the "K-Pop wave" was rising differently across countries. That curiosity led me to analyze Google Trends data to find out.
Process
Data Collection and Cleansing
I wrote Python scripts to pull Google Trends data for various K-Pop groups across multiple countries.
Exploratory Analysis
I visualized the initial data in Excel to compare trends, eventually selecting five countries with the most distinctive and interesting patterns: Indonesia, the US, China, Thailand, and Japan.
Data Visualization Design
The biggest challenge was creating a clear, harmonious color palette for 35 different artists. I used chroma.js to help generate an effective color scale.
Implementation
I built the interactive piece as a web page using D3.js and React.
Visualizing La La Land's emotional roller coaster
Description
Using data from the Spotify API, I collected audio features from the songs in La La Land to answer one question: does the movie end on a note of hope or despair? The answer was then visualized as a roller coaster track, representing the emotional ups and downs the movie has taken us on.
Digital Mind Standardization
Exploring the Ethics of Technology Through Generative Art
Description
This piece was created during Impact!, a university workshop that invited participants to reflect on the ethical implications of technology and express those ideas through art. The work questions how technology can organize human labor into increasingly standardized, efficient processes, that boost productivity and profit, but potentially at the cost of standardizing human thought itself. To visualize this idea, I created three original paintings and then used Processing to sort every pixel by color, producing three final images that look strikingly similar despite starting from different artworks.