No Comments

I've been working on a small side-project for a few weeks now (although it's probably been less than a week of actual work if it was contiguous). At the NYC Big Apps Developer Day, I didn't really have a project in mind, so I decided to just explore what was out there. I've been a fan of d3.js for a while, and decided I wanted to play around with the geographic API and make a cool choropleth map like they have in their examples.

I've learned more about the intricacies of cartography than I care to know in the past few weeks and working with the geographic framework has been tricky. Projections are easy to understand but if you want to do things like "scale the projection so that it is perfectly aligned in the center and zoomed to fill the canvas," that was actually not trivial. d3.js's zooming and mouse interactions were also kind of janky; I had to add a small hack to include a reset feature so that users could return to the original canvas state (since zooming in and out are centered on a mouse cursor it seems).

Overall, the project has been coming along nicely. At some point, I decided to crack open Twitter's bootstrap framework too, and prettify the page. The goal for me was to create an application that would take any arbitrary NYC zip code-based dataset (with a specific format in JSON), and provide the user with a few different visualizations of that data. Right now I only support a decile quantization by different (i.e. sorted and divided into 10 buckets), but I think I can start adding different scales as options since d3.js is really flexible in that regard.

There's a couple of other UI tweaks I want to do and elements I want to add, but overall, I'm pretty happy that it works and looks pretty good right now. Of course, I need to document the actual format as well and how the interface interacts with that functionality.

It's at for those interested, and the source is at my GitHub account because in addition to being an experiment for myself, I wanted to let others have access to the data (like the GeoJSON NYC zip code boundaries that I cleaned up) and not suffer through the quirks of d3.js.

Be the first to write a comment!