Art, Maps

Drunk Traffic Map of Portland DUIs

This map mimics a typical traffic map but represents the number of driving under the influence (DUI) arrests along each street over the course of 10 years. Red, orange, yellow, and green are used to denote relative frequencies of DUIs.

drunk_traffic_portland_1600px

Click the image above for a larger version. Or download the full resolution file (53 megs).

You can see the highest density of DUI arrests in Old Town, particularly along Burnside and 3rd Ave. Zooming all the way in and you can even see the detail of the satellite imagery showing the buildings.

drunk_traffic_portland_closeup

Interactive Version

You can play with the interactive version below, or here’s a direct link to view it full size. The interactive version lets you zoom in and out and pan around.

Acrylic Print

This was printed on a 30″ x 30″ sheet of acrylic.

drunk_traffic_portland_printed_acrylic

The Source Data

The crime data can be downloaded from CivicApps, Portland’s data portal. Here’s a direct link to the FTP site that contains multiple years of data. The crime data was filtered to only include DUIs. As always when looking at crime data, remember this is where the most people are arrested, which isn’t necessarily the same as where the most people are actually driving drunk.

The street data was an extract taken from OpenStreetMap, provided by MapZen. The street data itself is copyright OpenStreetMap contributors.

The satellite imagery was from the National Agriculture Imagery Program (NAIP) and was downloaded through the Oregon Imagery Explorer.

High Resolution Download

If you’d like to make your own high-res print, the full resolution file (9,768 pixels square) is available for download (53.3 megs).

Deviant Cartography Show

This piece will be on display as part of the Deviant Cartography show at the Diode Gallery in Portland. Come see the show Thursday April 2, 6-9pm.

deviant_cartograhpy_banner

Standard
Code, Maps

Using shp2stl to Convert Maps to 3D Models

I’ve been working on a utility called shp2stl that converts geographic data in shapefiles to 3D models, suitable for 3D printing. The code is published as a NodeJS package, available on npm and GitHub.

You can control the height of each shape by specifying an attribute of your data to use. Each shape will be placed along the z-axis based on the shape’s value relative to the max range in the data. Additionally, if you want more detailed control you can specify a function to use to extrude each shape.

Examples

South Napa Earthquake

Here’s an example using the recent South Napa earthquake, first as the source shapefile:

Then converted to a 3D model using shp2stl:

And finally printed with a 3D printer:

epicenter_angled-696x420

All the files and source code for generating the model above are available on github. See more about my 3D print of the 2014 Napa earthquake.

San Francisco Population

The map below shows the population of San Francisco broken down by census tract.

And the same data converted to a 3D model:

All the files and source code for generating the model above are available on github.

How to use it

shp2stl is a NodeJS package you can install via npm. You can install it like any npm package by doing

npm install shp2stl

If you’re new to NodeJS then you’ll also have to download Node (which comes bundled with npm). shp2stl is not a standalone program that you run, you have to use it in your own NodeJS code.

The easiest way to understand how to use the package is via an example:

var fs = require('fs');
var shp2stl = require('shp2stl');

var file = 'SanFranciscoPopulation.shp';

shp2stl.shp2stl(file, 
    {
        width: 100, //in STL arbitrary units, but typically 3D printers use mm
        height: 10,
        extraBaseHeight: 0,
        extrudeBy: "Pop_psmi",
        simplification: .8,

        binary: true,
        cutoutHoles: false,
        verbose: true,
        extrusionMode: 'straight'
    },
    function(err, stl) {
        fs.writeFileSync('SanFranciscoPopulation.stl',  stl);
    }
);

That will produce an STL model with each polygon sized by the Pop_psmi attribute. You should customize the example above to point to your own shapefile and specify a valid attribute within that shapefile to use for the height.

More detailed documentation covering all the available options is in the shp2stl README.

How it works

The TLDR version: convert from shapefile to geojson, then to topojson, then to a threeJS model, then to STL.

shp2stl takes advantage of the rich NodeJS ecosystem and uses a number of third party packages available on npm. The key packages that are used are shapefile, topojson, and three (in addition deepcopy, point-in-polygon, and ogr2ogr are used).

A brief word on manifold meshes: it’s especially important for 3D printing that all your 3D meshes are “manifold”. You can think about that in terms of producing a clean water-tight model that’s perfectly hollow on the inside. Here are some good examples of non-manifold problematic meshes. This becomes very important when we figure out how to covert the polygons in our shapefile to a 3D model.

Step 1: Convert to GeoJSON

The shapefile is first read with Mike Bostock’s shapefile package, which converts the geo data into GeoJSON. This will be converted in the shapefile’s source projection, but if you want to reproject the data before converting it you can using the sourceSRS and destSRS options, which uses the ogr2ogr package to do the projection (this requires ogr2ogr already installed separately).

Step 2: Convert GeoJSON to TopoJSON

One of the key issues we encounter when trying to convert polygons to a 3D model has to do with shapes that share borders. Shapefiles (and GeoJSON) represent bordering shapes entirely independently. That means that two shapes that share a border have two distinct sets of line segments that define that border. You can certainly attempt to create a simple 3D model by treating each polygon separately like this, which will produce distinct 3D meshes for each poly. That’s likely fine for 3D rendering on a computer, but it’s not ideal for 3D printing. We need a single manifold mesh, not a bunch of distinct ones that are all touching each other. What we’re hoping to create is the full combined outer shell.

The key to converting to a single unified mesh is to convert the GeoJSON to TopoJSON. Mike Bostock’s TopoJSON format encodes topology, which means that it figures out all the unique line segments that make up the polys. If two shapes share a border that border only gets converted to a single line segment instead of two, and both shapes reference the same segment. This allows you to reconstruct each poly, but it also tells you an important piece of information: which line segments are shared between which polygons. That’s the key to creating a nice single outer shell for our polygon.

Step 3: Convert to ThreeJS

ThreeJS is a full-featured 3D library for JavaScript. It can do a ton of stuff, but for my purposes I’m only really interested in a couple things: triangulating polygons (to convert the polys), creating simple faces (to make the sides of the model), and easily iterating over all triangles in a model (to convert to an STL file).

shp2stl will create ThreeJS planes for each polygon in your shapefile, and extrude each based on an attribute you specify. The built-in triangulation method of ThreeJS is used to convert the shape polygons into triangle faces.

The distinct planes are then connected by creating connecting faces along the z-axis. Since the TopoJSON format tells us which polygons share which borders, we’re able to connect the faces that touch by manually creating sides that start at the edge of the lower face and extend up to the height of the upper face.

Step 4: Print!

You should now have a nice manifold mesh ready to be sent to your 3D printer of choice. I’ve had a lot of success printed the models created by shp2stl with the Afinia Series H.

Grab shp2stl on github or from npm and I’d love to hear about things you’ve printed.

Standard
Art, Maps

Bay Area Homicide Constellation Map

This is a map of murders throughout the Bay Area. Constellations are formed by connecting homicides from 2013 that are in close geographic proximity to each other. Homicides from 2014 are also layered on to provide a bit more context, although not used to form the constellations.

sf_bay_area_homicide_constellations_696

“Perhaps they are not stars, but rather openings in heaven where the love of our lost ones pours through and shines down upon us to let us know they are happy.”
Eskimo Proverb

Detailed Views

Here’s a detailed view of San Francisco and Oakland, which have some of the most interesting constellations. As with clouds in the sky, different people will see different things. San Francisco jumps out as a dog to me. In Oakland I can see a whale or shark (facing south toward Hayward) or a caterpillar (facing north toward Berkeley).

sf_closeup

Just north of Berkeley we have a cluster in Richmond, forming what to me resembles a child swinging in a hammock.

richmond_closeup

A bit to the east is Antioch and Pleasanton. Antioch is the main cluster in the middle and Pleasanton is the smaller cluster to the west.

antioch_closeup

East Palo Alto is a notable cluster that stands out due to its concentration and isolation. The data has eight 2013 murders in East Palo Alto, contrasted with almost nothing in the richer surrounding cities of Palo Alto, Atherton, and Menlo Park.

east_palo_alot_closeup

The sprawling city of San Jose also produces a sprawling map — connecting the dots of the 2013 killings produces a disarming image that looks an awful lot like a human face.

san_jose_closeup

The Data

San Francisco publishes a decent amount of crime data on its data portal, DataSF, however homicide data is not included. The data used in these maps was collected and published by the San Jose Mercury News.

2013 map and kml file.

2014 map and kml file.

Method

Both the 2013 points and the 2014 points were used in the map. To form the constellations, however, only the full set of 2013 data was used. Constellations were formed by connecting the 2013 points using Delaunay triangulation and then filtering down the resulting lines to only include lines shorter than a certain distance. That left clusters of points that are all close together.

Here’s the map of only 2013 points connected using Delaunay triangulation.
2013_delaunay

There is no connection between any of these locations besides their proximity to each other. A line connecting two points is not meant to signify any relationship (again, other than their geographic proximity).

Tools

The data was processed using QGIS for the initial exploration work and to create the Delaunay triangulation lines. I then brought the data into MapBox Studio, which was used to style the points and lines and to export a high resolution image. The rest of the processing was done in Photoshop.

High Resolution Files

All images are licensed under the CC BY-NC 2.0 license. If you’d like to print your own copy the dimensions should work with an 18×12 print.

High-res version with the “old paper” background (32 MB)
High-res version with a white background (12 MB)

Standard
Art, Maps

2014 South Napa Earthquake – 3D Print

Two weeks ago on the night of August 24, 2014 I was shaken awake by the 6.0 magnitude earthquake that struck Napa, CA. It was the largest earthquake to hit the Bay Area since the 1989 World Series quake. Where I was in San Francisco wasn’t close enough to the epicenter to do much other than wake people up. But while watching the reports start coming in on Twitter it became clear that up in Napa there was quite a bit of damage. Unable to sleep, I started downloading the data to understand what the difference was between what I had felt and what it was like right in the epicenter.

Over the past couple weeks I’ve been experimenting with 3D printing the shake intensity from the Napa quake.

epicenter_angled

The full piece consists of 9 printed panels, and I’ve chosen to mount and frame the piece highlighting the paneled composition.

all_tiles_above

The source data comes from the USGS and represents the Peak Ground Velocity (PGV), which is a measure of how intense the ground shaking was, which is closely related to damage.

The graphic below renders the source PGV data around the epicenter:

source_data

I’ve converted the source GIS data to a 3D model using some software I wrote called shp2stl, which is available for anyone to use. The conversion extrudes each polygon proportionally to its PGV value. So a spot twice as high (on the Z axis) on the model had a peak velocity twice as great.

A few shots of the 3D model itself:

model_3

model_4

A view from above that shows the epicenter and extends down to include San Francisco shows how concentrated the shaking was and how little it affected other areas. I can attest to the fact that apart from the nuisance of being woken up at 3am, the earthquake didn’t do much down in SF.

napa_sf_2tile_above_696

Another overall shot of all the tiles that make up the full map:

all_tiles_angled

And more detailed shots of the epicenter:

epicenter_angled_details

epicenter_above

Standard
Art, Maps

A City Cut in Two by a Tornado

This is a map of Moore, Oklahoma. On May 20, 2013 an EF5 tornado struck this city of 58,000 people, killing 24 and injuring 377 others. The destruction within the direct path of the storm was near complete.

moore_tornado_1

This piece focuses on the city boundary of Moore and the destruction that ripped right through the center of the town. The tornado track has been removed from the map, and the city has been split open.

Moore lies just south of Oklahoma City. The city boundaries are shown below.

moore_boundaries2

The path of the tornado was published by NOAA after the event.

moore_track

The center of the tornado path left only debris. The aerial imagery alone makes the path extremely clear.

moore_tornado_satellite_google

Google Crisis Response

FEMA/Jocelyn Augustino

FEMA/Jocelyn Augustino

To capture the concept of a city cut in half, this piece is a 3D printed representation of the boundary of the city with the tornado track cut out, splitting the city in two. The city boundaries are 3D printed with white plastic mounted on wood.

moore_tornado_5

moore_tornado_3

moore_tornado_4

Iterations

I went down a few paths prior to settling on the simpler, more abstract map. I first attempted to map the population within the city to show that the tornado struck right directly through populated areas. These images show the initial prints I made that show population.

I found the population data interesting, but it muddled the narrative. Instead of focusing on the visceral reaction of a town split down the middle, you start trying to quantify the data. The next attempt was to manipulate the tornado track in various ways. These versions show the “splitting” by ripping the model in three parts and pulling the tornado track out a bit. You can see that I eventually opted to drop the population data entirely.

That got me closer to the result I was looking for, bringing the focus to the track. But I wasn’t really trying to focus on the area that was damaged. What hit me hardest when looking at the maps of the path was how such a hole was left in the middle of this city. How there was simply nothing there.

moore_tornado_2

And so I ended up removing the track entirely, leaving a giant gash through the middle. The result finally got me the kick in the gut I was looking for. A city split in two.

Personal Thoughts

I created this immediately following the tornado, but it didn’t feel right to blog about it in the immediate aftermath, hence the delayed writeup.

My job involves mapping events like the tornado that hit Moore, Oklahoma. But in doing so I often lose the ability to see the real human impact these events have. I sell software to insurance companies. When a tornado tears through a town, or when a hurricane hits the coast, the usage of our software spikes. Our business benefits when these things happen. Our customers are trying to estimate the damage, calculate the losses, and understand the financial impact. So much of it is about numbers. It’s too easy to see these maps and not recognize that people are dead and an entire city has been shaken to its foundation.

So when the next tornado hits, or the next earthquake, hurricane, or fire, I hope to remember that what really matters are the people. It’s not about the interesting maps, or the buildings destroyed, or the dollars lost. It’s always about the people.

Standard
Maps

Woodcut Map of Golden Gate Park

This is a custom-made map of Golden Gate Park created by the people at Woodcut Maps. I met Gabe Smedresman nearly two years ago at some SF meetup group. He had just launched his new project, woodcutmaps.com, and once I heard about it I was determined to get something made. I had just bought a house on the north side of Golden Gate Park, and I wanted something personal to commemorate our new home.

The map I had made focuses on the park, but includes streets to the north and south to provide context.

woodcut_sf_1

The Woodcut Maps folks made a few customizations to the design for me. The entire map was rotated a slight bit to get the streets running east-west to be perfectly horizontal. The actual streets in San Francisco run at an ever so slight diagonal, but to give the map better symmetry I wanted things to line up perfectly. They also added a small marker for my home on the north side of the park.

woodcut_sf_2

I had originally intended this to be the top of a coffee table. It measures 34″ by 18″, and I believe for a very brief period right when I had it made it was the largest map Woodcut Maps had created (but that record was quickly broken). But instead of mounting it as a tabletop, my wife decided it was so gorgeous that it deserved to be front and center in our living room. So we mounted it on a wood frame and put it above our fireplace.

woodcut_sf_3

I was amazed at how manual the process was to construct these maps. The pieces are all laser cut, but then they are assembled by hand. Here’s a shot of the assembly process. Some of the pieces are really tiny, and it takes a lot of patience working with tweezers to get it all done.

photo (12)

Since Woodcut Maps is a local San Francisco startup I was able to meet up with them in person to see the process. They even saved a few parts of the construction for me to complete. Here’s a few shots of me putting the last bits of Stow Lake together.

woodcut_sf_4

woodcut_sf_5

One last detail shot to show the walking paths around the De Young museum and the Academy of Sciences. I love this park!

woodcut_sf_6

If you want to support a cool local San Francisco business, go check out what they’re doing at Woodcut Maps.

Standard
Art, Maps

Point Nemo Wood Map

The most remote spot on Earth sits in the middle of the South Pacific Ocean, over 1,600 miles from land in any direction. It is quite literally the middle of nowhere. And yet, because it’s exactly the middle of nowhere, it’s actually an incredibly remarkable somewhere. This beautifully unique spot is called Point Nemo.

point_nemo_wood_map1

This map brings focus to this distant pole of inaccessibility. Centered on Point Nemo we have a much simpler map than we’re used to. Instead of focusing on complex land features, we shift to look at the expanse of nothing. The islands closest to Point Nemo, Ducie Island, Motu Nui, and Maher Island, are marked and the 1,670 mile radius around the pole is delineated.

point_nemo_wood_map2

Continents just barely peak out from the edges with Antarctica to the south and the tip of South America to the east, bringing just enough context to the nearly limitless expanse of sea.

point_nemo_wood_map3

Creating the Point Nemo laser-cut map

I created the map by first using GeoJSON and D3, which provides enough flexibility to create arbitrary map projections. In this case I needed an equidistant projection centered on Point Nemo. Mike Bostock, the creator of D3, created two examples (here and here) that use the azimuthal equidistant projection that were incredibly helpful.

By modifying those examples to center the location on Point Nemo I was able to create the perfect map with code (click through and view source if interested). The map below draws the continents, then layers on the four points of interest (Point Nemo and the three closest points of land) and draws a circle for the radius around the pole.

nemo_d3_output

And since D3 just produces SVG, it’s easy to save the SVG and open it up in Illustrator to tweak it. A few quick edits and I was able to get the vector file ready for laser cutting and etching. I used Ponoko to cut and etch the design out of wood. If you’re interested in recreating this map, you can download the full vector file I sent off for laser cutting.

point_nemo_ponoko

Once the laser cut parts came back I used a light wood stain to stain the inner radius of the map to visually set it apart.

Geo, D3, Lasers, X-mas, oh my!

This map was my Christmas present for my dad this year. He’s a sailor, and I mean that not in the “day-sail with your buddies” type of way but rather the “single-handedly sail across oceans” kind of way. He hopes to make his way to Point Nemo one day, and this map was my little reminder to him to make it happen.

point_nemo_wood_map4

Standard
Art, Maps

Haiti Earthquake Tree Trunk Map

haiti_earthquake_full

This piece is a representation of the January 2010 earthquake that destroyed much of Haiti. Laser cut out of different kinds of bamboo, it shows the shake intensity data radiating out from the epicenter near Port-au-Prince.

This devastating earthquake caused massive damage and an unknown number of deaths. Estimates were anywhere from about 80,000 to 300,000 casualties. Even this many years later it’s hard to know the full impact of this event. I remember watching the news for the weeks after this earthquake as they tried to find the dead and survey the damage.

haiti_shakemap1

This is the data from the USGS for the shake intensity. These lines are contour lines showing how strong the shaking was. Looking at this you can almost feel the ripple out from the center.

I was sitting my computer, looking at this data, and I was struck by the pattern here.

haiti_shakemap2

If we look only at the contour lines alone you get this really interesting image. While I was staring at this it occurred to me that his image looked just like the rings of a tree.

tree_trunk

I certainly don’t want to trivialize the Haiti earthquake. Tens of thousands, if not hundreds of thousands, of lives were lost. But there is something oddly beautiful to think about this one destructive natural process, an earthquake, and the visual similarity to this other natural process, the growth of a tree. A growing tree is something we universally consider beautiful and organic, and representative of life. But both of these are nature doing its thing. One has horrific consequences for us, one is wonderful. But fundamentally they’re just nature running its course. I wanted to create a piece that tried to connect those dots.

haiti_earthquake_closeup1

Which is how I ended up with the final piece. It’s made out of two different kinds of wood, and meant to evoke that same beauty that we see when looking at a tree trunk. That same sense of a natural process.

haiti_earthquake_closeup2

This serves as a reminder to me. It’s a reminder that sometimes there isn’t much of a difference between something horrific and something beautiful. Deep down the same natural processes were responsible for the destruction in Haiti and the growth of this planet. And these forces, for better or worse, are completely outside of our control. To me there’s a certain beauty in that.

Standard
Data Visualization, Maps

Hurricane Blueprints

As we begin the 2013 hurricane season, I wanted to share something I created after last year’s monumental Superstorm Sandy. After the 2012 hurricane season I was trying to wrap my head around how large Sandy was and how that compared with prior storms. In particular, I wanted to understand how Sandy compared to 2011’s Hurricane Irene.

I thought a blueprint was the appropriate metaphor for comparing these storms. The windfields of the storms are mapped side by side so you can see how large the areas of severe winds were in each event.

hurricane_blueprint_1280
Larger version | Even larger version

All the storms shown are drawn to scale and have their original orientations preserved (so north is up in all the storms). You can see that Sandy, at almost 1,000 miles wide, is nearly twice as wide the prior year’s Hurricane Irene.

To show more detail, here’s a closeup of Sandy:

sandy_blueprint

And Hurricane Irene:

irene_blueprint

We ended up sending prints of these out to our SpatialKey customers who use our hurricane mapping software.

Credits

All storm data is directly from NOAA’s National Hurricane Center. The blueprint background is from psdGraphics.

Standard