Maps

Adversity Index Map

Adversity index map
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

Dirty Heating Oil in New York City

new york oil
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

Stimulus tracker


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

Swine flu infections around the world and in the U.S.

US Swine flu map
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

EDF: Global CO2 Emissions Map

EDF CO2 emission prediction 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

Unemployment rate from '07 to '08

msnbc.com unemployment map
Map, Programming

The data set shows very interesting patterns. The coastal states got hit hard by the housing crisis, so their unemployment rates are worse than the rest of the U.S. You will probably notice that Michigan, house of GM, Ford and Chrysler, is doing pretty bad. In fact, it has the highest unemployment rate as of October 2008. The only state that shares the same honor with Michigan is Rhode Island with 9.3 percent unemployment.

The coding part of the project took me about a day to write. Kriss Chaumont designed the layout and manipulated the data. We will keep updating the map every month when the new data comes out.

Click here to view the graphics

The work behind msnbc.com election maps

msnbc election 08 map widgets

Now that the election is over and I am well rested, I want to look back at what we have worked on all these months at msnbc.com. A few people wrote me asking about the process of creating a large scale project in a fast paced environment. Here is a longer answer to that question. Since this post will be a bit long, I will break it into several sections.

Pre-election content

We put a huge amount of effort into the Decision ’08 Dashboard data explorer map. Many people had been preparing interactive content for our election coverage for months before I arrived. By the time I started in July 2008, most of the core functionality of the map had been developed. My first assignment was to support other developers and designers, by preparing data and writing small utility classes. Next, I created the polling data display and helped with designing the fundraising data display.

msnbc election 2008 data map
Click on image to see full size.

We wanted to map every data set we could find that came with geographic information. There were at least 10 data sets we wanted to map, but we launched our politics front map with only six data sets. We added user opinion, polling, candidate appearances and fundraising data over the next several weeks.

Most of our data sets were huge and we needed the technology to support and serve them to a large audience. This is where the team that builds our publishing platform came in. They built a new, user-friendly database tool just in time for us to use for the election.

Continue reading »

Page 3 of 612345...Last »