Author Archive for Andy Woodruff

Spicing up Google Maps in Flash

]This isn’t news to everyone, but it’s worth pointing out the fun things one can do with maps using the ActionScript ColorMatrixFilter. Tired of the boring old yellow and orange Google map in the Flash API (or any other map in Flash/Flex)? Lay down a ColorMatrixFilter on that sucker!

The ColorMatrixFilter, if it needs to be pointed out, essentially allows you to mix up the red, green, blue, and alpha channels of vector or raster graphics to produce exciting new colors. Adobe has a nice little article explaining it, along with an interactive demo.

Here’s a little example of simple effects I threw together for Google Maps. Click the links at the bottom for different looks.

Get Adobe Flash player

I poked around the Google Maps Flash API to find exactly where to apply the filter. If you apply it directly to the Map instance, you’ll color everything, including the Google logo and whatever else floats on top of the map. One level deeper is better, but will still color makers and info windows. A second level deeper is the spot. It’s basically like this, where map is the Map instance:

var a:Sprite = map.getChildAt(1) as Sprite;
var b:Sprite = a.getChildAt(0) as Sprite;
b.filters = [new ColorMatrixFilter([ /* color matrix values */ ])];

In the example above, “Winter” takes the red and green input channels and distributes them equally across all channels, but the blue input remains blue on output. The result is an desaturated, icy-looking blue. “Inverted Grayscale” turns everything to grayscale, but additionally sets the map’s blendMode property to “subtract” and sets it against a white background. That inverts the grayscale image for a somewhat stylish effect.

Now, let’s face it: this is a quick and easy but very limited method for “customizing” a map. (And to be honest, I’m not sure how kosher it is according to the terms of service.) It can make a map look cool, but applying the effect to pre-made tiles means that you’re altering the colors of all features on the map. You can’t keep the official blue and red of interstate highway shields, for example.

So keep this little trick in mind, but be more excited about actual customization (and open data) with CloudMade.

Election map follow-up

After posting our election map last month, we received a number of excellent comments and suggestions. It’s late, but I thought I’d finally post the couple of variations of the map that I’ve managed to find time to put together. The maps below do two things differently from the original:

  • Vary the brightness of counties by population density rather than total population. This was a frequent suggestion. I think it has a few of its own drawbacks too, but it looks pretty good.
  • Different color schemes. Just for fun, I’ve used the purple color scheme that has become common in recent elections. I also liked the suggestion in one comment to saturate colors by margin of victory, so I’ve done that too. In these, full blue would be total Obama domination (Obamanation? Obamadom?), full red would be the same for McCain, and gray is an even split.

No snazzy posters this time. Just a few map snapshots.

First, the original colors mapped by population density, as posted in the comments on the original post.
Election map, population density

The purple color scheme. First by total population:
Purple election map with county populations

And by population density:
Purple election map with county population densities

Margin of victory by total population:
Margin of victory election map with county populations

Margin of victory by population density:
Margin of victory election map with county population densities

Apologies for any trouble seeing the images. It’s tricky to find a brightness that will look right on every screen.

Panning and zooming tutorial

Perhaps the most basic capability of any custom interactive map we make is the ability to pan and zoom the map.  That is, after all, the way to make something that might be the size of a wall poster in print fit on a computer screen and still be readable.

On my personal site I have posted a very basic tutorial and example of ActionScript code for a simple version of the way I typically code panning and zooming.  If you’re looking for a starting point for panning and zooming, check it out.

Based on my own experiences, if you’re looking for basic ways to improve upon that minimal functionality, consider these:

  • Tweening zoom changes
  • Replacing vector graphics with raster while moving the map (faster performance)
  • Dynamically drawing and placing symbols on the map
  • Drawing geographic data (shapefiles, kml, etc.) into a pan/zoom map

A new kind of election map

Update, Dec. 22: A few variations of the map technique are posted here.

2008 election results with population

We spent some of our spare time last week exploring data from the 2008 presidential election and thinking of some interesting ways to visualize it. Above is one map we put together.

One thing we sought to do was present an alternative to cartograms, which are becoming increasingly popular as post-election maps. Cartograms are typically offered as an alternative to the common red and blue maps showing which states or counties were won by each candidate, wherein one color (presently, red) dominates the map because of the more expansive—but less populated—area won by one candidate. Election cartograms such as the popular set by Mark Newman distort areas to reflect population and give a more accurate picture of the actual distribution of votes. A drawback of cartograms that we’re very aware of, however, is that in distorting sizes, shapes and positions are necessarily distorted, sometimes to the point of making the geography virtually unrecognizable.

Our map is one suggestion of a different way to weight election results on the map while maintaining correct geography. What we’ve done is start with a simple red and blue map showing which candidate (Republican and Democrat, respectively) won each county in the lower 48 states. Then, to account for the population of those counties (or, the approximate distribution of votes), we’ve adjusted opacity. High-population counties are fully opaque while those with the lowest population are nearly invisible. Against the black background, the highest concentrations of votes stand out as the brightest.

We’ll let viewers be the judge of its cartographic effectiveness, but we hope you’ll at least agree that it looks pretty cool!

Click on the image at the top of the post to view a larger version, or see it in a Zoomify viewer, or download the full size (suitable for printing).

The geography of presidential campaign rhetoric

A few months ago I started on a little side project to visualize presidential campaign speeches spatially. My idea was to collect speeches by the 2008 US presidential candidates, generate a word cloud of the most common words in each, and each word cloud on a map in the location where the speech was given.  We’ve seen a number of text visualizations and analyses, sometimes in-depth, during this campaign, but so far not by geography that I can recall.  (See those from Martin Krzywinski, and The New York Times with help from Many Eyes, for just a few examples.)  Are the candidates speaking to different issues in different parts of the country?  Are they talking about jobs in Michigan and immigration in New Mexico?  Are they pandering to everyone, everywhere they go?  (Can we call this project PanderViz?)  Visualizing campaign words on a map might answer such questions.

Campaign speeches by John McCain and Barack Obama as word clouds. (Click for a larger map)

We hoped to develop this idea into a sophisticated interactive map in which a user could search for words, filter speeches by date, and so on.  Other work has kept us from doing that before the election next week, but it seems worth showing some screenshots from what I did manage to get done originally.

I went to the official websites of the Obama and McCain campaigns, where the text of speeches is transcribed, and ran the speeches through a simple PHP script to count words and record the location of the speech.  This week I revisited the sites to catch up on speeches since the summer.  These sources have their drawbacks, of course.  For one, although as prepared speeches they contain perhaps the most carefully chosen words for a particular audiences, they do not represent the complete vocabulary used on the campaign trail.  Also, Obama’s team has been more diligent in posting speeches, it seems, providing close to 80 speeches since May, compared to about 30 for McCain, a disparity that makes comparison between the two candidates a bit difficult.

As far as I got with the capabilities of this map was generating scale-dependent word clouds (I’ve written more about those on my personal site) and searching for individual words to display proportional symbols representing the frequency of use.  With less than a week until election day, we might as well get out of it what we can, so I’ve generated a series of maps of word clouds and individual word frequencies.

Use of the word war by John McCain

Use of the word war by Barack Obama

The whole series is long—obnoxiously long for a blog page—so it’s at a separate page, linked below.  Enjoy, and please comment if there’s an interesting word to look up that I didn’t think of!

See the full article: The Geography of Presidential Campaign Speeches