Expressive Cartography with Code

.link.right[Expressive cartography with code  
[awoodruff.github.io/nearc2017](http://awoodruff.github.io/nearc2017)]

???
Thank you etc.

---

Hi, my name is Andy Woodruff ([@awoodruff](http://twitter.com/awoodruff)).  
I live in Cambridge, Massachusetts and I make maps.

.link.shadow[[awoodruff.github.io/nearc2017](http://awoodruff.github.io/nearc2017)]

???
As noted, I'm Andy, and I'm a cartographer both for fun and profit up in the Boston area, about where that pushpin is.

---
class: middle, shadow-hard
background-image: url(images/axis_collage.jpg)

I work with [Axis Maps](http://axismaps.com).  
We **"bring the traditions of cartography to the web."**

???
For close to 10 years I've been a partner in a small web mapping company, Axis Maps. Our current elevator pitch is that we "bring the traditions of cartography to the web."

---

.thin[_"Axis Maps was formed in 2006 and quickly became engaged with the rapidly changing field of interactive mapping. Google Maps had launched the previous spring. **We were surprised to see that the cartographic fundamentals and traditions we studied in grad school were falling by the wayside.** Many new maps focused on the technical aspects of delivering geographic content over the web rather than clear communication through cartographic design."_]

???
Which essentially means we're trying to do good cartography with code. I've got an excerpt of a blurb from our website here about our origin story, not because I'm trying to pitch anything but because what I want to show and talk about today is more or less a status update on that bolded statement, that we saw a disregard for cartographic fundamentals in web mapping. (Don't worry, I'll try to have as little a point as possible and make this mostly pretty pictures.)

---

???
My company was formed out of the University of Wisconsin-Madison, where my current partners and I were in grad school for cartography and GIS degrees. UW-Madison is known for a strong cartography program, dating back to Arthur Robinson. When I say cartography I mean not simply making maps, but an emphasis on good map design.

---

???
Besides a tradition of cartographic and academic excellence, we come from a long tradition of telling people why their maps are bad. It's a habit I think we've grown out of by now, but it was strong among us and other capital-C cartographers over the last decade or so as the field evolved.

---

Enemy, c. 2005:
# The abhorrent "GIS Map"

???
When I entered the program it was the tail end of the era of hating on so-called "GIS maps", those quick ArcMap exports with weird colors, bad legends and so on, no matter if they served their purposes just fine.

---

## "Free yourself from GIS"
[indiemapper](http://indiemapper.io) (2010-ish)

???
For a while it was our endeavor to fix this by improving software. We sunk a lot of time into an online tool aimed at easy *good* thematic cartography, even with a hardly-cloaked dig at a certain desktop product in this "free yourself from GIS" line.

---

???
A quick video demo here. It's all about steering you toward soundly-made thematic maps, map projections and so on. You can still use this (some people do!) but this went nowhere as a business idea.

---

Enemy, c. 2007:
# The Google Maps mashup

???
Meanwhile the enemy had changed to the dreaded Google Maps mashup, the "red dot fever" map cluttered with a billion markers. I remember the gasps at my first NACIS conference in 2006 when a bunch of professional cartographers saw what was coming from early mashups.

---

class: bottom, right, tight, regular, shadow
background-image: url(images/axis_collage.jpg)

The rest of [what we do](http://axismaps.com/projects)

???
This is more where we're at home with our work, trying to do better web cartography than simple mashups.

---

**Enemy, c. 2013:**
# Pretty much everyone. Where's the _real_ cartographer?

???
But it's even more recently that cartographers' hatred of things reached its highs, as an onslaught of new amateur mappers seemed to spell doom for good cartography on the web, thanks to a proliferation of easy new tools for making web maps.

---

## The Great Cartographic Freakout

???
Here, in chart form, we can see that yellow line of shock and horror spiking first after the advent of Google Maps but then climbing to alarming levels in the last few years, before settling down a bit.

---

## 21st Century Cartographic complaints

1. **Automation** and the lack of human decisions  
  
2. **Amateur** mapping and cartographic **ignorance**

3. Loss of **creative freedom**

4. **Backwards steps** in design techniques

???
If I had to name the big complaints of cartographers in this whole period it would be these things. Challenges for sure, but not insurmountable. They have not brought about the death of cartographic design. I'd like to demonstrate how cartography in the age of code has rebounded, if it indeed ever did suffer.

---

#1. "Big Design"
.link["Whaam!" Mapbox style (Amy Lee Walton)]

???
I'm going to mostly skip over the frist two complaints. Automation is necessary for mapping huge datasets (among other purposes), and yes it's tricky to give it the human touch, but we're making strides. I've tried to use the term "big design" (to go with "big data") to talk about what people are doing to good design in things like global basemaps.

---

#2. Formal/informal education

???
Amateur ignorance is actually probably the biggest cartographic complaint, but we're starting to do pretty well. Informal guides to good web cartography continue to grow, and there are higher education opportunities for learning this stuff too.

---

# 3 & 4

???
I'm really just going to get into the third and fourth complaints, the ideas that we moved backwards in cartographic design, and that code-based cartography doesn't give us the creative control that we have with a pencil or some tool in Illustrator.

---

# DESIGN

???
I think nothing could be further from the truth! These days, if you can dream it you can probably design it.

---

# YOUR

---

# DREAMS

---

(with code!)

---

## "[A]nything you can imagine, you can do. I think we are living in the best time to be a cartographer."
**Tom Patterson, National Park Service cartographer, probably not talking about code, but still.  
_ICC 2017, Washington, D.C._**

???
Over the summer I saw Tom Patterson quoted saying about as much in his talk at the internattional cartographic conference, which is perfect because it's his work that started me on the personal journey toward creative freedom that I'm going to share.

---

???
If you don't know Tom Patterson, he designs beautiful maps for the National Park Service, especially when it comes to terrain depiction.

---

---

Shaded relief in Photoshop. This tutorial still works, 20 years later. Try it!   
[http://www.shadedrelief.com/cp28/relief_tp.html](http://www.shadedrelief.com/cp28/relief_tp.html)

???
He published a tutorial 20 years ago on shaded relief in photoshop. You can still find this on his website, as I did about 10 years ago, and you can still follow it in modern versions of Photoshop.

---

???
It's a method of taking a grayscale DEM image like this...

---

???
And turning it into a shaded relief map like the one I did here. This was incredible to me at the time—we thought ourselves designers and that good maps came from design software, not GIS... and here I could make a really nice map without any GIS software at all!

---

![](images/relief/table.png)  
![](images/relief/slx.png)  
![](images/relief/sly.png)  
![](images/relief/sl0.png)  
![](images/relief/az.png)  
![](images/relief/L.png)

???
A couple years later I was on a kick of writing code to do GIS-ish things on the web, and at some point it dawned on me that basic shaded relief is pretty straightforward math. And you know what's great at math? Code!

---

## Remember when Flash was cool?

```
public class ShadedRelief extends Sprite {
  // Do a buncha math and junk with AS3.
}
```
![](images/molokai_shaded_tinted.jpg)

.link[[andywoodruff.com/blog/shaded-relief-in-as3/](http://andywoodruff.com/blog/shaded-relief-in-as3/)]

???
So I built a thing in Flash to do the same thing, read a grayscale image and produce a shaded relief map. This also stuck me as pretty cool, that I could just do math on pixels and come away with a nice map.

---

## Remember when JavaScript was cool?

```
function drawRelief () {
  // Do a buncha math and junk with JS and Canvas.
}
```
![](images/molokai-relief.png)

.link[[github.com/awoodruff/canvas-shaded-relief](https://github.com/awoodruff/canvas-shaded-relief)]

???
Then Flash fell far out of fashion, so after another couple years I did the same thing in JavaScript, reading and drawing to canvas elements. Great, I'd figured out that you can pretty easily to pixel-level math to make maps. What's next?

---

background-image: url(images/molokai_sketchy.jpg)
.link[[andywoodruff.com/blog/hachures-and-sketchy-relief-maps/](http://andywoodruff.com/blog/hachures-and-sketchy-relief-maps/)]

???
This! From time to time I just pick up the same project and try something new with the code. Here I've got a method that takes that DEM and comes out with a grassy, fuzzy looking map that I kind of want to touch.

---

???
Another example here.

---

???
And some steps that led me to that final look. I keep tweaking the code and moving farther away from that sterile look that cartographers are afraid of, toward something kind of artistic. I'm using that same math as always, but drawing something different with it. In this case, short strokes parallel to the slopes.

---

class: bottom, black, contain
background-image: url(images/molokai_flow.gif)
.link[[andywoodruff.com/blog/the-rain-on-terrain/](http://andywoodruff.com/blog/the-rain-on-terrain/)]

???
And my most recent stop along this path is here, again doing those same calculations but this time drawing animated flows along slopes, as if water were falling and flowing through the terrain. Essentially we throw random points at the map and then keep looking for the lowest adjacent spot, sending the "flow" that way.

---

???
Here's another example. This one has evolved to full web map status, so you can go to anywhere in the world and render this. It has Mapzen hillshading behind it,

---

???
And also uses these elevation tiles for its caluclations. These are a lot like the grayscale images except it uses more color channels so that we can read more than 256 values from it.

---

# Artisanal, hand-coded maps

???
What I'm working toward is deliberately crafted design via code, "hand-coded maps" rather than default looks and cold math. Cartography by code is cartography without constraint—if you're willing to dive into it and fiddle around, you can design just about anything.

---

[earth](http://earth.nullschool.net) (Cameron Beccario)

???
To name but a few examples... hopefully everyone has seen this "earth" map by Cameron Beccario (and the wind map by Fernanda Viegas and Martin Wattenberg that inspired it), with the beautiful real-time animated depiction of wind etc.

---

[Canvas flowmap](https://github.com/sarahbellum/Canvas-Flowmap-Layer) (Sarah Bell & Jacob Wasilkowski)

???
We can come up with methods to do difficult things like flow maps, and enhance them with details like animation.

---

Mapmaster (Axis Maps, soon)

???
We can do traditional thematic cartography (this screenshot is from a fully interactive map), coding the minutae of design decisions exactly how we want them. For example, the rules for the various stripe patterns here, or the map projection.

---

["Petal plot"](https://team.carto.com/u/mamataakella/builder/db498bb2-3b19-11e7-811b-0e3ebc282e83/embed) (Mamata Akella)

???
We can devise clever new types of symbols, more easily and rapidly than before

---

background-image: url(images/style_transfer.jpg)
  
[Map style transfer](https://twitter.com/michelleful/status/766066337009590272) (Michelle Fulwood)  
.smaller[([original map](http://www.mapsmith.net/usaresources/) Stephen Smith)]

???
We can do crazy processing on map images, for example this style transfer experiment that one of our Maptime Boston regulars did

---

[Beyond the Sea](http://andywoodruff.com/blog/beyond-the-sea/) (me)

???
We can use code for generating static maps exactly as we want them, when software doesn't allow for the look we want. I did these maps that draw "views" straight across the ocean by throwing together little D3 scripts that would find the paths and spit out maps.

---

class: white, bottom, contain, tight, regular
background-image: url(images/fireworks_loop.gif)

[Same, flowing and exploding edition](http://andywoodruff.com/blog/beyond-the-sea-flowing-and-exploding-edition/)

???
We can take static maps and go bananas making them interactive. This is the same data but in a form where you can mouse over and click coastlines to see the sightlines flow outward.

---

class: bottom, shadow, tight, regular
background-image: url(images/cliffsandcoasts.png)

[Cliffs&Coasts](http://rachelbinx.com/Cliffs-Coasts) (Rachel Binx)

???
We can write code that turns map data into tangible products, as Rachel Binx has done in several projects.

---

[Illuminated contours in QGIS](https://anitagraser.com/2015/05/24/how-to-create-illuminated-contours-tanaka-style/) (Anita Graser)

???
Code assists us in desktop mapping, too, as some scripting in QGIS or Arc makes for nice custom maps.

---

(Out-of-the-box tools without code might surprise you too)  
[Luminance Hack](https://blogs.esri.com/esri/arcgis/2017/10/26/luminance-hack/) (John Nelson)

???
But I'd be remiss if I didn't mention that out-of-the-box tools themselves also continue to become more amazing, as any of John Nelson's work will demonstrate.

---

1. Code for **traditional** cartographic techniques
2. Code for **enhanced** cartographic techniques
3. Code for **new** cartographic techniques
4. Code for **expressive** design

???
To sum up what all those examples represent, I'd say it's about not only matching cartographic design capabilities of the past, but exceeding them. And importantly, that code lets us be fully expressive and unbound.

---

"Simply put, there is no substitute for writing code. The creation of maps through code affords the composition of techniques and interfaces in ways wholly unanticipated by the toolmaker, greatly increasing the cartographer’s ability for self-expression."

.link[Mike Bostock & Jason Davies, ["Code as Cartography"](http://www.tandfonline.com/doi/abs/10.1179/0008704113Z.00000000078?journalCode=ycaj20)]

???
Mike Bostock and Jason Davies said in one sentence better than I did by rambling for half an hour. With code you can create infinite techniques, without the toolmaker having to anticipate what you might do with the tool.

---

???
To force it into a bad analogy, traditional use of traditional software maybe gives you a refrigerator and a nice set of map magnets. The fridge-maker intended for magnets to go on there; the magnet-maker knew the magnets would probably go on a fridge.

---

.link["The North American Continent" (fridge prototype), [Anton Thomas](http://www.antonthomasart.com/)]

???
With code for cartography you get the refrigerator, and maybe a pen. The fridge manufacturer never saw Anton's beautiful map coming, and didn't have to. Code doesn't design maps; WE design maps, wielding code. So grab a pen and start drawing on fridges!

---

[awoodruff.github.io/nearc2017](http://awoodruff.github.io/nearc2017)  
andy@axismaps.com  
[@awoodruff](http://twitter.com/awoodruff) | [andywoodruff.com](http://andywoodruff.com) | [axismaps.com](http://axismaps.com)

Do you love great cartographic design? Of course you do!  
Join us at [NACIS](http://nacis.org/)!

Are you in the Boston area?  
Join us at [Maptime Boston](https://www.meetup.com/Maptime-Boston/)!

???
thx