Click on image to see full size
I browsed through my old computer the other day and found this piece. It is the first assignment I worked on when I was an intern at The New York Times in the summer of 2006.
Karakuri are mechanical puzzle boxes created by Akio Kamei, a Japanese puzzle designer. The artist in his own words:
At first I began to create wooden boxes with an idea of a secret box and then looked for a broader meaning. I gave it the name “Karakuri box” (trick box) rather than the secret box. Finally “Karakuri box” (trick box) was born. The trick box which you open yourself, can’t be opened if you don’t enjoy humor. Someone who has no experience with trick boxes and others who have many experiences, toe the same line. Sometimes the knowledge or the experience disturb his trial. I’m usually thinking about how I can deceive people with my puzzles. And so I wonder if my personality has come out in my work.
Click on image to see full size
Last year I went offline for a few months to work on a couple of personal projects and an iPhone app for msnbc.com. About a year later and after the iPhone project fell through, I was asked to design a new msnbc.com mobile version. The target audience is people who own devices that have Webkit-based browsers such as iPhone and Google Android phones. The project was a huge undertaking especially for an inexperienced web designer like myself. For people who don’t know me, I am more of a data visualization person than a web design person. I have designed and launched a few successful brochure websites, but have never worked on a large scale one like msnbc.com. Given that most other large news organizations have released their websites for these devices, we wanted to challenge ourselves to do something better.
Continue reading »
Click on image to view the map
Update Feb 24, 2010: I just learned that this piece won a Best in Business award for creative use of online media from Society of American Business Editors and Writers. I want to thank all the participants who made this project possible. Cheers!
The Adversity Index, from msnbc.com and Moody’s Economy.com, measures the economic health of 381 metro areas and all 50 states. Each area is in recession, at risk, recovering or expanding. On this map you can explore changes in the four components of the index: employment, housing starts, housing prices and industrial production, each shown as a percentage change from a year earlier.
This map contains more than 350,000 data points. It was a challenge because we didn’t have appropriate database tools to support the map. We had to split the data set into five big chunks and merged them in Flash. I wrote a tool that allow loading data from different subsets and merged them into one data structure that was plotted on the map.
Click here to view the map
Awards and honors
2010 – Best in business from Society of American Business Editors and Writers
Click on image to view the map
This is a map I created recently for the Environmental Defense Fund. It shows buildings in New York City that burn dirty oil. The map contains information about 9000 buildings that burn either type 4 or type 6 oil. Both types are bad for the environment.
My biggest challenge with this map was the sheer amount of data it has to load, parse and plot. Fortunately, AS3 is fast. It is a pleasure to see the parser churns through thousands of lines almost instantly. Another factor that made my life much easier was the map framework I used. I want to thank the people at stamen.com and the developers of modest map for creating an amazing framework. With just a few tweaks I managed to plot thousands of points on a map.
It seems like the story got a lot of attention. It was mentioned by The New York Times and Daily News.
To view the map, please click here
Click on image to view the map
We learned and utilized many new technologies in this project. Unlike the Adversity index map where we didn’t have proper server-side tool to handle big data set and we had to use hacks, this project uses a brand new server-side tool to do the heavy lifting.
We built the server-side code using Django framework. This is the first time we are using this framework and it is awesome. It makes my life as a web developer much easier, especially when I was completely new to it.
For this project, we built a framework in AS3 that allows flash to communicate with the server and to make requests in real time. The framework makes it easy to parse responses from the server and deliver them to different parts of the application. With that, we are able to support deep linking, back button and breadcrumb.
Last but not least important is the new map engine I built recently. There are two parts to this. The first part is the script I wrote that runs through any ESRI shape file and parses it to native AS3 code. The second part is the engine that takes the code and renders it on the screen. With this engine, we can create pretty much any kind of maps quickly and efficiently.
View the tracker
Click on image to view the map
I am particularly proud of the world map because we managed to create it from scratch in a day. Even better, I designed the code so that we could reuse the map again without any extra development time. That means editors can just plug in a new data set and the map is ready to go.
View the world map
View the U.S. map
Design, Map, Programming
I worked on this project a couple months ago. The data set was interesting and I had full control over how to design and implement it, which was a lot of fun. Because of the short deadline, I didn’t manage to implement all the little details for this map. But in the end, it turned out well.
Click here to view the map
A List Apart
AIGA
Alberto Cairo
Andre Michelle
AS3 Design Patterns blog
Data Mining blog
Flowing Data
Information Aesthetics
Innovative Interactivity
Interactive Narratives
Mark Boulton
News Designer
Stamen design
Subtraction by Khoi Vinh
Typographica
Visual Complexity
Yanko Design