Mapping Systems

Diagrams and Spatial Grammar

Genealogy of the 2018 release of the Human Footprint Dataset

Prep

In this tutorial, the systems diagram we will draw is the intertwined genealogy of the Global Human Footprint for the 1993 and 2006 datasets and the Nighttime Lights dataset from the Defense Meteorological Program Operational Linescan System (DMPS–OLI) instruments. The Global Human Footprint analysis aims to provide a map of cumulative human pressure on the environment and –– as a result –– also to provide a global map of the "wild areas" (it's a part of a larger collection of datasets and associated studies known as the Last of the Wild project). The methodology we will diagram in this tutorial is outlined in the Venter et al. 2016 paper.

Global Human Footprint 2009 (2018 edition)

After completing this exercise, you should have the necessary technical skills to trace lineages of the geospatial datasets you’re interrogating and to map other complex socio-metabolic systems and flows.

Setting Up

Launch Illustrator and select the Web 1920 x 1080 preset and a workspace of your choice (in this instance, I use a slightly modified Essentials Classic). Save your project.

Systems diagrams are usually structured drawings, and so we will make use of the Rulers, Grid, Guides, and Snap functions:

• Click View on the main menu and make sure you have the Smart Guides, Show Grid, Show Rulers, and Snap to Grid checked.

• Click through Edit > Preferences > Guides & Grid (Windows) or Illustrator > Preferences > Guides & Grid (Mac) and set the Gridline every 72 px with 16 subdivisions.

Use Ctrl + ‘(Win) / Command + ‘(Mac) to Show/Hide Grid while working on the diagram. More information on Rulers, grids, and guides is available in Adobe's User Guide.

The Spatial Grammar

Now that you’ve set up your workspace, it’s time to develop a “spatial grammar” for your diagram. Systems diagrams almost always consist of nodes (symbols and textual markers), connections (lines/arrows), and occasionally additional graphic elements that serve as examples or provide context. We will develop the visual language for our diagram by drawing a simple genealogy of the Nighttime Lights dataset and then apply the same visual strategy to draw a (more elaborate) genealogy of the Human Footprint dataset.

The processing pipeline of the Nighttime Lights dataset is short, and it consists of the following three nodes/connections:

DMSP–OLI Sensor Imagery (Input) → NOAA (Processing) → Nighttime Lights Time Series Product (Output)

Now let's turn those elements into graphic symbols with labels and arrows. Create the following (new) layers: "nodes_symbols," "nodes_text," and "connections."

Symbols

• Make "symbols" the active layer, draw a rectangle (shortcut M), and round its corners (you will notice how it snaps to the grid):

• Duplicate the rectangle by holding the Alt (Win) or Option (Mac) and dragging it to a new location:

Alt-drag or Option-drag selection to copy object(s)

• Using the Direct Selection tool (A) on the left vertices of the shape you just created, round the corners even further:

• Right-click on it and choose Transform > Reflect… Select Vertical and click Copy:

These three shapes will serve as symbols for input, process, and output nodes on our systems diagram.

Text

Next, we will add text/labels to our nodes using one of Illustrator's multiple Type tools (before proceeding, read this very brief Type tools overview).

We will focus only on the Point type and Paragraph type tools in this tutorial:

• Highlight the "nodes_text" layer and select the Type tool or press T
• Point type: To add text at a point, click where you want the line to begin and start typing
• Paragraph type: To create a rectangular container for longer text like paragraphs, drag to make a bounding box

Point type and Paragraph type

Click Ctrl + T (Win) or Command + T to open the Character panel and expand its options:

Replace the placeholder text and experiment with fonts and text size until you're satisfied with your choices:

Connections

Finally, use the pen tool to connect the nodes and complete the diagram:

• Move the nodes a little bit further apart on the artboard
• Highlight the "connections" layer and select the Pen tool or press P
• Draw the connections (use guides for help if you want)

• Select both connection lines (or click on the little circle by "connections" in the Layers panel to select all objects on that layer)
• Expand the Stroke Options Panel and select the arrowhead for the endpoint of the connection paths:

Make any necessary adjustments to the text/nodes/connection lines and move the diagram to the top of your artboard. You are obviously welcome to develop your own visual language.

Mapping an Intertwined System

Now that we’ve familiarized ourselves with the basic building blocks of a systems diagram, we can start mapping a more complex genealogy. The Human Footprint calculation uses a combination of several different datasets for 1993 and 2009 (including the DMSP-OLS Nighttime Lights) as proxies for eight input variables to measure human impact on the Earth’s ecosystems:

Workflow of the Human Footprint approach to mapping cumulative human pressures on the environment

On your own: Referring to the information from Venter et al. (2016) study, and using the tools you just learned, create the following input and processing nodes:

Next, relying on the grid, draw the connections:

We will use the “Round Corners” effect to smoothen the appearance of the connection lines and make the drawing looks more like a flow chart:

• Select all objects on the “connections” layer
• On the main menu, click Effect > Stylize (Illustrator Effects) > Round Corners…
• Set the Radius to 26 px or any number that works for the distance between your nodes

• You can always edit or remove the effect(s) of the selected objects in the Appearance Panel:

On your own: complete the diagram by adding and connecting the Human Footprint output node and connecting the Nighttime Lights output node to the Nighttime lights input node.

The schematic genealogy of the Human Footprint 2018 dataset

Adding Annotations and Attributes

The diagram above, while complete, isn’t very descriptive. Both the nodes and the connections could use explanatory annotations and additional attribute information (remember: most of the nodes in this diagram are spatial datasets; they contain qualitative or quantitative information). For example, each pixel in the DMSP-OLI Nighttime Lights Time Series product has a digital number (DN) value ranging from 1 to 63. That raster is then used as an input to generate the “Built environments” variable for the Human Footprint calculation (the study's authors considered pixels to be built if they exhibited a calibrated DN greater than 20). All areas mapped as “Built environments” were then given a pressure score of 10 in the final weighted overlay of the eight input variables. The pressure score chart they used is below:

The pressure scheme used to assign weights to the eight individual pressures in the Human Footprint
maps.

These are all node attributes we can represent visually. One approach to achieve that is to assign stroke weights proportional to the respective pressure scores to each connecting line between input variables and the final weighted overlay (click Window > Stroke to show/hide a stroke panel):

Another approach is to add a visual key that resembles a cartographic legend within each input variable:

To do so, use the Shape Builder tool you learned in the previous tutorial:

Fill the newly generated shape with the corresponding pressure score indicator. For example, the “Navigable waterways” input variable will have a pressure score ranging from 0 to 4. One way to visualize that is to add a gradient fill with a color ramp from 0% to 40% black:

Repeat this process for all nodes in your diagram, and finally, add annotations for values represented:

ASSIGNMENT OVERVIEW

For {L03}, choose any dataset you’ve worked with so far for lab (or another dataset with which you’re already familiar); however, in contrast to previous labs, you may not choose the Global Terrestrial Human Footprint dataset we’ve been working within this tutorial. Explore the dataset’s metadata by perusing the .xml file (typically included in the dataset folder ) and/or doing some minimal background research using the information from the dataset website/portal, scholarly articles or literature explaining methodology, etc.

After becoming comfortable with the workflows detailed above, you’ll compose a preliminary systems diagram of this dataset. Your composition should trace the inputs, internal processes, and outputs of the dataset as a system. While you need to account for the basic physical and technical components and processes of the dataset and related systems (e.g., the sensor or satellite it relies on, exactly what it measures and how, associated datasets, who created it and when), what counts as an “input,” “process,” or “output” might include more capacious and heterodox elements that track the work the dataset is doing in political, economic, scientific, social, and other spheres of life.

In constructing your diagram, consider the following:

• What physical, technical components do we need to know about to understand the basics of how this dataset is created, how it works, and what it’s used for?
• Are there categories that lend themselves to a “symbolic grammar” — including both shapes and lines — that will make your diagram more informative?
• Is it directly related or otherwise connected to other datasets, like the Human Footprint dataset?
• Where should you draw the boundary around your dataset? What does it include, and what does it leave out as “externalities”? What crosses that boundary, in which direction, and what transformations occur in crossing the threshold? Are there ways to signal the porousness or transgressions of the boundary?
• Is there a particular part or set of relations within and/or beyond the system worth paying more attention to?
• How might your diagram shed light on “objective” processes of classification, measurement, sensing, etc? What does unpacking the steps of the process show about the intervention of subjective decisions, whether for scientific or social/political/economic reasons? Recalling the question posed during class, is a sensor only a technology, or a dataset only digital information? Or can they reveal a whole system of social relations that exceed hardware and software, of which they’re only a cluster of nodes?

Your composition may be critical, creative, or simply an exercise with the basics of composing a complex diagram in Illustrator.

DELIVERABLES

For your {L03} post to the Lab WIP channel in Are.na (due Thursday, 4/21 at 9am):

1. After developing an original systems diagram with the questions above in mind, export your drawing as an SVG or PDF (using Save As > Format > Adobe PDF or Save As > Format > SVG).
2. Your work-in-progress should show inputs, processes, and outputs totaling to at least 10 elements: 6 elements or components within your system and 4 outside the system. Use at least 3 styles of linework to show relations between the elements in your drawing. Include a legend that tells us what your symbolic grammar and linework mean.
3. Give your block a simple but descriptive title that tells us what dataset you’re working with and what you’ve focused on, e.g., “{L03} Global Terrestrial Human Footprint: Blurring Boundaries between ‘the Human’ and ‘the Wild.’
4. In your description, include the following:

• A list of datasets used; if they’re from outside the class repo, make sure to link to the original source.
• A “narrative legend,” i.e., a short and clear description of what’s being represented.
• Tell us briefly why you chose the dataset and what you’ve discovered about it (who made it and how, what it shows, geographic extents, the period of time it covers, whether it’s being actively developed or updated, how many versions there are, what kinds of tools, techniques and technologies it relies on, a few uses and users, etc). Make sure to include the source for your information.
• Reflect on some aspect of the workflow with a view to the strengths, limitations, and/or biases of the systems diagram. What about this strategy works? What doesn’t work? Does it work on its own, or would it work better in concert with other kinds of media (and if so, which kinds)?

Remember to keep it concise; you don’t need to write more than 300 words (excluding, if you wish, the listing of your dataset and citation, which can by lengthy).