Community spatial data analysis through “printables”

<div class="footer-small"><span>This presentation is available at:
<a href="https://geog.space/aag">geog.space/aag</a></span></div>

---

class: title-slide, center, middle, inverse
background-image: url(img/autumn19_heaction_fistsonly.png)
background-position: center
background-size: 100%

# Community spatial data analysis through “printables” 
### Monica Stephens
### Durham University
<br/>[<svg aria-label="Twitter" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Twitter</title><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> @geographiliac](https://twitter.com/geographiliac)<br/>
[<svg aria-label="Paper Plane" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Paper Plane</title><path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"/></svg> monica.stephens@durham.ac.uk](mailto:monica.stephens@durham.ac.uk)<br>
[<svg aria-label="Globe" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Globe</title><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg> www.geog.space](https://geog.space)
<br>
<svg aria-label="Laptop" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Laptop</title><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"/></svg> This presentation: [geog.space/aag](https://geog.space/aag)<br>

---

background-image: url(img/49184839202_e19275e624_o.jpeg)
background-position: 50% 50%
background-size: 100%
class: center, bottom, inverse
background-size: cover

---
class: inverse, middle, center

# Remember Spring 2020?

---
class: inverse

## March 2020: The world shut down

.leftcol60[
- Stay-at-home orders close schools for in-person instruction
- Distance education & virtual learning is nascent
- Primary school teachers lack the training & resources to offer active learning over Zoom
- Many schools stripped their curriculum to the essentials abandoning geography, community, and lessons around emotional growth
]

.rightcol40[<div class="flourish-embed flourish-chart" data-src="visualisation/3031227">
<script src="https://public.flourish.studio/resources/embed.js"></script></div>]

---

- Millions of parents provide childcare while working from home

- Wealthy parents form "pods" and hire nannies/tutors to mitigate the educational impacts of the pandemic

## Social distancing creates a toll on mental health & well being

- American Academy of Pediatrics declared an emergency in child mental health due to "stress brought on by COVID-19" ([AAP, 2020](https://www.aap.org/en/advocacy/child-and-adolescent-healthy-mental-development/aap-aacap-cha-declaration-of-a-national-emergency-in-child-and-adolescent-mental-health/))
- American Psychological Association: Academic and social development decline as "Zoom school" isolates students ([APA, 2020](https://www.apa.org/news/apa/2020/online-learning-mental-health))
]

.rightcol40[
<img src="img/Picture1.jpg" alt="kid joins me on zoom call" width="400">
_In my house rules around screentime are lifted to accommodate distance learning and parental needs_
]

---

## What a digital geographer can do?

- Panic
- Scream
- Collect resources and prepare to 'homeschool' geography, GIS, and spatial analysis]
.pull-right[.thumbnail[
![](img/floorpuzzle.jpeg)]]

.pull-left[
##  Problems with available resources 
- 'Panic buying' from other parents creates a shortage
- Amazon & Etsy have expensive map puzzles
- Geography toys emphasize on memorization of political borders and disconnected facts (e.g. landmarks, flags)
- Scale is limited to continents and/or countries
]
.pull-right[.thumbnail[
![](img/bathtub_eu.jpg)]]

---
class: inverse

# Online Resources and "printables"
.leftcol25[
- Low resolution maps

- Difficult to print (dimensions/black borders)

- Pop-ups, ads, and suspicious downloads

- Often not free (TeachersPayTeachers.com)

- Poorly maintained (e.g. National Geographic), or not updated (ex: South Sudan)

- Global/National scale
]

---
class: middle
# Printable teaching  materials

### My approach to teaching GIS/spatial analysis/Cartography includes lots of [printable worksheets](https://geog.space/worksheets/)

[.thumbnail60[![](img/worksheets3-01.png)]](https://geog.space/worksheets/)

.rightcol25[.footnote[[*] Worksheets available at [geog.space/worksheets](https://geog.space/worksheets/) ]]

---

background-image: url(img/carcassonne.jpeg)
background-position: 50% 50%
background-size: 100%
class: middle, inverse
background-size: cover

# Can I use printables to engage a 5-year old? _(without an ipad)_

.footnote[[1]Mewborne & Mitchell (2019) Carcassonne: Using a Tabletop Game to Teach Geographic Concepts]

---
background-image: url(img/roadgame.jpg)
background-position: 50% 50%
background-size: 100%
class: middle, inverse, center
background-size: cover

With a laser printer and an Adobe Illustrator license* I created

# Printable 8x8 tiles for designing routes

[Download pdf of game](https://geog.space/road_game.pdf)

Mapbox developed and distributed a [PDF coloring book](https://go.mapbox.com/rs/117-NXK-490/images/mapbox-coloring-book.pdf)

- Includes continents and major world cities (Cape Town, Shanghai, Rio de Janeiro, DC)
- A pdf is easy to print and share ('portable document'), but static (no altering)
- Mapbox used the 'monochrome' style as a basemap for their coloring book

With a laser printer and free access to a web server* I began developing my own hyper-local coloring book

]

---
# Challenge #1- The Basemap data

- Mapbox uses OpenStreetMap to source building footprints
- Contributions to OpenStreetMap are spatially uneven
- Some blocks have rich details, others are blank

<div id="htmlwidget-91f9c5e597ed0ad69256" style="width:100%;height:375px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-91f9c5e597ed0ad69256">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[42.94676,-78.86023],16,[]]},"evals":[],"jsHooks":[]}</script>

---
background-image: url(img/footprintcomparison.png)
background-position: center
class: top
background-size: cover

### Created a new Mapbox Style by removing the OpenStreetMap building footprints
### Added in the [Microsoft US Building Footprints](https://www.nytimes.com/interactive/2018/10/12/us/map-of-every-building-in-the-united-states.html) for Buffalo, NY ]
--
![](img/msvsosm.png)

---

.rightcol40[
<div id="htmlwidget-f5a5174673ed2db1d358" style="width:100%;height:600px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-f5a5174673ed2db1d358">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://api.mapbox.com/styles/v1/geographiliac/ck8pzujdd0wo11im15mmlwmdm/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2VvZ3JhcGhpbGlhYyIsImEiOiJjaXppaHk0dngwMm52MzNubmExZ3pwbzJmIn0.QrGhGWLAKcqm3v9_sz3QBw",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"https://www.mapbox.com/about/maps/\">Mapbox<\/a> © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap<\/a> <strong><a href=\"https://www.mapbox.com/map-feedback/\" target=\"_blank\">Improve this map<\/a><\/strong>"}]}],"setView":[[42.94676,-78.86023],16,[]]},"evals":[],"jsHooks":[]}</script>
]
.leftcol60[
# Basemap/Slippymap

### Embedable, Scalable & Continuous
]
--

### Still not printable

### Still not accessible...

---
background-image: url(img/Continuouspaper.jpeg)
background-position: center
background-size: cover
class: title-slide, middle
# Challenge #2 - making a slippy map printable

### Converting a responsive continuous map to paged paper requires CSS

> CSS: Cascading Sytle Sheets - adds style to web documents written in HTML or XML (e.g. fonts, spacing, colors)

### PaperCSS: a minimal, opensource, CSS framework to style a .html page into dimensions conducive to printing (e.g. US Letter, A4, etc).
details at [getpapercss.com](https://www.getpapercss.com/)

---

# Challenge #3 - accessible & hyperlocal = location aware

>### Over 60% of Americans can not identify their house on a map ([NPR, 2019](https://www.wbur.org/hereandnow/2019/04/19/map-skills-severe-weather))

![](img/giphy.gif)
### Added a button to geolocate the user

---

# Visit the coloring map at [geog.space/colorme.html](https://geog.space/colorme.html)

---

# Deploying the map for community building

.leftcol60[
### - Combined with county property records to learn about spatial databases
### - Coloring choropleth maps
### - Walking papers for mapping neighborhood problems
### - Used by kids to plot pets, make "art", scavenger/treasure hunts, and learn about their neighborhoods
]

.rightcol40[
<img src="img/shotsnapp-1645828939.448.png" alt="coloring book featured in a local news blog" width="400">
]

---

background-image: url(img/coloring.jpeg)
background-position: 50% 50%
background-size: 100%
class: middle, inverse
background-size: cover

## Exploring spatial analysis and mapping can be a screen-free (and socially distant) activity
## Successfully fostered map skills while offering social familiarity with the neighborhood

In late 2021, Mapbox updated their building layer to include Microsoft Building Footprints in areas where OpenStreetMap data is unavailable.

A 2022 version will include international (A4) sized paper

---

background-image: url(img/coloring.jpeg)
background-position: 50% 50%
background-size: 100%
class: center, middle, inverse
background-size: cover

# Thanks!
-----

[<svg aria-label="Twitter" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Twitter</title><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> @geographiliac](https://twitter.com/geographiliac)<br/>
[<svg aria-label="Paper Plane" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Paper Plane</title><path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"/></svg> monica.stephens@durham.ac.uk](mailto:monica.stephens@durham.ac.uk)<br>
 These resources & more at [<svg aria-label="Globe" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#FFFFFF;overflow:visible;position:relative;"><title>Globe</title><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg> www.geog.space](https://geog.space)
<br/>

-----
<br/>

#### Special thanks to:<br/>
Charlotte Hsu for media outreach<br/>
University at Buffalo & Durham University for providing web hosting & Adobe licensing
<br/>
These slides created via the R package [xaringan](https://github.com/yihui/xaringan)