GAFFTA visualizing and mapping data, days 3 and 4

By Marcus Wohlsen | Feb. 28, 2012, 5:15 p.m.

If there's any one concept I've taken away from the 12 hours I've spent learning from mapping and data visualization designer Michal Migurski, it's that maps themselves are data visualized. The format is so taken for granted as a way to render information that I think most of us tend to view maps as landscapes in themselves, rather than representations. I know I tend to mistake the map for the territory.

During our third day at GAFFTA's data visualization and mapping class, Migurski talked abouit cartography, specifically all the different ways geography gets sliced and diced. The Spherical Mercator has become ubiquitous on the Web, so much so that it's easy to start believing that the world just looks this way. But viewing the crazy variety of projections creative cartographers have come up with the slice a sphere, you're reminded that the ways our world is visualized are shot through with choices and biases about how the planet looks. As one classmate observed, in China the United States is not in the middle of the map.

Migurski also talked about scale. He said the scale you choose for a map depends on the information you want to present. The point may sound obvious, but again because of the Web (i.e. Google maps), I take for granted that a map zooms, that I can change the scale to show different levels of detail. This is helpful when I'm working out driving directions.

But what if I wanted to see maps of watersheds? Or disputed territories? Or moutain ranges beneath the ocean? The large-scale public domain data sets at Natural Earth provide the necessary wide-angle view. If you want to navigate Burning Man, on the other hand, you'll need these hyper-detailed user-generated maps of Black Rock City made using OpenStreetMaps.

Migurski introduced us to a great mapping tool called TileMill that nicely streamlines the process of building your own map/data mashups. TileMill uses a CSS-style syntax called Carto for managing the presentation of data on your map. One of the data sets we layered over part of Oakland's Lake Merritt was a collection of aerial photographs taken by the folks at GonzoEarth, who use ultra-sophisticated techniques like strapping cameras to helium balloons with rubber bands to get satellite-style imagery without leaving the stratosphere.

(In the course of this discussion, one classmate mentioned he had duct-taped a
GoPro HD camera
to a $65 radio control airplane he bought on Amazon to create a DIY surveillance drone. The footage is great.)

On day four, the class turned its attention from maps to other data visualization genres. Migurski ran through some of the marquee projects he and his cohort at Stamen Design have put together over the years. A few years ago, the MTV Video Music Awards served as a kind of watershed for Twitter, which sent some of its most creative people to help bring viewers "inside" the venue via their tweets. Turns out Stamen was the shop that designed the visualizations.

Other Stamen projects included a treemap to visualize tweets during the 2010 Winter Olympics in Vancouver. The size of the squares shifted in real time depending upon what tweets were trending. Stamen used Flash for the Olympics project, but Migurski said he's mostly designing in iPad-friendly Javascript these days. Specifically he's spending more of his time using the D3 dataviz Javascript library, yet another creation of prolific ex-Stamen intern Mike Bostock, who also developed Polymaps.

Migurski showed us how D3 uses jQuery to bind data to entire sections of HTML documents rather than individual elements, which made building a basic bar graph, well, basic. The next few examples got a little dense for me as we learned how to apply the same techniques to SVG elements to create pie charts. I haven't worked with SVG before, but the gist I took away was that for pie charts, D3 counts data increments around the circle like a clock and then sets the angles needed to draw the slices of the pie. We also learned how to use D3 to put blobs of varying sizes on maps. None of the results were particularly sexy, but I can see how once you master the basics, it's just a matter of few tweaks between a bar chart and a streamgraph.

D3 seems like a slick tool with a big future. As I've mentioned earlier, the dataviz wizards at The New York Times have already made D3 a part of their arsenal. The overarching practical lesson I take away from these four classes is that the future of data visualization like Javascript, the native tongue of the operating system our browsers are becoming. You could learn other, more narrowly tailored approaches visualizing data, but nearly everything we saw over the course of 12 hours, from one of the leading shops doing this kind of work, had Javascript behind it. What's more, the code is pretty damn elegant, as much as this noob is able to discern such things.

While the stylistic trend in data visualizations tends toward the gee whiz, my favorite slide of the night was the in-house visualization Stamen uses to track its projects. It's a fairly standard graph, except for two small additions: an angry bird and a green pig. Instead of "hitting their numbers," the team at Stamen has a much more concrete goal to aim for: If the bird misses the pig, they start losing money. Just a goofy little thing, to be sure. But it's remarkable how such a modest perceptual tweak can change the way you look at things.

blog comments powered by Disqus