Putting Zombies on the Map

For the past few years, Trulia has offered potential homebuyers, renters, and the casually curious the ability to see the natural hazard risks in their area. You can check Trulia maps for the risk of flooding, earthquakes, wildfires, tornados, and hurricanes; it’s a great resource.

With Halloween just around the corner, we decided to have a little fun with our maps and turn our focus to the unnatural hazards that may be lurking around your neighborhood. For the month of October, Trulia will be showing areas we’ve identified as hotbeds for Zombie Infestation, Ghost Sightings and Vampire Bites.

Where did this “data” come from?
You could say my team and I have taken some artistic liberties with this data. Our Unnatural Hazards Classifications text sums it up nicely:

Zombie Infestation
Anyone who’s seen his or her fair share of zombie films knows that The Undead originate from the grave. So, to calculate the risk of zombie infestation, we used cemetery locations from the US Census and mashed it up with OpenStreetMap’s tagged cemeteries to create a detailed cemetery base map. From these data points, we calculated degrees of risk based on the minimum distance to a cemetery for every block group in the country.

Ghost Sightings
Many experts (?) have revealed that sightings are most likely to happen in “spooky-looking” places. So, we created an extensive survey to identify the most spooky, and therefore most ghost-infested, places across the country. It was a very scientific survey, and not at all random. (Disclaimer: actually quite random.)

Vampire Bites
First, you should know that vampires aren’t real – at least to our knowledge. But if they were, they’d likely congregate in areas where their favorite food (blood) is readily available. Think hospitals and medical centers, which are the data points for this map. And we couldn’t have done it without help from our friends at Yelp.

But if you’re a bit of a data geek like us and wanted to know where’s the WORST possible place to live in the very unlikely event of a zombie apocalypse, vampire attack, or ghostly haunting, go check out our Research Blog.

Texture: A stroke of cartographic (evil) genius
When my team first started talking about creating a set of Halloween-themed maps, I knew I wanted to try using texture to create a more tactile and evocative experience for our users. Thanks to our cultural predilection for the supernatural and the resulting explosion of books, movies, and television shows, we already have an idea of how these paranormal beings are supposed to make us feel. Zombies typically evoke images of a decrepit, post-apocalyptic landscape. Vampires have a more refined gothic elegance, and as for ghosts, we imagine an ethereal haze – wisps that appear and vanish in an instant.

Playing off these clichés, I opened up my favorite image editor and got to work creating images we could bake into our maps. To get the splotchy, gritty texture in the Zombie Map, I created a couple of different “blood splatter” patterns of varying intensity (which elicited several startled glances from nearby colleagues).

To style the maps, I used TileMill, an open source design studio for building interactive maps. TileMill supports several different compositing operations that make it easy to incorporate images, like these blood splatters, into our map layers.

In the case of zombie infestations, I used a splatter pattern to create the gritty base, then overlaid a repeating striped pattern to highlight the “evacuation zones.” Here is a snippet of the resulting CartoCSS:

[zoom >= 4] [zombie_risk = 5] #blocks {

polygon-opacity: 0.35;

polygon-fill: # FA1700;

polygon-pattern-file: url(‘images/splatter1.png’);

polygon-pattern-opacity: 0.35;

}

[zoom >= 4] [zombie_risk = 5] #blocks2 {

polygon-pattern-alignment: global;

polygon-pattern-file: url(‘images/stripe-gray.png’);

polygon-pattern-opacity: 0.55;

polygon-comp-op: overlay;

polygon-fill: # be0000;

polygon-opacity: 0.85;

}

The overlay operation provides texture by exaggerating the brightness contrast of the underlying image. For the highest risk level, I paired the second splatter pattern with a color-burn operation to intensify the texture:

[zoom >= 4] [zombie_risk = 6] #blocks2 {

polygon-pattern-alignment: global;

polygon-pattern-file: url(‘images/splatter2.png’);

polygon-pattern-opacity: 0.85;

polygon-comp-op: color-burn;

polygon-fill: #470D0D;

polygon-opacity: 0.95;

}

The result (I hope) evokes an image of a burnt, abandoned wasteland – a place you’d think twice about entering.

The Ghost Sightings and Vampire Bites maps used similar composition operations to overlay ethereal vapors and unnervingly sensuous velvet, respectively. As you might imagine, I had a lot of great conversations with everyone who walked past my desk that day.

To get the full experience, check out our Unnatural Hazards maps on trulia.com/local. And for a good scare, don’t forget to zoom in close on the Ghosts Sightings map.

Boo!