Bubble tea interactive visualization write-up

Part 1. Background research & ideation

1.1 Goal & Target audience

This is the first project to kick of our “Taiwan data stories” series. We chose bubble tea as our first topic in hopes of using a relatable topic as a friendly stepping stone for more in-depth topics we want to explore in the future.

1.2 What are some initial ideas

We explored many possibilities of what to focus on in terms of topic, such as the controversial origin of the bubble tea, trends in popularity over time, or the density of bubble tea stores across Taiwan, but nothing really felt that original. Then we realized what’s most interesting for us is the limitless customizations possible given the diverse ingredients and drinks, and that there are countless more flavors and toppings in Taiwan than we ever see abroad. This made us curious: exactly how many unique boba drinks are there in Taiwan?

1.3 What would be our tools?

→ Javascript, more specifically d3 for the interactive visualization  (By Julia Janicki)

→ Hand-drawn every bubble tea drink using procreate (By Daisy Chung)

→ Paper/pencil sketching Adobe XD for the interface design (By Daisy Chung)

Part 2. Data cleaning / exploration

2.1 Data collection / data sources

For the data we selected the top five most popular drink stores in Taiwan as of Feb 2021, based on data from data66 who used Google Trends data. These shops include Kebuke, 50 arashi, Ching-Shin Fu-Chuan, Milk Shop, and Ching Yuan. We then collected all the most updated menus.

2.2 Compile data & do some data cleaning

We started distilling the data to find only the unique drinks. This turned out to be much more challenging to untangle than we anticipated, as each store has different categorization systems. After much exploration, we developed six main categories (milk tea, pure tea...), then broke them down further into components (base 1, base 2, milk, flavor, texture), with different combinations of components leading to 157 unique drinks.

We searched for ingredient lists and images for each drink, and also used our best judgment when necessary. For example, we defined “tea lattes” as drinks that use fresh milk and “milk teas” as drinks that use milk powder. After solidifying the system, we listed all drinks in excel.

2.3 Data structure

With the cleaned data, a hierarchical format seemed most appropriate. Using D3, Julia rearranged the tabular data into a hierarchical data, and drew a visualization that has such layout. The boba tree was born!

Part 3. Dataviz Exploration

See separate post for development details (WIP).

Part 4. Visual and narrative design

4.1 Visual Style for the boba tree

When Julia showed me the boba trees, I immediately saw the curvy lines as flows of tea ingredients all cascading and colliding into the final product. I was also inspired by Wendy MacNaughton’s illustrations of kitchen shelves in the book Salt Fat Acid Heat, and integrated boba store equipment for each node.

4.2 User experience and storytelling

To create a story experience, it was important to also provide background and cultural context. For us, the most interesting part of boba is the experience of customizing the drink. I thought it would be fun to have our users experience the joy of building their own tea. Through a step-by-step drink ordering experience, we introduced the Taiwanese unique tea culture, local ingredients and texture preferences, beliefs in “warm” temperature drinks for good health, as well as folding in recent environmental efforts to reduce single-use plastics.

I created the initial UX mock with a quick sketch.

Then fine-tuned the experience with Adobe XD.

Finally, Thomas Nieddu helped us calculate all of the possible drink combinations that can be created with 157 unique drinks, 3 additional toppings, 7 temperature levels, and 5 sweetness levels. Check out his math below—we welcome feedback from anyone who'd like to contest the final figure of 12,775,875.

Part 5. Publish

The final data story can be found here, while the github repo can be found here.

Finally, it was important to have the story in both English and Mandarin, so that we can truly break down the language barrier and connect with a wider audience. We had a lot of help from family and friends in Taiwan, and learned a lot also about the current boba trends in Taiwan during the collaboration!

After a year of figuring out what kind of project we want to do and impact we want to make in the dataviz creative space, we finally made our first thing! We presented our collaboration journey during the 2022 Outlier DataViz conference, and were thrilled to see much support and interest from other like-minded talents. The small side project grew from the two of us to now a team of 13, and the interactive was featured by the SND newsletter, FlowingData, and various platforms. We have now built five stories, and are constantly exploring new ideas and approaches.