JasonMorrison.net

Before reading further, take a look at this impressive map web app from the Sri Lanka Ministry of Defence: http://www.defence.lk/orbat/Default.asp. Below is a screenshot of the main map.

What’s your initial impression? It’s certainly well-made. The graphic design is very professional, the map is interactive, allowing users to turn features on and get more detail. There’s also an animated timeline map of the recent conflict in the north that shows the progression of troops and photos from the various towns.

(more…)

In the world of political blogging, the President’s speech before a joint session of Congress (basically a state of the union speech) is already ancient history, but I thought this was interesting enough to post. I’ve mused before on how word clouds and tag clouds can be useful – here’s a nice qualitative example.

Here’s a word cloud of President Barack Obama’s speech – major themes are apparent in large type, such as “economy” and “health.” You can also tell something about the urgency of the speech, with words like “now,” “new,” and “plan” showing up rather prominently.

Contrast with Louisiana Governor Bobby Jindal’s response, seen below. The three most dominant words are “Republicans”, which is understandable, “government” and “Washington.” I think this illustrates pretty clearly the thrust of Jindal’s speech, that the federal government can’t do anything right.

This isn’t a political blog but I do want to give a quick shout out to all the geologists out there who do important work like monitoring volcanoes. It’s ridiculous that Jindal, running a state that lives and dies based on natural disaster monitoring, would call out volcano monitoring as his example of pork spending.

Both word clouds made at Wordle.

It’s just two days until the U.S. Presidential election.  I thought I’d talk a bit about how elections are covered with information graphics, specifically maps.

To get things started, CNN has has a map of early voting participation numbers.  For some states, they even have participation by party and by county.  This particular map is disappointing – no real effort is made to illustrate the information, all the real data is just text in callout boxes.  It might even be more efficient just to put the data in a big table like this page at George Mason University.

Real Clear Politics’ mapping application is interesting because it gives you to ability to run your own scenarios, switching swing states back and forth to see the result. You can also compare results from previous elections, all the way back to 1968.

But geographic projections don’t tell the whole story -  Political Irony has a great map demonstrating exactly why the Electoral College is a terribly undemocratic way to choose a president – voters in some states have effectively four times the influence of voters in others:

I’m not the first person to notice this of course, so there have been many efforts to show cartograms based on electoral pull.  There’s one at the Dispassionate Liberal and one at American Street, both using data from Pollster.com.

I like the analysis at FiveThirtyEight.com a little better, so I’ll show the latest cartogram from Frontloading HQ:

This map tries to keep the states in the right shapes, if they’re a bit disconnected.  Taking a cue from Michael Gastner, Cosma Shalizi, and Mark Newman at the University of Michigan, here’s a cartogram using the current data from FiveThirtyEight:

A couple of notes – Blue is safe for Obama, Red is safe for McCain.  I compressed “leans” and “likely” categories into one color because it’s late and my eyes are tired.  Also, I’m missing Alaska and Hawaii, I’ll try to find a base map that has them and update.

By the way, here’s another page with interesting maps of 2004 election results analyzed in a number of interesting ways.

I’m still on the lookout for the best map to watch election results as they come in on Tuesday – any suggestions?

Many years ago I spent a summer in Florida working for the Naples Daily News website.  One of my jobs was to keep the hurricane section up to date – so I scoured state, county and federal government sources and wire stories to find every informative map that I could get my hands on.  What we had available on the web back then pales in comparison to the information rich interface at Stormpulse.com.

The screenshot above is from the site, tracking Hurricane Gustav as it climbs up Louisiana, just missing New Orleans.  It doesn’t take an information design expert to tell you that weather and disaster news can be expressed very effectively with maps.  Stormpulse does a particularly good job, pulling together data from various sources including satellite cloud cover maps, ocean buoy data, and a large number of forecast models.

The site also keeps some historical data on file, which was something I’ve found particularly perplexing when checking out storm maps in the past (I admit I’m a bit of a weather geek too).  Especially back in the days of pre-rendered maps, why wouldn’t you store everything and make it available to users?  Hurricanes might seem like very time-bound events, but they can cause profound changes in people’s lives that resonate for decades to come, and historical data can be useful in predicting future storms.

Another interesting thing to note is that they are not using the Google Maps API, which seems to be the go-to API for many web mapping efforts.  In fact they offer and API of their own, although it’s limited to embedding self-contained maps.

I’m a bit of a map geek and a big fan of using maps to convey information geographic and otherwise, so I’m starting a new series of posts – Map App of the Day.  I’ll highlight either a mapping web application or an application of mapping in information design that’s interesting, innovative, or just plain strange.

The New York Times had a brief article about a new study of genetic relationships between peoples in Europe.  The paper, by Lao et al., looked at genotype data from more than 2000 individuals spread throughout Europe.  The map on the right shows the normal geographic map of Europe, while the one on the left maps the genetic relationships between countries.

Here’s a link to a larger version on Current Biology’s web site.

The genetic map is a great example of why you should always consider mapping to illustrate data with a geographic component, and why you should always consider breaking the rules a bit  to get a good representation (most maps don’t show countries overlapping, for example).

This is also a great illustration of how permeable and impermanent national borders really are.  It would be interesting to see the same analysis done with distinctive populations like the Basque in Spain and the Sami in Finland added.

This also brings up with two non-mapping issues about journalism and research.  First off, the NYT article didn’t bother to actually link to the journal article, the researcher’s websites at their respective institutions, or any of the other places that readers would need to go to follow up on this paper or get more detailed information.  Why not?

Second, when I searched for Current Biology I was delighted to see that the journal publishes everything online, available via regular Google search, rather than hiding behind some expensive and proprietary publication database.  Open access is very cool.

I recently ran across a couple of really great examples of how information can be conveyed dramatically with infromation graphics and one example of how to fix graphics that aren’t so good.

First, from the Radical Cartography project, a map of all nuclear explosions since 1945.  This map encodes a lot of information fairly simply – we can see where nuclear tests have taken place, countries are indicated by color, and blast yield is indicated by size.  Click on the image to see the full version.

Next, from the United Nations Environment Programme’s Global Environment Outlook report, you can see a great illustration of how little of the world’s water is freshwater and how little of that is readily available in rivers and lakes.  Click on the image to see the full-sized version.

Why point out good example of information design?  Because even the professionals get it very wrong a lot of the time.  Bob Nystrom wrote a great post about how little information is presented in CNN’s chart of the delegate totals for Hillary Clinton and Barack Obama.  Here’s their version:

Without looking at the numbers, can you tell who’s in the lead?  Can you tell how close the race is to the end?  Do you read the bars left-to-right or up-and-down?  Here’s Nystrom’s improvement:

Everything becomes clearer.

Got any good (or bad) examples?  Post them in the comments below.

Earlier I wrote about using Photoshop to create a heat map and to use data maps when house hunting.  I got a pretty good response to those tutorials but the process is a little too labor intensive for most.  So when I moved to California, I decided to do something similar, using the Google Maps API, so that it would be easy for anyone to make their own heat map.So here it is:  Localographer – build interactive heat maps for house and apartment hunting.  You can see a screenshot below:Localographer is a beta release right now, so watch out for bugs and random downtime.  Also, I have to add a disclaimer:  this is not an official Google project, this is something I did on my spare time.  In fact, most of the work was done before I started working at Google in preparation for our move to California.The site takes you though a series of steps to build your map:

1. Pick your city and create your map;
2. Add places you’d like to be near (like your job or your school);
3. Add potential locations (houses, apartments, condos) to see how they compare.

I’ve got a ton of ideas for additional functionality, so hopefully I’ll have time to add more in the next few weeks.  I’ll also be working on the site’s design, making it a bit more usable and interactive.Here’s how a map in Localographer compares to my Photoshop heat map of the Cleveland area (click on the images to see larger versions):   In case you’re interested, the site was developed in PHP with a MySQL database.  The maps use the Google Maps API with some hand-written functions to correctly draw the hot spots.Please take a look and let me know what you think.  Post and problems, bugs, or new feature ideas in the comments below.  Later I’ll post a poll so you can vote on new features and other enhancements.

In part 1 we created a simple heat map in Photoshop to figure out which neighborhoods would be good places to look for a new house. But distance from work and school isn’t the only factor worth considering. We can always add more radial gradients to show proximity to favorite restaurants, family members, and the like. But that’s really just more of the same.

Think about the things that make a neighborhood a pleasant place to be – low crime, low pollution, parks nearby, friendly neighbors – some of those things can be quantified and mapped. We’ll have to wait for demographers to release official neighborhood friendliness metrics after the next census, but let’s see if we can find some of the other data.

Step 3: Highlight on-map elements

At least one of the new factors we want to look at is already available on our map – parks. All the parks on the map are in one of two shades of green. Use the Magic Wand Tool to select park areas and then Select -> Similar. You can see how I’ve selected the parks in the example below.

Now we’re going to do something similar to the concentric circles in step 2. Choose Select -> Modify -> Expand. You might have to play around with the number of pixels you expand by – for the scale I was working at, 20 pixels looked like close walking distance. Now use the fill tool with a low opacity to fill the area with the same color you used for the circles.

You can then repeat the expand and fill steps as many times as you like to build a heat map of park proximity. Don’t forget to change the blending mode to Multiply to match your other layers.

You can follow similar steps for other on-map elements, like shopping centers, college campuses, bodies of water – it all depends on what you like to be near and what’s available on your base map.

Step 4 – Pulling in data maps

First, a disclaimer: this isn’t a tutorial on how to automatically pull data from a server and have Photoshop map it for you (but keep watching my blog for a similar project in the future). Instead, we’re going to pull data maps from other places on the web and fit them over our heatmap.

The hardest part of this next step is finding the maps. The number and quality of maps available depends on your location, but in general the best two places to look are county and city websites and nearby colleges. If you don’t find what you’re looking for under “Maps” try looking for “GIS,” planning departments, or property information. Also, many government web sites have poor search systems – try doing a Google search with the site operator instead. For example, a search for Cuyahoga County might look like this: site:cuyahogacounty.us maps gis.

For this example, I’m going to grab a map from Case Western Reserve University’s NEO CANDO site. Another good source for the Cleveland area is the the Cuyahoga County Brownfields GIS server. My wife and I both have graduate degrees and we really value education – so I’m going to grab a map of the percentage of people with bachelor degrees or higher by census tract.

Now that we have a data map, we need to clean it up a bit and add it to our base map. Open the data map in Photoshop and use the Magic Wand tool to select the black and gray areas – the lines and numbers. Use Select-> Similar to make sure uoi have most of it selected and hit Delete. Now Select All, Copy and Paste it into your map as a new layer.

You’ll might want to use the Magic Wand and Select-> Similar again to clear out all the white area around the map and leave it transparent, but you don’t have to – you’re going to change the layer blending mode to Overlay like the other layers anyway. At this point, I can almost guarantee that the data map will be much smaller than your base map. Chose Edit -> Transform -> Scale to stretch it to fit. There’s no sure-fire way to do this, just keep stretching until you have a good fit to known boundaries like coastlines and major streets.

Here’s the result:

Step 5 – Bring it all together

Now that we have all these different layers, it’s time to pull them all together in one heat map.  You have a few options on how to do this.  If you make all the layer visible at the same time your going to get a lot of very blue areas.  Instead, try lowering the opacity of each layer based on who important it is to you.  You can see an example of my Cleveland area map below.

If you want to make the strongest areas of the heat map more visible, start by making your base map invisible while leaving all your other layers up.  Go to Select -> color range and clikc the eye dropper on the darkest blue area you can find.  Now increase the Fuzziness until it looks like the best areas are selected.  Hit the OK button, create a new blank layer, turn off the rest of your layers, and fill the selection with your blue.  You can see the result below.

Hopefully this has been helpful.  You don’t have to make your map quite as involved as mine, and of course if you are looking in a smaller area you can constrain your map further.

Stay tuned for more updates on this topic.  If you have a feed reader you can subscribe to my blog and if you’d like you can get email updates, too.

If you’ve ever moved to a new city and looked for a house or apartment you know how difficult it can be.  What neighborhood, which side of town?  Can we live close to my wife’s workplace and not to far from mine?

I thought I would share the method I used to find our last house, using Photoshop to build a heat map of the city.  Note that this is NOT the method I used to find our current apartment – watch this space for more news on that coming up.

Step 1 – Build a map

In order to build our heat map you’ll need a base map to place everything on.  Back in 2004 when I did this project Mapquest was still the best thing going, so that’s what I used.  If I were doing it now, I would go with Google Maps.

This is the most tedious step, since you’ll need to center your map, take a screenshot, then cut the map portion of the screenshot and paste it into your working image.  If you have a scanner and a nice print map you’d like to use instead, feel free to go that route.

You can see my example, a map for the Greater Cleveland area, below.  Click to see a larger version.  The inset shows you the level of street detail I found best – zoomed in close enough to see all the streets, but not so close as to make your map unusably large.

Step 2 – Place your main locations

What are the three most important factors in real estate?  Location, location, location.  In our case we want to live close to the locations we need to go to on a regular basis.  For us that was two workplaces and two universities.

Heat maps are a great way to visualize information.  They are a perfectly appropriate choice for map location and distance information.  So create a new layer in Photoshop.  Choose the gradient tool and make sure you’re using a Radial Gradient.  The gradient should go from a solid color (I chose blue) to transparent.  Using the map, create a radial gradient about as wide as you would like to drive.

These smooth gradients can make it hard to make distinctions when you are zoomed in and, on a large map, will take up a lot of disk space.  So an alternative method would be to create a series of coencentric circles, each smaller than the last.  That’s the method I used in the example below.

Once you have one good circle layer, copy it for each of the locations you want on your map and drag them in to place.  You’re probably going to want to change the blending mode for the layers so that you can still see map details – I recommend using Multiply and lowering the opacity just a bit.

In my example map, you can already see how this could help narrow down which neighborhoods to look in.  It also shows quite visually that there’s no point in trying to live closer to Kent – it doesn’t intersect with any of the other hot spots.

In part 2, we’ll take a look at pulling in data maps for things like crime statistics , highlighting other map features, and pulling it all together.  Also, I’ll have an exciting announcement about another project I’ve been working on soon as well.  Stay tuned.

Usability and design aren’t just concerns for web developers.  They can make a real impact in the use and usefulness of physical products as well.

Warning labels are a great example – you can’t buy anything these days without some kind of warning label, and they are visual design elements intended to convey important information to buyers and users.  I ran into two great examples in the course of packing up and clearing out our house.

Example number one is from a big plastic storage tub.  It’s a great example of both usability and design, though the actual message might seem a bit silly.  Do people really need to be warned not to seal their children inside airtight containers?

It’s great from a design standpoint because it is clean, puts clear emphasis on the important diagram, and uses bright, attention-grabbing colors.  Any parents poised to place their toddler in the bin will not doubt see the label before recklessly replacing the lid.  It’s a good usability case because it conveys information very clearly and effectively-the silhouette kid is immediately recognizable and it uses common conventions such as the red circle and slash to mean “NO!”

The second example is…  well, strange and off-putting.  We might laugh at the thought of tupperwared toddlers but fireworks obviously pose some danger.  This series of warning messages from the back of a box of fireworks is, well…  take a look for yourself.  I recommend clicking on the image to zoom in in Flickr.

So what could have been improved from a design standpoint?  For one thing, it would help if the coach and the two children in the second panel weren’t wearing what appears to be ghoulish, grimacing deathmasks.   They look like a cross between some misguided ventriloquist’s dummy and the clown that haunts the nightmares of every five-year-old child.  Cartoons caricatures can be very effective in warnings because we can remove unneeded visual detail to focus on what’s important and because people are accustomed to following short narratives in the style of comic strips.  But not if they are so ugly.

What are the usability problems?  Let’s start at the top.  The phrase “Common sense coach reminds you to…” isn’t quite as clear and gripping as “Warning: suffocation risk” in the first example.  The idea of using cartoons to illustrate each point is good, but the actual illustrations miss the point.  Without the text, do you think you could figure out the meaning of each of these?

For more examples of how usability and information design impact the real world, see The Design of Everyday Things by Don Norman.