CPSC 683 - InfoVis

exploring information visualization


October 2017

Github Contributor

(https://github.com/diannayim) I thought I would take a look into how much I’ve been committing to GitHub over the last little while, and turns out the answer is that I have been quite active both over the summer until now. An… Continue Reading →

League Improvement

(http://www.lolking.net/summoner/na/29562954/Dimsum1080#/profile) I’m a pretty obsessive gamer – the more stressed out I am, the more I game to try and alleviate that stress. This graph shows my progress in League of Legends from February until now. That huge spike at… Continue Reading →

Iron Ring Glory

While the iron ring that I got for completing my engineering degree does not look all that impressive, it actually has quite a bit of meaning (aka the $20,000 I spent for my undergrad). With this in mind, I realized… Continue Reading →

Lack of Design != Lack of Awesomeness

Went to Bro’kin Yolk a couple days ago with a couple friends, and this is the order that I got. On the outside, it didn’t look that great, but by the gods was it the most amazing thing I’ve had… Continue Reading →

Beauty in Websites

(https://www.facebook.com/gamersboard/videos/1742871752413182/) The picture is actually completely meaningless without watching the video, so please do watch the video ūüėÄ but this is a visualization of music by using drawings of the bike travelling over various lines. I think this is probably… Continue Reading →

Twitter Physicalization

The Data Necklace, Stef Lewandowski I have been trying to think of different physical mementos I could create with my text message data while looking for some examples I came across this. It is a necklace physicalization with a year… Continue Reading →

I like how you can see intensity and details about the match all in one.

youngest leader in the EU

source: https://www.economist.com/blogs/graphicdetail/2017/10/daily-chart-9 This is a very simple visualization. However, I like that they have used the date of birth rather than the age for this visualization. It clearly shows the wide range of data distribution.

World most photograph buildings

source : https://architizer.com/blog/most-photographed-locations/ This map has similar distribution to the other characteristics such as population density or income.Specially location is a tourist destination, it is more likely to photograph and share online.

Appreciating the Beauty

(artlogic.net) This is probably one of my favourite designs of websites I’ve ever seen. I found it a couple years ago when working on my web-based design project, but the way everything flows in that website as well as the… Continue Reading →

source:¬†http://www.sugarstacks.com/beverages.htm?utm_source=DesignTAXI&utm_medium=DesignTAXI&utm_term=DesignTAXI&utm_content=DesignTAXI&utm_campaign=DesignTAXI I think most of the food does not show the what it contain. Even though there is a text description on contains, most of the people ignore that or does not read it. I think this type of visualization… Continue Reading →

US property value

source:¬†https://www.citylab.com/equity/2015/07/mapping-the-us-by-property-value-instead-of-land-area/397841/ This map uses the property value to resize the areas. It shows that areas close to the sea is larger compared to the areas middle of the country. However, I find it is difficult to identify the areas by… Continue Reading →

US: Health Care

source:¬†https://medium.com/@sohanmurthy/visualizing-americas-health-care-deserts-675f4502c4e1 source:¬†http://flowingdata.com/2013/08/27/in-search-of-food-deserts I like these maps draw attention to where the problem is severe. However, the first map does not provide enough information (in text) to understand the graph. If the visualization is not self explained, it is important to… Continue Reading →

Music Confusion

This is a picture of a document my mom had me print for her a while ago, and it’s some music composition for her Chinese drum class. I’ve been pretty musical all my life, but when I look at this… Continue Reading →

Incorrect Representation, ft. Me

This is a small snippet of my resume, but I remember when I went down to San Fran to interview for Google, and one of the interviewers asked me, “What exactly do these percentages mean?”. And at the time, I… Continue Reading →

Work Scrum Board

This is part of our scrum board at work, with all of my coworkers being another colour. I thought this was really interesting because even though everyone had about the same number of post its on the board, some of… Continue Reading →


This photo quality is horrible, but I took it on a drive home a couple weeks ago. I thought the sunset looked was absolutely beautiful, and made a really nice colour scheme with the sky.

A History of Everything Notable

Source An interactive visualization of the timeline of anything notable that has ever happened. The way the page is laid out lets a user see the frequency in which notable events happens over time. There’s a lot of customization available… Continue Reading →

Listen to sorting

Source You cant show it, but this is an interactive visualization that lets you hear multiple types of sorting algorithms as they sort. There’s the ability to change the size, type of sort, speed, etc. Listening to some sorts on… Continue Reading →

Languages in the World

(http://snip.ly/pJsZ#http://www.puffpuffproject.com/languages.html)   The above is an example of an interactive map made by DensityDesign which serves to introduce non-linguists to all 2,678 languages spoken in the world. The visual also allows you to explore language families, where they are most… Continue Reading →

seeing the invisible

still thinking about motion and traces of events, and got thinking about the particle accelerator at CERN. They use detectors and visualizations to make subatomic particles and their tracks visible to the naked eye. Snapshots of incredibly small and incredibly… Continue Reading →

A History of Alternative Music

Similarly to my last entry, I present another music visualization that I don’t know how to read. This print (created by James Quail) maps 300 alternative artists to the circuit diagram for a transistor radio. I know that this is… Continue Reading →

Augmented Reality Sandbox

UCLA’s youtube channel, video title: UCLA’s Augmented Reality Sandbox, posted July 22 2015 https://www.youtube.com/watch?v=CE1B7tdGCw0 ,¬†Linked October 2017 This interactive physicalization is so amazing! You can move the sand around and it will project a topographical¬†layout on top. It will simulate… Continue Reading →

Love the simplicity of this. Although I can’t read it, the use of colour and clothing is very effective.

From Global Forest Watch. When you see the news and then see what is essentially mapping of live data, it’s a very useful visualization for anyone effected.


Of all the times I’ve been to this friend’s house, I never noticed the pattern on the curtains in his bathroom is actually made of little soldiers. At a glance it only looks like some pattern of red circles and… Continue Reading →

traces of motion

For my research, I‚Äôm thinking a lot about how to visualize histories of motion – traces of where people have been in a space – and I keep coming back to something like tracks in snow. The space is defined,… Continue Reading →

Layered Ads

A picture I took of a flyer board across from good earth in ICT. Essentially it visualizes all the ads and notices that people want you to see over time. It could even be interactive time-wise by tearing down newer… Continue Reading →

I’m a Barbie Girl

Source A plot of the repetition of words in the song Barbie Girl. If you get a chance, watch this¬†video which explains the layout of the graph. then read this¬†which also explains it. Using this kind of layout, it is… Continue Reading →

Oil Tanker Plots

Source The geo-locations of oil tankers as they update their coordinates. Whats really fascinating about this is that there is no map or lines being drawn. This is entirely a scatterplot of when tankers updated their position. Geographic lines and… Continue Reading →

Memory Addresses

(http://www.avr-tutorials.com/sites/default/files/PUSH2.jpg) Memory addresses are usually represented spatially even though they aren’t as organized within a computer as the visual would lead you to believe. These representations are used to help viewers understand memory placement in a more intuitive manner.

Circle of Fifths

I’m going to be honest: I don’t really understand this visualization. It was drawn by jazz musician and composer John Coltrane; the article says that’s a circle of fifths and goes on to explain its relevance to general music theory… Continue Reading →


  Oct 16 “Audio is a powerful device that can add emotion or context to a story. Unfortunately audio clips force uncomfortable choices: read or listen, but not both. Until now. SoundCite is a simple-to-use tool that lets you add… Continue Reading →

Smartphone Skirt Fashion Technology

Nokia partnered up with¬†Fyodor Golan to create this smartphone skirt. It uses 70 screens “which appear to be moving because of the installed software, which is built to mimic its surroundings.” It is a literal metaphor for fashion technology, and… Continue Reading →

NY Fashion Week Collection Colours

This visualization is also from the NY fashion week. It is a “fingerprint” of the collections. It depicts the colour that goes into the collection to highlight the trends. “Each look is broken into a minimal stack of color bars,… Continue Reading →

Beads of Courage

I went to a Beads of Courage charity¬†event last year and learned about this organization, it wasn’t until now I really thought about it as a physical visualization. Kids with cancer receive a bead for a variety of things from… Continue Reading →

Front Row to NY Fashion Week

I have an active interest in fashion, so this “Front Row to Fashion Week” visualization really caught my eye. These are all the outfits from one designer, Narciso Rodriguez, and you can scroll over them to have a magnified view… Continue Reading →

Data Sketches

Here is a slide from my presentation that shows the data sketches that I have been working on to develop the idea for my project. I have focused on various parts of the data and various types of graphs.

Holomaps in Your Living Room

Holomaps is an augmented reality app that lets you view geospatial data through AR glasses ie. the HoloLens. In my opinion, it is a really cool tool to interact with spatial data. “https://www.youtube.com/watch?v=8gpuYzWVP9w”  

Bulk Candy (for Halloween)!

With Halloween approaching, I felt a magnetic pull towards candy. The bulk candy section in a grocery store is a good place to visually examine what kinds of candy is popular/ available. This is a very compartmentalized view of everything… Continue Reading →

Lemons versus Limes

I went grocery shopping and noticed the supply and demand of lemons versus limes in a very visual way. Lemons are 2x more available than limes.

Titanic Survivors

Titanic is one of the first movies that I saw in a movie theater as a child, so it always fascinated me. Here is a Sankey diagram/ parallel sets diagram that depicts who survived. It is actually interactable up and… Continue Reading →

Really well done viz on employment


Well, ‚Äúproductivity.‚ÄĚ I picked up a Luxafor USB LED ‚Äúbusy‚ÄĚ indicator last year – one of the fun parts of open office environments – and it integrates with DeskTime. I figured, why not see what it can do? So, I… Continue Reading →

City and Rural Population 1890

In an interesting bit of US history (I learned about while reading this article), W.E.B. Du Bois drew and exhibited visualizations about black Americans at the 1900 Paris World’s Fair. He’s quoted in this article as saying: “I wanted to… Continue Reading →

Where can North Korea’s missiles reach?

Oct 15 An impactful data visualization + news article discussing how far North Korea’s missiles could actually reach.  

Game of Thrones Physicalization

Mild spoilers In the first season of Game of Thrones, we see the character Daenerys explain that braided hair is a representation¬†of battles won for the¬†Dothraki. If you pay attention as the series progresses you can see her hair become… Continue Reading →

London Bridges

https://pbs.twimg.com/media/DLEapQTV4AED0OY.jpg:large The image shows all the bridges in London. I liked the idea that side view of each bridges are also displayed along with their geographical locations.

Birds as visualizations and data

When Lora guest-taught infovis, she talked about the drawers full of birds at natural history museums being a physical visualization – location, morphology, etc. This NYTimes article describes taking the birds out of storage, and using the gunk that‚Äôs built… Continue Reading →

Yarnwork Math

Recently I’ve gotten into yarn visualizations, and I found this amazing article on Mental Floss that shows how math concepts can be visualized through knitting and crochet. It’s a very flexible medium, and one I think should be explored more… Continue Reading →

Data Cuisine

October 14 The other day in class we were challenged to brainstorm ideas for a data dinner. I came across a website, created by researchers, that has done exactly that! http://data-cuisine.net

Life expectancy

source:¬†https://visual.ly/community/infographic/geography/life-expectancy-birth When I first look at the visualization, I was not sure why designer has to used cures for each country rather than straight bars. It is easy to read the distance if it is linear. However, most of the… Continue Reading →

Maps with Different Goals

My last post was a map of the London transit system. This reminded me of amusement park maps which look very different. A transit map’s job is to help people plan their routes on the train which is also arguably… Continue Reading →

Visualisation of Internet Access

https://i.pinimg.com/564x/58/96/38/58963893b3d9e15b1b90ae684b964f31.jpg The PBS miniseries America has revealed this data map visualising internet access in America. Sparkling gold colour on top of a light background colour really makes this visualisation a treat for the eye. Also shows that more dense access… Continue Reading →

Diseases Spread

source:  https://www.wired.com/2015/04/see-diseases-spread-mesmerizing-graphics/ This map shows the global distribution of H1N1 from its origin (Hanoi). The visual does not use any map but this design helpful to identify the flow.

Different types of wine

source:¬†https://visual.ly/community/infographic/food/different-types-wine I like the color combination for different types of wine. The space has been used nicely. Using a large wine image attracts the attention.  

Text Overlay

Looking for information on how text has been incorporated into AR environments in general. Most of what I’ve found has been information overlay onto the user’s surroundings. This is probably not useful in my project, but interesting nonetheless! Source: realvision.ae

Agricultural 3D infographics

source: https://www.behance.net/gallery/6659287/Agricultural-infographics-Tutorial I like that this pie chart has pictures to identify the categories. The 3D view is helpful to place the image on the visualization.


My supervisor suggested to me that I should look up memorials for inspiration on how to visualize my data set. Given that my data set is about criminals and not war heroes, I think I will need a bit of… Continue Reading →

Crime data

source:¬†http://flowingdata.com/2010/06/07/san-francisco-crime-mapped-as-elevation/ The crime map used the satellite image to identify the areas. I like this visualization as location and the level of the crime can be easily identified.        

Word Tree

This is more of what I think a word tree should be. I’d like to do something a little more visually interesting for my project though‚Ķ (looks like Dr Seuss!)


I was looking at ideas for word trees as per Sheelagh’s suggestion, and this is one thing I came across. Not exactly what I was looking for, and not relevant to my project, but I just thought it looked nice!… Continue Reading →

Global blog activity

source: https://world.twingly.com/ I like this visualization provide interactive real time data visualization. Mostly blogging is dominated in north american, Europe and Japan.

Building utilization pivot heatmap

I. Yarbrough, Q. Sun, D.C. Reeves, K. Hackman, R. Bennett, D.S. Henshel, Visualizing building energy demand for building peak energy analysis, In Energy and Buildings, Volume 91, 2015, Pages 10-15, ISSN 0378-7788, https://doi.org/10.1016/j.enbuild.2014.11.052. (http://www.sciencedirect.com/science/article/pii/S0378778814010081) Keywords: Energy visualization; Building energy demand;… Continue Reading →

TY Darcy! Heatmap of Shoppers!

October 11, 2017 “From a 2014 article on Business Insider¬†http://www.businessinsider.com/how-retailers-track-shoppers-in-heat-maps-2014-1 A company called Prism Skylabs (ominous!) (and their website doesn‚Äôt load now‚Ķ) uses cameras (and computer vision?) to track where people walk, linger, and interact in a store. The pitch… Continue Reading →

Visualization Patterns

October 10, 2017 I found this to be a neat representation of what my novice infographic self would deem a directed graph (top image).¬† Clusters maintain the same colour to help easily identify / seperate.¬† The bottom graphic is almost… Continue Reading →

His and Hers

October 9, 2017 Could not find a description of this visualization.¬† However, it appeals to me because it reminds me of paint.¬† The colours are vibrant.¬† Associated data is clustered in a way that yields a colour ramp I would… Continue Reading →

Australian Prints and Printmaking

In a previous life, I had done some work in Digital Humanities and prompted by my earlier adventure stumbling on the MoMA photo visualization, I reread some papers that I thought might help me with this project. One paper (that… Continue Reading →

TY Flavia !

October 8, 2017 Apple patents vs. Google Patents This post came from Flavia and I dig it.¬† Not only does it remind me of two eyeballs but it’s clustering and dispersion is neat.¬† You can see where the focus from… Continue Reading →

Hanky Sankey

October 7, 2017 Clean sankey visualization.¬† I wasn’t even aware of sankey diagrams prior to this visualization class.¬† I may have seen them, but never knew the name or really thought about their usefulness for connecting multiple streams to a… Continue Reading →

Mmmm brains

October 6, 2017 Three dimension line rendering Рhow cool would it be to visualize the many aspects of the brain using a similar technology.  Modify perspective, fly through the brain, see the overall wiring and or most active areas.

Hans Rosling in the flesh

October 5, 2017 Hans Rosling, interacting with one of his interactive data visualizations that details the economics of countries over time.

Mushrooms, Trees, Brains and Good Stuff

October 4, 2017 I don’t have much of a comment with respect to these visualizations, I just like the overall aesthetics of the pastel colours used.¬† They remind me of trees or mushrooms in some way or another.

Birds of a feather

October 3, 2017 The natural beauty of wild birds,¬† I’ve always enjoyed the look of feathers from various species of birds.¬† I see a lot of potential when it comes to feathers with respect to data visualization.

3D Graphs meets Sim City

October 2, 2017 I feel like this three dimensional? representation can contain so many elements of data.¬† Are they all interactive in a 2d space ?¬† Probably not, but I think if perspective could be manipulated or this sort of… Continue Reading →

Circular Flow

October 1, 2017 While I don’t necessarily feel the middle portion of this visualization is easily traceable, I like the overall aesthetics of the image.

My Visual

My visual The full map when pixels overlap (generated from the data) This is the final visual that I generated from my data so far. I didn’t program any kind of “pattern” into the visual, the pattern actually emerged from… Continue Reading →

We Feel Fine

(http://www.caida.org/tools/visualization/walrus/gallery1/lhr-t3.png) We Feel Fine is a very interesting visualization that that depicts the general feelings that appear in the blogosphere at any given day. The visualization allows for six different type of analysis:  Madness, Murmurs, Montage, Mobs, Metrics, and Mounds.

Greek Pantheon

(https://pagansofnebraska.weebly.com/greek-pantheon.html) Greek mythology always involved a large number of gods, each with their own complex familial and interpersonal relationship to other deities. I used to be obsessed with mythology when I was a child and even then I’d sometimes have… Continue Reading →

Google Vs Apple Patents

(https://flowingdata.com/2017/02/28/apple-vs-google-company-structure-as-seen-through-patents/) It is well known that developments in tech is made by an innate competitiveness between tech conglomerates. Over the last 10 years apple has created about 11,000 patents and Google has produced about 12,400 with a slightly larger team…. Continue Reading →

Current Vis

This is the current iteration of my visualization project. Given a memory access trace, grid cells would flash as the corresponding memory address was accessed. Users would be able to filter from specific memory mappings to narrow their search.

Phil & Sebastian’s Compost Restriction

October 13 I was at Phil and Sebastian’s Coffee¬†and came across their new(ish) garbages. They company covered the ‘garbage’ and ‘recycling’ bins and only left the compost bin open. I thought this was a good use of design, presenting the… Continue Reading →

I Made a Long-Weekends in Canada Calendar-Vis!

Since we just had a much-needed long weekend this past week, I was wondering whether we have one every month. I decided to make this calendar-style visualization to signify all of the months that have a long weekend. I focused… Continue Reading →

London Transit

On a recent trip to London, I had to master their notoriously¬†complex transit system. Compared to Calgary’s two train lines London’s transit system looks like someone threw spaghetti at the wall.¬† At every station, they have this large map plastered¬†everywhere,… Continue Reading →

The Times That I Opened My Laptop Today

Here, I made a data visualization of the times in the day when I opened (and closed) my laptop today. The orange bubbles represent the opening and the blue bubbles represent the closing, so it’s like a timeline. First, at… Continue Reading →

Submarine Cable Visualisations

https://pbs.twimg.com/media/DLqO6nVVwAAOsaZ.jpg:large This is visualisation of all submarine cables connected to Australia, New Zealand and all the other countries in Oceania. It looks like more cables are needed for islands residing in isolated areas.

“Dazzle Ships”- How Many Ships do You See? 8, 9, or 1?

A friend told me about these when I was working in my information visualization design job. These “dazzle ships” were used in war time to confuse the opponent as to where the warship was facing or even how many warships… Continue Reading →

Animated heatmap floorplan

Thinking more about non-linear visualizations of my data, something like this might work… From http://enterpriseiotsolution.com/smart-building/


I’ve been on the hunt for ways to make a good visualization with words. I have access to photos of the people’s faces for my data set, but I think something like this would take a lot of work. Neat… Continue Reading →


Here is a nice map of the world printed on my ethos water bottle. I guess that printing translucent white on a transparent water bottle wouldn’t be the most effective way to do any sort of visualization since it is… Continue Reading →


In an amazing moment when I was struggling for inspiration, life handed me this amazing example. Object:Photo¬†is a project done by MoMA to visualize the Thomas Walther Collection of photographs. This example that shows connections between photographers beautifully encapsulates what… Continue Reading →

Google Charts

Don’t want to use D3? Try Google Charts! A simple way to add a range of different standard data visualizations to your site.

Rose of Emotion

https://mastersofmedia.hum.uva.nl/blog/2013/05/31/visualizing-individual-measures-of-emotion/ As part of my research work I was going through several emotional model and I found this rose like representation of human emotions. Although I don’t quite understand why a this particular representation make any sense rather than just… Continue Reading →

Seismographs are a perfect visualization.

Emotional Tactile Map

Emotional Tactile Map by Kate McLean http://sensorymaps.com/portfolio/emotional-tactile-map/ , Linked October 2017 It is probably frowned¬†upon to take so many pictures from a single blog but I felt these were all so relevant to my data. Regardless I promise this will… Continue Reading →

Heatmap of shoppers

From a 2014 article on Business Insider http://www.businessinsider.com/how-retailers-track-shoppers-in-heat-maps-2014-1 A company called Prism Skylabs (ominous!) (and their website doesn‚Äôt load now‚Ķ) uses cameras (and computer vision?) to track where people walk, linger, and interact in a store. The pitch is that… Continue Reading →

Beginnings of Info Vis 2

(https://en.wikipedia.org/wiki/Egyptian_hieroglyphs#/media/File:Hieroglyphs_from_the_tomb_of_Seti_I.jpg) Egyptians had developed their own method of visual communication by using pictographs to represent words. Their written system was composed of a combination of logographic, syllabic, and alphabetic elements and was composed of over one thousand distinct characters. I… Continue Reading →

The Data Viz Project

According to our presentations yesterday, many of us are still ideating and sketching concepts. I found this site that has over a hundred different visualization types. And to keep this on topic, I think the site layout is amazing– from… Continue Reading →

© 2017 CPSC 683 – InfoVis — Powered by WordPress

Theme by Anders NorenUp ↑