Mapping Data

A comprehensive experience of mapping different types of data, including time, quantities, space and etc. It is an exploration of using different colors and find various dimensions to display the chosen information. All projects are built with JavaScript, especially P5.js.

Reform Time

A conceptual clock inspired by the revolution of stars, built with P5.js.

The circles. from the smallest one to the largest, are representing second, minute, hour, day, month and year. The crazy traces are left behind as an illustration of the complexity of time. Colors are used to represent AM/PM (red/blue). The quarters are filled according to the current season.

the-clock.png
 

Power of numbers

A time-based visualization mapping the number of nuclear tests conducted by the 8 nuclear power states and the wars they have been involved in.

Jumping out of the traditional bar chart format, here, a small-multiples is used to represent the nuclear tests from each year. Using a sequential color palette to represent value from 0 to 178 (the smallest to largest total number of tests in one year in the world). Each dark line represent the total duration of a war involving the state in that row. On the right end of the war lines displayed the war names. The lines below the timeline circles (the bottom circles) are all the other non-nuclear-powered states involved in the same war in that column.

wars-nuclear.png
 

space, image, and text

A deep learning analysis on the photos attached to Craigslist apartment listing posts in New York using object detection via deep learning.

Visualization of the results in the from of an ordered “word cloud” when clicked on each neighborhood on the map (some neighborhoods don’t have posts so could be empty). Object names are displayed in a descending order in terms of the frequencies they appear in the post photos. When hover over each object name, the count will appear. The typeface is a mono display font. It is chosen to provide the “word cloud” some more “machine vibe” and “messiness" as the it is aim to show what machine tells us in the photos, and to match the “overwhelming” feeling of Craigslist. Click on any of the borough button on the left side, a borough-aggregated word cloud will appear in the geographical shape of that borough.

 
Screen Shot 2020-10-04 at 8.50.26 PM.png