Skip to content

Instantly share code, notes, and snippets.


makella/ Secret

Last active Oct 21, 2015
What would you like to do?
humanities at stanford


  • 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


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

Stamen 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). zoom levels

Let's look at a tile

Tile URL

tile url

Free or custom?

openstreetmap pintrest


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 geojson

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.


Source: The Data Visualization Catalogue.

Time Travel Map

Source: Time Travel Between Counties, Carto.JS

DATA SEARCH TOOLS GDELT Geographic News Search Tool

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.


County Chart

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.


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

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.


  • 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
  • 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)

Infowindow options

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

Basemap options

Check out the base CartoDB Basemaps from Stamen.

Let's try some things out

Data from

+ [SF Crime](
+ [SF PD districits](  

MODIS real-time fire

+ [MODIS near real-time fire](  
  ST_Transform(the_geom, 54030) 
ORDER BY brighness ASC

GDELT data

+ Sync from CartoDB data library
+ Choose hourly updates
+ Query the data for something to do with fire:



Different designs for different themes of data


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.