Approaches to Visualizing Data with Spatial and Temporal Tools

By Francesca Giannetti, Digital Humanities Librarian, Rutgers University / @jo_frankie


The data and slides for this presentation are available at:

Navigating this Presentation

  • In case of descent down a rabbit hole, note that the slides are numbered.
  • Press ESC to see the slide overview. Use your arrow keys to move around. Click on any slide to exit the overview.
  • Hold down alt and press any slide element to zoom in on it. Alt + click again to zoom back out.

My thanks to Hakim El Hattab for the cool presentation framework: reveal.js

Table of Contents

- Motivations for Using Spatial and Temporal Approaches

- Data Formatting

- Exercises

- Data Transformations

- Visualization

- Timelines

- Other Resources

Goals for today:

  1. Examine some of the motivations for using mapping and timeline tools to explore data and make arguments
  2. Get familiar with two applications for spatial and temporal analysis: CartoDB and Palladio
  3. Create our own interactive map and timeline to explore bibliographic and performance data

Motivations for Using Spatial and Temporal Approaches in the Humanities

Identifying Patterns

Screen cap of Stanford Yellow Fever Epidemic Modern geospatial approaches owe a lot to the field of epidemiology, which has used maps as a way to detect patterns in the way that disease spreads. This example shows the Yellow Fever Epidemic of 1850. Historians at Stanford created it as a way to explore the lived experience of disease and death. They note that "different temporal aggregations of data can shift interpretations of the spatial pattern of epidemics."

Charting a Travel Narrative

Screen cap of A Sentimental JourneyUVA student Kurt Jensen visualizes the travels of Yorick in Laurence Sterne's A Sentimental Journey Through France and Italy. In doing so, he explores the tensions between narrative time and the actual course of travel.

Exploring Relationships

Screen cap of Franklin case studyThe Franklin case study of Mapping the Republic of Letters compares Benjamin Franklin's correspondence network to that of Voltaire. Using this view of the data, one could make the argument that Franklin was the more cosmopolitan of the two. This finding would likely be rigorously disputed by an Enlightenment scholar.

Modeling Changes Through Time

Ben Schmidt makes several interesting observations about his work mapping the paths taken by American ships in 1800-1860. This visualization collapses the data into a single year to show the seasonal migration of ships in the Pacific Ocean.

Exploring Content

Screen cap of Yale photogrammarMaps and timelines can lead to new insights about your collections, but they are also a great way of allowing users to explore content. The Yale Photogrammar provides an interactive map interface and scrubber bar for exploring thousands of photographs by geography, time period, and creator. See the Labs section for more facets.

Data Formatting

time saving techniques from the trenches

Data Formatting

Description City Country
Mozart family starts tour Salzburg Austria
They arrive in Munich Munich Germany
Then they go to Mannheim Mannheim Germany

Use a header row to describe your data; avoid special characters, spaces and numbers here. Place individual locations on rows underneath the header; 1 row = 1 location. Store each address element in its own cell.

Data Formatting 2

35 W Fifth StCincinnatiOH452022016-03-05T13:40:00z

Store address elements and dates as text fields so that your spreadsheet application does not autoformat them and introduce errors. Use a machine readable format for dates and times, i.e. ISO 8601.

Data Formatting 3


Geocoding services need contemporary geopolitical information to work well. If you're working with historical data, add some columns to record where the location is currently.

Data Formatting 4

Beethoven was somewhere around here.KarlsbadKarlsruheGermanymedium

If you're dealing with uncertainty in your data, record it as a separate element.

Data Formatting 5

Lastly, it's recommended to assign a unique identifier to each location, particularly if it is important to know the order in which you entered your data. Many mapping applications automatically assign a unique ID to records, but sorting will destroy any original order.



Create a free CartoDB account at and log in. Take a few minutes to explore the interface. See: Dashboard, Datasets, Maps.

About our Data

We will explore a dataset prepared by Michelle Oswell of the Curtis Institute on Breitkopf & Härtel's Concert Program Exchange, or Konzertprogramm Austausch. B&H began the series in 1893 "as a means to promote current awareness of concert repertories via the circulation of printed concert programmes". Subscribing organizations sent their programs to B&H for distribution in the series. See Michelle's ATMLA presentation for more background on her project.

Adding Data

In the materials downloaded to your desktop, there is a data folder with three datasets. We will add austausch.csv to CartoDB by going to the Datasets window of the Dashboard.

Note: by your user name in the upper left corner, you should see either Maps or Datasets with a down arrow next to it. If it says Maps, click the down arrow and navigate to Your datasets.

Click on New Dataset, where you should see a Data file option (default). Click BROWSE and choose austausch.csv. Click Connect Dataset.

Adding Data 2

CartoDB should do a good job of “guessing” your data type (point). In the Data View of your dataset, hopefully you’ll see a new column called the_geom with coordinate data. CartoDB will automatically geocode physical locations for you, which is to say it will assign latitude and longitude coordinates, so long as you supply clean address data. Geocoding of administrative regions (city, state, country) is free; geocoding street addresses is capped at 100 per month in the free plan.

Adding Data 3

Let's add a second dataset. Return to the Datasets window of your dashboard. Click the little crooked arrow in the upper left side of your screen (next to the title of the dataset) to get back there. Now click New Dataset. Press BROWSE and find the dataset called in the data folder. Click Connect Dataset. This zipped file actually contains five files. We are only interested in the one called vg2500_bld. This stands for Bundesländer, or state. You can delete the others if you want to keep your dataset area clean.

Dataset provided by Joerg Moosmeier of Esri Deutschland Gmbh.

Data Transformations

Data Wrangling

Returning now to the Austausch data you uploaded, let's assume that CartoDB doesn't assign latitude and longitude coordinates to your physical addresses, or it skips a few rows (this will probably happen). If the_geom is empty, or if a few cells in this column have null values, go to Edit > Georeference. Navigate to the City Names option; enter citymodern as the city, and country as the country (skip Admin Region), and click CONTINUE. Then click "Georeference your data with points."

Data Wrangling

Here's something odd. Munich appears a lot in our dataset, but in the map view you'll probably see that there's no dot over Munich. This is a peculiar GeoNames geocoding error. Here's a global fix. Go to the SQL window, paste in this command, and click Apply query.

						UPDATE austausch
SET the_geom = CDB_LatLng(48.1333,11.5667) 
WHERE citymodern ILIKE '%Munich%'

Adding a Column

Let's turn now to the Bundesländer polygons, called vg2500_bld. Return to the datasets window and click on it to open the data view. We're going to add a column to this dataset in which we will include values for the total number of subscribers by German state. Click on the little icon on the bottom right of your screen (it will say 'add column' when you hover over it with your cursor) and add a new column. Rename it subs_per_state. Change the data type from string to number.

PostGIS Functions: Spatial Join

Now we are going to count the number of subscribers by German state using the ST_Intersects function. This command is updating vg2500_bld, setting the subs_per_state column to equal a total (*) count of all the subscribers that intersect with each state. ST_Intersects is the PostGIS function for spatial joining. More information on other PostGIS functions can be found here.

					UPDATE vg2500_bld
SET subs_per_state = (
FROM austausch
WHERE ST_Intersects(the_geom, vg2500_bld.the_geom)

PostGIS Functions 2

Next, let's draw some lines in between our Breitkopf & Härtel subscribers to get an idea of the subscription network. It may be useful to collect our points by issue first. This would help if we wanted to visualize the subscribers of individual issues of the Exchange Concert Programs (as opposed to all of them at once). We'll use a PostGIS function called ST_Collect. Click on the SQL window, paste in this command, and click Apply query

							SELECT ST_Collect (the_geom) AS the_geom, issues 
FROM austausch 
GROUP BY issues

Had enough of PostGIS? Skip ahead to Visualization.

More PostGIS Functions 3

Next, we'll draw those lines. Click on the SQL window, paste in this command, and click Apply query. CartoDB gives you the option to "create dataset from query." Click on this option so that the lines can be added as an optional data layer to your map visualization. Change the title of this dataset to austausch_subscribers

							SELECT ST_MakeLine (the_geom ORDER BY time ASC) AS the_geom, issues 
FROM austausch 
GROUP BY issues

Had enough of PostGIS? Skip ahead to Visualization.

PostGIS Functions 4

If you're not sick of PostGIS yet, then here's one more thing you can try. Let's say we want to draw a radius around the old Breitkopf & Härtel headquarters in Leipzig so it stands out on our map visualization. Go back to your dataset window. Click New Dataset, then Create empty dataset. Call it bnh. Double click on the cell under the_geom to enter a coordinate pair. Enter longitude 12.3833; latitude 51.3333.

PostGIS Functions 5

Now click on the SQL window and run this command. This will draw a 50 mile radius around Leipzig that we can then add as a data layer to our map visualization in order to draw attention to this location. We're converting from the default meters to miles by multiplying 50 times 1609 (1609 meters ≈ 1 mile).

  ) AS the_geom_webmercator,

PostGIS Functions 6

The ST_Buffer function creates a polygon or shape. Click on "create dataset from query." You'll see that the resulting dataset has two columns: cartodb_id and the_geom. Click on the icon on the lower right of your screen (add column). Rename this column name. Double click on the cell underneath it and enter the value: Breitkopf und Härtel. This allows you to use this text as a label in your map visualization.


CartoDB's Visualization Wizard

Now we'll put together some of these data layers we've created into a shareable, interactive map visualization. Go back to your dataset window by clicking on the bent arrow on the upper left of your screen. Go back to the austausch dataset and double click on it to open the data view. Scroll over to the time column and make sure that CartoDB has assigned a data type of 'date' to it.

Visualization Wizard 2

Now navigate to the map view of austausch. You'll see CartoDB's default SIMPLE visualization with the orange dots. Open the tool bar on the right hand of your screen by clicking on the paint brush icon (visualization wizard). Next try the CLUSTER visualization. Experiment with the buckets, the fill color, the transparency value (note: 1 is perfectly opaque, 0.5 is 50% transparent), the marker stroke (white line around the dots), and every and anything else that strikes your fancy.

In other words, press all the buttons. You can't hurt anything.

Visualization Wizard 3

Another CartoDB visualization that is open to us with this dataset is TORQUE. Torque is for time series data. Set the time column to time (date works too). It may not make much sense for this dataset, but note that you can make the torque visualization cumulative, meaning that the dots fade very slowly so that a cumulative impact over time may be observed.

Visualization Wizard 4

Yet one more thing to try - HEATMAP - to see all the hotbeds of B&H subscriber activity. Notice that you can animate your heatmap by the time or date column.

Create Visualization

Settle on one of these visualization options for austausch, and then click on the button VISUALIZE in the upper right corner. Then click: OK, CREATE MAP.

Create Visualization 2

Next, click on the infowindow panel (the icon looks like a cartoon bubble). You can only have infowindows in the SIMPLE, CHOROPLETH and CATEGORY visualizations, so if you didn't happen to choose one of those, skip to the next slide. Let's turn on some column names in your infowindows. I suggest creating a hover event for cityhistorical. Then maybe create a click event for concert_title and venues. Note: you can always switch to Data View to inspect the column headers and determine which you want to display in the infowindow. To reorder your fields in the infowindows, just click and drag them.

Create Visualization 3

In the toolbar on the righthand side of your screen, click on the plus (+) button at the top to add another data layer. Add the German states layer, vg2500_bld, that we tinkered with earlier. Reorder your layers so that points (austausch) are uppermost and the polygons or shapes (vg2500_bld) are on the bottom. You can do this by clicking and dragging on the layers in that right-hand toolbar.

Create Visualization 4

When you add the German states layer, CartoDB may default to the CHOROPLETH visualization. But if not, open the visualization wizard while in the vg2500_bld layer and select CHOROPLETH. Now we can use that subs_per_state column we added earlier during the data transformations. Feel free to change the color ramp, quantification, buckets, and anything else. You can also add a label text to the states by selecting the gen column. But it might also make your map a bit cluttered. Now we can see where the highest concentration of subscribers are located.

Aside: Map Styling

Now might be a good time to mention ColorBrewer, which is a great resource for selecting colors for map visualizations.

Create Visualization 5

If you have the layers to add from the earlier data transformation exercises, try adding either the lines connecting the subscriber locations, or the buffer around Leipzig (Breitkopf & Härtel). I'd recommend stacking the data layers in this order, from top to bottom, for best legibility: austausch (points), bnh (polygon), austausch_subscribers (lines), and vg2500_bld (polygons). Note that using all four data layers at once may produce an overly dense visualization, but if you can finesse the colors, transparency and overlays, it just might be possible.

Create Visualization 6

Let's take a moment to debrief. What have you noticed about this Breitkopf & Härtel Concert Program Exchange dataset through the process of working with it? Are there any patterns or trends you've observed? Interesting characteristics? Is there anything missing that you thought would be there? Does it raise any additional questions? Technical questions?

Publishing and Sharing your Map

In the upper left hand corner below the title, select 'Edit Metadata' to add a Description and Tags to your map to make it more easily discoverable.

On the Options button on the bottom left hand corner, configure which elements will be on your final shared map. I recommend: Title, Description, Search Box, Share Options and Layer Selector.

Finally, in the upper right hand corner, select Publish to get a public URL for your map. You can share your map using that public URL, or by embedding the map on a website or blog using the Embed iframe and pasting it into your website.



We most likely won't have time (ha) for this mini-section on timelines, but I want to show briefly some of the features of a different tool developed by the Stanford Humanities + Design Lab: Palladio. Although it doesn't have the PostGIS and PostgreSQL capabilities of CartoDB, Palladio has a map tool that supports all kinds of visualizations (see Miriam Posner's tutorial for the details). I particularly like the Timeline and Timespan panels.

MetOpera Database

Let's give Palladio a whirl with the Repertory Report from the Metropolitan Opera's MetOpera Database. What we'll see won't be substantively different from what FiveThirtyEight and Suby Raman have already shown: the Met isn't too adventurous with its programming.

Timelines 2

Go to Palladio and click Start. Drag the dataset called met-operas-clean-geo.tsv into Palladio's text window and click Load. You'll probably see a red dot or two next to some of the metadata fields. Palladio wants to verify that any special characters were in fact intended, so click on the red dot to review them. Then click Done. Make sure that Palladio has understood that first_performance and last_performance are dates.

Timelines 3

Click on the Map visualization in Palladio's upper navigation menu. Click New Layer. Select Map Type: Points (default) and then for Places, select the lat_long column. Set your Tooltip layer to work. Check the box next to 'Size points,' and size them according to 'Number of untitled' (total number of works in the Metropolitan's repertory = 330). Click Add layer. This is a truly dull dataset in terms of geography, since we've only got one venue, but next open the Timespan panel on the bottom of your screen.


Timespan is a great feature for exploring datasets with two dates, e.g. birth and death dates, start and end dates for tours, etc. In the Timespan panel, go to Layout and select Parallel. Make sure that Start date is using the first_performance column and End date is using last_performance. Set the label to be work. We don't really need a grouping key with this dataset, but set Group to venue (wouldn't it be cool to have this repertory data for more than one theatre?).

Timespan 2

Parallel lines in the Timespan visualization will mean that the opera had its first and last performance in relatively close chronological succession. Deep diagonal lines indicate that the first and last performances are far apart, which likely means the work is an old chestnut. Hover over the lines with your cursor to see the work titles.


Click on the Timeline button to open a Timeline panel. Set Dates to first_performance, Height to 'Number of Untitled' (number of repertory works), and Group by work.

Timeline 2

This timeline gives us another view into the same phenomenon: the bulk of new operas were premiered before 1940. It may however be a bit easier in Timeline (as opposed to Timespan) to hover over the bars and see the work titles. You may discover that some of the post-WWII first performances were not exactly new works (e.g. Verdi's I Vespri Siciliani and Händel's Rodelinda). Here's the Repertory Report again for easy comparison.

Other Resources

Other Free (or Free-ish) Mapping Tools

Other Free Timeline Applications

Self-Guided Learning

CartoDB has the Map Academy and a separate tutorials section, both of which are excellent resources for learning about GIS.

Thank you!

Francesca Giannetti, Digital Humanities Librarian

Rutgers University | @jo_frankie