Art & Design Distribution

Mar. 2016


This is a data visualization project visualizing the data from the API from on a world map. The goal of this project is to combine geometric graphics with unreduced cultural data, which the original form was preserved, in a three-dimensional visualization.

Advisor: George Legrady

Tools: Processing(Java)

Dataset: Behance API

Exhibition: Chosen to be shown in AD&D Museum, UCSB

This project is showing the user data from 150 cities with the highest GDP around the world from Behance. The metadata are the Behance user quatity and the activeness of those users, which are followers, followings, appericiates and views in that city.

Also, viewer can use mouse to hover on the city on the map to check the name of the city and to click to check the most recent projects, the creative fields they belong to, and the numbers of views and apperciates of that project,

Before I working on the data from Behance, I found the List of cities by GDP made by Brookings Institution from wikipedia. And to set the data of the cities on the actual location of those cities, I used this website: and copied the value of latitude and longitude into the list. Also, I added another column which containing the data of the population of the city respectively by gathering the data from Wikipedia and adding the value of population into the new column.

In terms of the use of Behance's API, I downloaded about 20 thousand files, and used 10 processing file to calculate those ten portions of data, before gathering them together into one csv file. Also, for the live data part, I used Behance's API key to request the most recent project of each city and searching in the "creative field" provided by JSON from Bechance to show the cover picture and the fields. "Creative field" is a JSON object containing strings describing the field the user is working in, like "Graphic Design", "Interaction Design" and "Digital Art".

I set the economic data on the reverse side. Each pyramid represnts a city in the list. The length of the bottom edge of the pyramid represents the population of that city, and the height of the pyramid represents the GDP of that city.

When I turn over the map, I found that the cubes which represent the user quantities of cities do not match the economy pyramids. The cubes located on eastern Asia is not as big as the pyramid they have which means Behance is not popular in this area. This may be caused by the difference in language. Besides, since China is an developing country, I think it should take some more time to see Chinese pay very high attention on design field.

The biggest cube is located in London. And New York, Los Angeles and London are three center of cities that have large cubes.

The hight of the tower is decided by the number of apperitiates / views / followers / followings of the users from that city. And the brighter color means there are more users in that city are from fields of new media or interaction design. I think that can display which city is surrounded by high technologh and willing to develope it. And the brightest color is in California, US.

I clicked on the cities to check the most recent projects from there. The screen shot displays the projects from Beijing and Sydney. And these projects are related to the kinds of creative fields they belong to.

The size of the image represents the times this project has been viewed. And the height of the image represents how many users apprecited this project.

Link to a more detailed documentation of this project.

This Project will be translated into P5.js which will realize all the interactive functionalities in the browser soon.

Visualizing Time Oriented Data
in Virtual Reality
In Progress / Processing / Unity / Oculus
Event Poster Design End of Year Show 2017 / MAT UCSB
Flocking around Water Augmented Virtuality / C++ / AlloSphere
Tourism Navigation Device
for Qinhuai, Nanjing
UI Design / Product Design / Prototype / Cultual Research
Star Wars Nebula Virtual Sculpture / Processing / MySQL / SPL Database
AR Navigation App Augmented Reality / Android / OpenGL ES / Vuforia / UI Design
Art & Design Distribution Virtual Sculpture / Processing / Behance API
Reading Preference
about Sports
Processing / MySQL / SPL Database
Supermarket System
UX Research / User Centered Design
All-set App UI Design / Prototype
Nanjing Breakfast
Branding / Cultual Research / Student Research Training
Luminaria Physical Computing / Arduino (Electronics)
Doodle in the Air Virtual Sculpture / Processing / Kinect