Expressive Cartography with Code

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

---

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

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

---
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."**

---

.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."_]

---

## The Great Cartographic Freakout

---

---

background-image: url(images/whaam.jpg)
## Code for imitating art
"Whaam!" Mapbox style (Amy Lee Walton)

---

background-image: url(images/carto-petals.jpg)
## Code for creative map symbols
["Petal plot"](https://team.carto.com/u/mamataakella/builder/db498bb2-3b19-11e7-811b-0e3ebc282e83/embed) (Mamata Akella)

---

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

---

## Code for animation
[A Breathing Earth](https://www.visualcinnamon.com/portfolio/breathing-earth) (Nadieh Bremer)

---

## Code for friendlier experiences
[Parkadelphia](https://parkadelphia.com) (Lauren Ancona)

---

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

---

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

## Code for tangible maps
[Cliffs&Coasts](http://rachelbinx.com/Cliffs-Coasts) (Rachel Binx)

---

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

---

# DESIGN

---

# YOUR

---

# DREAMS

---

## "[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 JavaScript, but still.  
_ICC 2017, Washington, D.C._**

---

---

---

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)

---

---

---

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

---

## 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/)]

---

## 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)]

---

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/)]

---

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/)]

---

# Artisanal, hand-coded maps

---

---

---

---

---

---

---

1. **JS code to find midpoint and angle of every coastline segment**  
2. QGIS stuff
3. **Ridiculous D3 code that reprojects a map and draws a line 10 pixels at a time until it hits land—16,000 times for like an hour in a browser tab**
4. More QGIS stuff
5. Illustrator stuff
6. Party

---

Code for special cases. Use duct tape.

Think beyond fills and strokes. Generate patterns and effects.

Think beyond circles and squares.  
You have the freedom to construct any map symbol you can imagine.

Use whatever code you know to customize and enhance static map design, even if it feels weird.

People have worked hard to make animations and transitions easy.  
Use them (judiciously) to improve the experience of map reading.

Get specific and write out lots of conditions.  
Small touches make for great cartography.

Ugly code can make for beautiful design.  
Don't be afraid to write it and share it.

---

## Let code—yes, even JavaScript—be a paintbrush.

---

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

Do you love great cartographic design? Of course you do!  
Join us at [NACIS](http://nacis.org/annual-meeting/current-meeting/) in Montréal, October 10–13.