Data Visualization: My Taobao

nan_myTaobao_1

nan_myTaobao_2

Project Name: My Taobao

My Taobao is a data-visualization project visualizing my purchasing history and my personal attitude on my purchases on China’s biggest online shopping website Taobao. 


Most of us have been shopping online. But how many of us know ourselves’ shopping behaviors? Do you really know yourself on shopping? With these questions in my mind, I would like to see my own shopping behavior. Through these data visualization, people are able to analysis a person from his age to his personality.

I tracked my purchasing history on my TaoBao(淘宝) account, China’s biggest online shopping website, analyzed the data I got, drew the data out by programming and created the two posters.

I presented this project in front of companies and art museums on IMA(Interactive Media Arts) Fall 2015 Final Show.


Table of Content:

  • Source Code
  • Toolkit
  • Design Process
  • What I learned
  • Further Questions

Source Code:

Link to the source code.


Toolkit:

Kimono, Sublime, Processing, Adobe Illustrator.


Design Process:

First, I used Kimono to grab data from my shopping history on Taobao. I chose item’s name, price, and date of purchase as the properties, then I generated and downloaded the CSV file.

  • Chose the type of information I wanted:

taobao-interface

  • Set three properties for item’s name, price, and date of purchase:

kimono-property-2kimono-property-1

 

  • Generated the data file and downloaded it:

 

Some try on the data:

Then I used Processing to read the CSV datasheet. I loaded my Data by using loadTable() and built a class to contain my data and different properties.

In the beginning, I also wanted to draw a map about the origin of my purchases. That’s why the items in the CSV file above also contain geography information and a city name. That’s also why my class name for items was named City. For this try, I used Processing to read the data and drew lines on a map of China.

dataviz-try1

But I found that it didn’t make a lot of sense on doing so. It didn’t show my behavior or attitude on my purchases and only related to the items I bought. So I put this idea into a backup plan.

Next:

I started to draw graphs focusing more on dates of purchase. I drew lines for each item, mapped the items on a circle based on the date of purchase, and mapped the length of the lines on the prices. I got something as follows:

 

I also further generated the images to make it prettier:test_1

 

However, the single lines neither showed a consistency well nor did it show my tendency of purchase over a year, so I refined my design and drew the graphs again using Processing.

test_3.jpg

To connect each purchase together and draw curves instead of single lines, my purchase trend could be observed better

More Development:

Further, I would like to discover myself into a next level. So I used Sublime to add categories and my level of interest on each item. And tried to visualize it in Processing.

I mapped each purchase on a map. The X Axis stood for date of purchase from 2012 to 2015, and the Y Axis stood for my level of interest. The size of the circles was related to price.

My process of drawing the data:

Layout and Graphic Design:

I used Adobe Illustrator to further stylize the graphs. I explored and tried several ways from layout to color choices. Here are the version 1-3 for the second round of design and the final delivery of the first design.

This slideshow requires JavaScript.

nan_myTaobao_1.png

My Sketches of thoughts.

This slideshow requires JavaScript.

 


What I learned:

I not only had fun in programming with data and visualizing the data. I also knew myself better in this journey of the project. From the graph, you can see I purchased more and more each year and bought relatively more at the end of a year. I realized that because my first two purchases of clothes on Taobao didn’t satisfy me, so I rarely bought clothes on Taobao. Also, I started to buy cosmetics after 2014, the year I entered in the university.

There are much more I can see from the graphs I drew. It’s interesting to analyze myself and understand myself better as a consumer.


Further study/question:

What if I can get data from the web from time to time and let the program generate the visualizations simultaneously. What if there is an API updating the data on a timed basis.