I aim to shape products, interfaces and services that mediate meaningful dialogues between people, systems and their environments within everyday life.

Posts tagged ‘visualization’


Arduino, D3, Illustrator, and … Bees!

Over the weekend I attended AT&T’s Art+Tech hackathon that challenged participants to combine technology, innovation and art to bring awareness about the decline in bee populations.

Knowing nothing about bees, some of the talks from beekeepers and conservationists taught me some fascinating things about them and made me understand the great importance of bees. Bees not only are the main of our food, they’re clever at communicating exact pollen locations (distance and direction) through dance, and can actually “see” whether a flower is filled with pollen.

The Seattle-Tacoma is home of the Flight Path project, which has turned scrub land into pollinator habitat for bees and in parallel as transformed a corner of the airport concourse for an art and educational exhibit.

In 24 hours, I teamed up with an awesome group of five and we spent all of Friday night brainstorming so many ideas until we finally nailed down our concept after midnight. The next day we got down and dirty. I took on the challenge of creating the animated visualization and decided to use D3.js to make it happen. This was the perfect chance for me to learn D3… but might have proven disastrous dabbling with a new library to build a working prototpye under huge time pressure. I didn’t think I’d make it but luckily I figured everything out and hooked up our Arduino counter to pass in live data for the visualization, hooray!

By the end, my team produced a concept for a live interactive data visualization of the beekeeping operations in the airfield. The goals of our piece was to first attract, then engage and educate the passengers about the plight of the bees.

The main display is an animated visualization mimicking a bee hive that represents live bee activity based on data transmitted from Arduino motion detectors in the hives. Each hexagon lights up and fades out as bees enter/exit the hive. A small webcam stream from inside the hive helps connect the real-world activity to the abstracted visualization.

When passersby are attracted to approach the exhibit, motion detectors sensing a viewer standing in front of a screen triggers the INTERACT phase. The flashing visualization turns into animated infographics to tell a compelling story about the decline of bees, which we hope will bring more awareness to the importance of bees and the positive impact the Flight Project for bee conservation. The final display is a live Twitter stream that collects all the “buzz” about the installation to get people to spread the word about the exhibit and about the bees.

The weekend project was a ton of fun. Not only did I meet some great people, and taught myself D3 in less than a day, my team was one of the top 3 winners of the event (a sweet bonus indeed!)


Visualizing Your Everyday Data

The Microsoft Garage hosted Everyday Data UX Hackathon last month posing the challenge to create an interactive visualization of data that surrounds us in our everyday lives.

We are always producing data; with the pervasiveness of wearables, we can collect so much information about ourselves to monitor, maintain, and improve our health. We looked at existing quantified self tools like Fitbit, Jawbone’s Up and the Nike FuelBand, which all visualize results of users’ actions but in very discrete bits of data that do not provide mid- to long-term perspectives, nor do they allow easy correlations to one to understand how to adapt or change behaviour. What if the data from those sources could be tied into dynamic and reactive visual documents to reflect, in real-time, how adjusting your behaviour could directly impact your life?

We set out to build a visualization that bridges the gulf between reflection and execution. We determined three main problems to tackle in order to achieve this goal: 1) data heterogeneity (how can we combine data of multiple dimensions to make correlations?); 2) macro overview vs micro details (how can we drill in to details and navigate our data points over time?); and 3) emotional design for motivation (how can a visualization motivate people for behavioural change?)


We explored many visualization methods to combine different dimensions of data. Metrics we were interested in were number of steps, activity level, hours of sleep, calories burned, number of floors climbed, etc. We used radar charts to summarize a person’s activities over a day, where each dimension is measured along a different axis originating from the same point. This produces a unique shape that can be overlaid on previous days’ activities to compare how you’re doing over time or it can be overlaid over a goal shape you’ve set. We also enabled detailed drill-downs to view a timeseries charting a single metric over a longer period of time, which can also be compared with other measures (e.g. calories consumed vs calories burned.)


We also proposed an aesthetic, glance-able lock screen that show’s your day’s abstract shape. Live tiles on your phone can also who you a summary of your day’s progress through an easy to digest visualization.


Our design struck a fine balance between data art and raw data with a visualization combined with aesthetics that is not only functional in correlating your multiple activities but making it easily understandable and motivating people to adjust their behaviour. For future development, we’d like to look at plugging in different data sources (currently we’re only using Fitbit data), increasing interactivity like enabling manipulation of one dimension to see its impact on another aspect (eg. can increasing step count improve sleep quality), and providing smart inferences to make the data more actionable.



Strata 2012

I attended O’Reilly’ Strata “Making Data Work” conference in Santa Clara, California this past February. I summarized a few of the interesting data visualization sessions I attended in a design lunch and learn presentation for my company. And now I’m getting around to posting it up for your viewing pleasure.



I just downloaded the AntiMap Log iPhone app to try out on my next snowboarding trip. The mobile app allows you to record your own data in real time as you are out and about, whether it be mountain biking, skiing, running or driving. Collected data such as latitude, longitude, compass direction, speed, distance, and time, can then be analyzed and visualized with a suite of AntiMap tools: AntiMap Simple and AntiMap Video.

Originally created as a snowboarding/ski application, AntiMap Video syncs riders’ video footage with real-time stats, giving an impression of a video game:

AntiMap Simple is an HTML5/Processing visualization for the log data. The visualization below is for the same snowboarder. AntiMap describes the visualization:

Circles are used to visualise the plotted data. The color of each circle is mapped to the compass data (0˚ = black, 360˚ = white), and the size of each circle is mapped to the speed data (bigger circles = faster). The same data used in this demo, was used in the AntiMap Video snowboarding application. You can see from the visualisation, during heelside turns (left) the colours are a lot whiter/brighter than toeside turns (right). The sharper/more obvious colour changes indicate either sudden turns or spins (eg. the few black rings right in the centre).


Correlation or Causation?

Here’s a really amusing illustration of how you can prove misleading statements by simply putting 2 graphs together. I especially loved Fig. 6.

via Fast Company


IDEO Labs Exquisite Corpse Experiment

IDEO Labs put together a collaborative and non-linear visual story inspired by the exquisite corpse style of storytelling:

The exquisite corpse model is rooted in the surrealist movement, and we are inspired by how many experiments currently in public domain play with its framework (or lack thereof). Our take on the model—in which we essentially asked a group of collaborators to submit sentences/fragments—was to create a dynamic visualization for the “exquisite” story our writers had crafted. These collective fragments formed a base on which we layered sensory artifacts, from voice-over to tagged visuals, and we were curious as to how far we could take the experience.

They asked 150 people to submit a Twitter-length sentence. Using those fragments, they compiled a 1600-word story narrated by a single voice and illustrated it with images from Flickr linked to key words.

via Core77


MIT’s Recompose Concept

MIT Media Lab’s Tangible Media Group have developed Recompose, an experimental touch interface that provides tactile feedback.

Recompose is a new system for manipulation of an actuated surface. By collectively utilizing the body as a tool for direct manipulation alongside gestural input for functional manipulation, we show how a user is afforded unprecedented control over an actuated surface.

Made up of motorized tiles that pop up/down, the 3D interface can be directly manipulated by pressing down on the tiles or simply using gestures by waving your had over various areas of the surface, which move in response to your input. The feedback is a 3D visualization of the user’s physical interaction with the tiles. A camera and projector, combined with computer vision are used to recognize and understand the language of the physical interactions.

via Fast Company


Splendiferous Culinary Tools

Ever since I started taking culinary arts classes back in the fall, I’ve developed an appreciation for beautiful and well-crafted kitchen tools. Heck, I even stroll through Williams Sonoma for fun.

Pop Chart Lab made a detailed mapping of over 100 kitchen implements. I love the visual language in this poster and I learned about some interesting new tools.

via Fast Company


Flight Search with a Twist

As an avid traveller, I’m a seasoned user of flight search aggregator tools to find the cheapest and most convenient flight that fits my requirements. Tired of scanning through tables of text, I was delighted when I played around with the user-friend Hipmunk, a new flight search tool that visualizes all the flight results in a timeline that makes it easy to read, understand and manipulate.

First off, I love that I can constrain the search to only Star Alliance network since I’ll only fly those airlines to maximize my Aeroplan points.  Once the search is performed, the basic information such as price, airline(s), departure/arrival airports, number of stopovers, stopover airport, flight duration, and departure/arrival times are all colour-coded, organized and displayed in the timeline. Exact details are shown in a popup when you select an individual flight. It hides flights worse than others, decreasing the amount of visual clutter to sort through. In addition to the ability to sort by price, stops, arrival/departure times and duration, Hipmunk can also sorts by agony, which co-founder Adam Goldstein describes as

..a combined function of price, duration, and number of stops—basically the total agony you’ll experience in your butt and your savings.

The draggable departure and arrival times on the visual timeline is not groundbreaking, but it’s definitely a refreshing alternative to the existing flight search engines.

And finally, I gotta give brownie points for the awesome name.

via FlowingData


Mapping European Stereotypes

Europe’s cultural, ethnic, religious, and political diversity naturally leads to its various nationalities developing stereotypes of the Others. Graphic designer Yanko Tsvetkov created a series of entertaining maps to give us an idea of a few countries’ perspectives of their neighbouring states.

It’s interesting to note how these stereotypes typically reveal more about the country (or our perception of the them) that is doing the criticizing.

Europe according to Britain

Europe according to France

Europe according to United States

Via FlowingData


The World’s Best Countries

Newsweek provides a fascinating interactive visualization that compares the rankings of the world’s best countries by economy, politics, health, and quality of life.


The Wilderness Downtown

One of my favourite bands, Arcade Fire, has collaborated with Google and writer/director Chris Milk to create an experimental video for their song “We Used to Wait”. Made to play in Google Chrome, The Wilderness Downtown starts off asking for the address of your childhood home and then becomes in an incredible audio and visual experience that uses choreographed browser windows of varying sizes popping open or closing and displays animations of digital flying birds flying from one window to the next and a pair of feet running along a street. All of that builds up to a climax when images of your street and childhood home are blended into the video, creating moments of surprise, delight and nostalgia. Self-reflection and sentimental thoughts are triggered near the end with pause allows you to write a message to your younger self, after which animated trees sprout all along your old street.

Using HTML5 technology, the collaborators have created a technologically impressive and creatively piece of work to create an awe-inspiring audio/visual experience.


Colours in Culture

A visualization mapping of how different cultures across the globe attribute different meanings to colour. Not only is it interesting to compare the differences in how colours are perceived, but also how certain attributes or values carry meaning in a culture or not at all.

Source: Information is Beautiful


Wordle Me This

A fun tag cloud of my delicious tags. Generated by Wordle.


Cost & Effects of the BP Oil Spill

Interesting visualization of the tragic oil spill.

via VisualEconomics

Also, check out Boston.com’s The Big Picture for imagery of the devastation.


So You Need a Typeface

A humourous, yet useful guide to selecting a typeface.

via julianhansen.com


Charting the Beatles

Charting the Beatles is an ongoing project exploring the music by the Beatles through infographics. The series of visualizations take data from secondary sources like sales statistics, biographies, recording session notes, sheet music, and raw audio readings to illustrate the song keys of each album, the band’s working schedule, and the ways in which they self-reference their songs, etc. They’re really beautiful and draw you in to read the all the details. This detailed tracking reminds me of Feltron‘s data-tracking of his everyday routines. Via information aesthetics.


The Best and Worst Cities to Look for Work


Source: http://www.good.is/post/transparency-the-best-and-worst-cities-to-look-for-work/

Now that I’m done with my masters program, it’s time that I start looking for a job. GOOD published an interesting infographic visualizing the unemployment rates in American metropolitan cities.

For myself personally, location is appearing to be a factor as to the kind of opportunities I can find relating to interaction design or user experience. For example, after living in Hong Kong I’ve come to realize that over there, design is not highly valued as a business strategy but still strongly perceived as simple re-styling or giving different physical forms. Toronto, on the other hand, is home to a handful of creative design firms, particularly in web, branding and advertising, yet I haven’t found many consultancies specializing in user-centered design, especially ones seeking interaction designers. It seems that the opportunities that appeal to me are more prominent in the US, especially San Francisco, NYC and Boston, as well as some cities in Europe, including London.

Let the search continue, wherever it may lead me.


Memories Scientifically Visualized

://michelleli.ca/wp-content/uploads/2009/06/scientific-memory.jpg” alt=”Source: http://www.eurekalert.org/pub_releases/2009-06/mu-sct061809.php” width=”200″ height=”200″ />

Source: http://www.eurekalert.org

For the past few weeks I have been thinking about memory as my thesis project aims to design around memory recording, sharing, and recollection. Thus, it was quite interesting to read that scientists have just recently captured images of memories being formed at which point new proteins are created at brain synapses. This provides a step forward in helping to understand the mechanism of long-term memory as well as the memory-related diseases and impairments.


Another Use for Post-its

Post-its are a versatile tool for designers for brainstorming and organizing thoughts. It also adds a little colour to an otherwise dull whiteboard!

A student from Savannah College of Art and Design created a fabulous stop-motion video using Post-

Fortius Fitness – Total Body Transformation Program

it notes to animate. The Röyksopp song adds the perfect “pixelated” feel to the entire piece.


Travel Experiences

I just started a new project for my Collaborative Workshop run in conjunction with Tsinghua University in Beijing. My team consists of 3 members from Hong Kong and 3 from Beijing so it will be an interesting exercise in communication and teamwork . The project is focused on the “independent tourist on the go,” where the independent traveller is defined as one that arranges their own travel plans rather than going on an organized tour or travelling on business.

We targeted a broad group of travellers that we categorized as the Wandering Traveller, who is spontaneous, free-spirited and loves to connect with the local culture and people while exploring the world. To get a better sense of these travellers, we set up an online survey to collect stories, memories, and photos of people’s travel experiences to understand their values, motivations and what they deem important while abroad.


From our collected surveys, we categorized our wandering travellers into 3 types: those who are “On My Own” enjoy travelling solo and being challenged, “Laid-Back ‘Locals'”  do not feel the need to sightsee but rather just enjoy the place as an everyday local, while those who are “On a Mission” are goal-oriented and create schedules to see and do as much things as possible.

We decided to target our use group to that of the solo traveller as these travellers seemed more varied and interesting. We conducted in-depth interviews to get a better sense of their various backgrounds and demographics, their motivations for travelling alone, and to understand their different concerns and needs while travelling.




After the interviews we were able to illustrate a more detailed description of our target group: the Solo Culture Seeker.


These people come from all around the world of different ethnicities and speaking different languages. We found that many of them tend to travel outside their own geographic area (and outside their own comfort zone). We found a correlation between sociability and the level of adventure exhibited by travellers, that is, the more sociable the traveller and more willing to communicate with other strangers, the more adventurous he/she tends to be.





“My Documents” Visualization

In my Information Architecture and Visualization class that just started two weeks ago, our first assignment required us to come up with a visual representation for the structure of our own My Documents folder. We were not allowed to clean it up or organize it further before analyzing our folder structure. During my study I realized how many levels of folders I actually had – some went to 7 deep. I had a few concepts in mind ranging from 2D graphical designs to 3D objects and installations: Mondrian-styled rectangular patterns, nested boxes, bookshelf analogy, etc.

In the end, I came up with an architectural-styled paper sculpture where the base rectangular area is the root folder and the other stacks of rectangles are the subfolders within that root. The height of each folder is denoted by the number of files that it contains. I decided only to visualize 3 levels deep, otherwise it would become too complex.

And here are my concepts

One problem I realized halfway through construction was that I had cut the sizes of the subfolder rectangles to fill up the entire root folder rectangle – this actually made it quite difficult to distinguish the actual boundaries of each subfolder. Higher up in the structure, however, I allowed for more room between the stacks, which makes it easier to understand. In 3 weeks I will be exhibiting my work with my classmates, so I will have these problems resolved by then.


Visualizing Mobility Patterns

Dan Boyarski, former head of Carnegie Mellon’s School of Design, visited HK PolyU as a guest lecturer over the past three weeks to conduct a design studio workshop with my class.  We were asked to collect data about ourselves over five days to create a visual representation. In this sense, it becomes information design in the form of a self-portrait.

I tracked the locations I visited, my routes and the modes of transportation I took, then sketched out my patterns following the form of the Hong Kong map.  I also kept track of the times at which I travelled so I considered the use of colour to differentiate the different days and times of travel.

Because of the rich data set I had collected, it was important to convey the information on both a macro and micro level for the viewers. Macro view gives a big-picture idea of the data set (the map pattern), while micro view communicates the details of my travels, such as the date, time, exact location, duration. I created a colour-coded timeline to engage viewers on the micro level, which also acts as a legend for the line colours and types on the map.

I presented the final piece as a printed poster 23″ x 16.5″.

Detailed Views

Data Set

Concept Sketches