humanities at stanford

humanities.md

Introductions

• Hi! My name is Mamata Akella and I'm a cartographer at CartoDB.
• What about you?
• What are you hoping to learn today?

Web Maps

• Before we dive into CartoDB, let's talk a little bit about what web maps are
• When we talk about web maps, we are referring to a few different components:
  • the map aka basemap
  • the data overlay
  • and the interface that the map sits in

Is this a web map?

• In some ways yes, because the maps are on the web, but when we are talking about web maps, we're usually talking about a map like this

Basemap

A map that provides geographic context to help support a wide variety of overlays- typically raster tiles.

Map tiles

are 256x256 pixels and organized based on coordinates (x,y) and zoom levels (z).

Zoom levels

Defines the scale of the current map view. Ranges from 0 (entire world) to 21 (individual building level).

Let's look at a tile

www.openstreetmap.org

Tile URL

Free or custom?

Overlay

Themes of information overlaid on a basemap that help tell a story - typically vector.

Data + Location + Geometry = Geospatial data

There are a variety of data formats for overlays

GeoJSON is a popular one

Basemap + Overlay

How do we interact with the overlay?

Javascript/HTML/CSS for rendering on the web

With these languages you can publish your map with the basetiles loaded and your data layers appropriately geocoded; with JavaScript you can also add to the interactivity of your map, revealing metadata in the tooltips

Using CartoDB you can:

• easily overlay data onto a map
• analyze the data to reveal spatial patterns
• tell stories by creating beautiful visualizations
• and then easily share them with the world!

CartoDB combines:

• the power of PostGIS and SQL
• CartoCSS for map styling
• Mapnik for tile rendering
• JavaScript for overlay and interactivity

These technologies are all packaged into one easy-to-use online interface.

Examples

• Alcatraz Escape Revisited
• LA Sheriff Election Results
• Starwars Galaxy Map
• Demonstrations in Brazil
• Global Forest Watch
• Urban Reviewer

Source: The Data Visualization Catalogue.

Source: Time Travel Between Counties, Carto.JS

DATA SEARCH TOOLS

Source: GDELT Geographic News Search Tool

Journalists have used the GDELT data to track wildlife crime, and the spread of the Islamic State in the Middle East among other things.

You can fork the GDELT hourly synced data set from the CartoDB DataLibrary and add it as a layer on your map or use the Geographic Search Tool linked above to search for tags of interest.

CHART GRAPHICS

Source: Geogia County Car Crash Counts, C3.JS

Planning a web map

• What is the purpose of the map?
• Where can I get the data?
• Will the map be queried for additional information?
• Will the map be viewed on multiple devices?

Data Import + Sync Tables

Geospatial data is info that ids a geolocation and its characteristic features/frontiers, typically represented by points, lines, polygons, and/or complex geographic features.

Issues:

• Comes in multiple formats (supported formats for CartoDB)
• Sources uncertain
• Contains errors
• etc.

Geocoding + SQL/PostGIS The most basic SQL statement is:

SELECT * FROM table_name

1. SELECT is what you're requesting (required)
2. FROM is where the data is located (required)
3. WHERE is the filter on the data you're requesting (optional)
4. GROUP BY and ORDER BY are optional additions, you can read more about aggregate/other functions below.

There are two special columns in CartoDB:

1. the_geom
2. the_geom_webmercator

The first of these is in the units of standard latitude/longitude, while the second is a projection based on the original Mercator projection but optimized for the web.

If you want to run SQL commands and see your map update, make sure to SELECT the the_geom_webmercator because this is the column that's used for mapping--the other is more of a convenience column since most datasets use lat/long.

Sync Tables

The Editor is especially setup to process realtime data updates via sync tables.

You can import data that lives online via a URL, and set it to pull and update your map at regular intervals.

Check the file types supported in sync tables; keep in mind that it also works with dropbox + google drive.

Notes:

• to auto-geocode a sync table, verify that it contains the following:
  • country column, a latitude column and a separate longitude column
  • a column of IP addresses
• to edit sync tables you need to be disconnected from the datasource, so during syncing, you can use SQL to manipulate the dataset on the fly
• you can create sync tables in both the Editor and via the Import API

Customizing UI + CartoCSS

You have myriad customization options in the in-browser editor:

• sql - run sql and postgis functions across your data
• wizard - adjust the type, colors and fills in your map
• infowindow - create hovers, tooltips with information from your datatables
• css - customize the css and style of your map outside the wizard
• legends - create keys for your map
• filters - filter the data without sql

Likewise, many types of visualizations:

• Simple -- most basic visualization
• Cluster -- counts number of points within a certain binned region
• Choropleth -- makes a histogram of your data and gives bins different colors depending on the color ramp chosen
• Category -- color data based on unique category (works best for a handful of unique types)
• Bubble -- size markers based on column values
• Intensity -- colors by density
• Density -- data aggregated by number of points within a hexagon
• Torque -- temporal visualization of data
• Heat -- more fluid map of concentration; emphasis on far over near-view

Styles

• Marker Fill: change the size, color, and opacity of all markers
• Marker Stroke: change the width, color, and opacity of every marker's border
• Composite Operation: change the color of markers when they overlap
• Label Text: Text appearing by a marker (can be from columns)

Infowindows/hovers

• Select which column data appear in infowindow by toggling column on
• Customize further by selecting HTML-view

Basemaps

Check out the base CartoDB Basemaps from Stamen.

Let's try some things out

Data from SF.gov

+ [SF Crime](https://data.sfgov.org/data?category=Public%20Safety&dept=&search=&type=datasets)
+ [SF PD districits](https://data.sfgov.org/data?category=Public%20Safety)  

MODIS real-time fire

+ [MODIS near real-time fire](https://earthdata.nasa.gov/earth-observation-data/near-real-time/firms/active-fire-data)  

SELECT 
  ST_Transform(the_geom, 54030) 
AS 		
  the_geom_webmercator,
  cartodb_id,
  confidence,
  brightness,
  frp
FROM 
 global_24h
WHERE
  confidence>=50
ORDER BY brighness ASC

GDELT data

+ Sync from CartoDB data library
+ Choose hourly updates
+ Query the data for something to do with fire:
```
SELECT * 
FROM 
  gdeltgkg_cartodb_hourly
WHERE
	  mentionedt
ILIKE 
  '%fire%'
```

Projections!

Robinson

Different designs for different themes of data

[