Today, we’re talking about three aspects of civic technology that help to make the government more accessible and effective for its constituents: govtech (how the government makes itself available), public data (providing access to data that impacts constituents), and participatory democracy (grassroots efforts to render government more effective). In this lab, we’re going to hone in on public data.
Public data offers the means to hold governments accountable, to understand how data informs decision-making, and to examine and sometimes contest the ways data is collected. It also informs reporting — every day, we see headlines that utilize data to make an (often inflammatory or click-baity) argument. Being able to track down the source of that data allows us to engage critically and thoughtfully with the news as well as with the government.
For today’s lab, we’re digging into some data-driven headlines about the St. Louis metro. Working in groups, explore your assigned article and work through the prompts in this form. You’ll be looking for 1) the argument the article is making, 2) how the reporter is using data to support that argument, 3) the source of that data, and 4) some thoughts about whether or not the article makes good and accurate use of that data.
NB: You might have to dig a bit to find the source of the data! Some articles might not link to it at all, and others might link to aggregators. Do your best to figure out the earliest origin of that data. (E.g. if the article links to an aggregator of crime statistics, try to figure out who actually collected them — local police departments? the FBI? a private company?)
Scrollytelling is a form of interactive storytelling that pairs text with media. As you scroll through the narrative, the media automatically transforms. Media might include video, images, and clickable maps. This is a storytelling technique often used in journalism as a way to distill complex topics into easily digestible and engaging stories.
These can be really complex! Here are some fancy examples of scrollytelling that highlight how interactive scrolling can engage the reader.
But they don’t have to be complicated to be effective. The key to good scrollytelling is to think about how your text and media enhance one another. The media isn’t just illustrating the text – it’s adding meaning that the text can’t convey effectively or completely on its own.
Here’s an example using the tool we’ll be working with today: How to Cross a River
Lab Overview
For this lab, we’ll collectively build a scrolly story about the Mississippi River. Each group member will contribute at least two to three slides, including text and a functional piece of media.
You can frame your slides in any way you choose. Feeling stuck? You might consider…
The history of the river — check out the Wikipedia article or local storytelling sites like “Unseen St. Louis” to see what significant events or curious anecdotes have taken place along the river.
Crossing the river — do you hate the Poplar Street Bridge? Are you charmed by the Old Chain of Rocks Bridge? What’s the best/easiest/least frustrating way to get across it?
Experiences of the river — What personal or sensory experiences of the river do you have? Have you fished in it? Kayaked on it? Smelled it?
Depictions of the river — Where does it show up in popular culture? How do people talk about the Mississippi, here or elsewhere?
Each row in the spreadsheet is one step, and each step is a combination of one block of text and one piece of media. There are three types of step you can choose from, depending on your media type: map, image, and video, which all pair a text box with a media box, and text, which is just text that stretches across the whole page. Select your media in the ContentType column (Column A). For the next few columns, there are some small differences in the information you need depending on step type.
For maps:
Skip Column B, the FilePath column.
In Column C, the AltText column, describe what’s visible on your map and what purpose it’s serving in your narrative.
In Columns E and F, Latitude and Longitude, add the coordinates for the center of your map. The easiest way to get your coordinates is to go to your location in Google Maps and right click/command+click on it. The coordinates will be at the top of the menu that appears. Click on them to copy them. Make sure that you separate the coordinates into the two columns and delete the comma between them — latitude is the first number, and longitude is the second number.
In Column H, ZoomLevel, choose how far in you want to zoom on the map. Zoom levels range from 0 to 18, and the higher the number, the more zoomed in you’ll be. For maps, a zoom level of 4 or 5 will show a whole region of the country. A zoom level of 13 or 14 will show detail at the level of streets and buildings. You can set the zoom level for each step, so think carefully about what you’re trying to demonstrate and where you want your reader’s attention! At the bottom of this page, there’s a map where you can zoom in to the frame you want and see what the zoom level is.
For images
To use images, you’ll need to link to them from somewhere. If you have access to the GitHub repository for your story, you can upload it there. That ensures that you have a stable link that won’t break. Otherwise, check with your instructor for the best place to upload it.
In Column B, FilePath, paste the File URL for your image.
In Column C, AltText, describe your image and what purpose it’s serving in your narrative.
In Column D, ImageOrientation (optional), put vertical or horizontal, depending on the orientation of your image.
Skip Columns E and F, Latitude and Longitude.
In Column H, ZoomLevel, choose how far in you want to zoom on the image. Images don’t need as high a zoom level as maps, and your image will get grainy if you zoom in too far. Choose a zoom level of 1 if you just want it to display as is.
The built-in zoom goes toward the center of the image. If you want to zoom in on a different area or pan between sections of the image, your best bet is to crop the image yourself and add the different areas of the image in as individual steps.
Your images will take up a big chunk of the screen, so make sure you’ve got a relatively high-resolution image — ideally not less than 1200 px in either direction. Not sure how big your image is? If you’ve got it saved to your computer, right click and select Properties and go to the Details tab.
For videos
You can upload videos to your GitHub repository, but in some cases the file sizes might get too big. You can also use links from YouTube or Vimeo. If you do, you’ll need to copy the link out of the embed code. Click on Share > Embed, and then copy the URL in the code.
In Column B, FilePath, paste the URL for your video.
In Column C, AltText, describe your video and what purpose it’s serving in your narrative.
Skip Columns D, E, F, and H, ImageOrientation, Latitude, Longitude, and ZoomLevel.
Adding and customizing text
Columns G and I, TextHorizontalPercentage and Text, are the same for all media types. This is where you’ll add your narrative content to your story. You have three options here:
You can add text to an existing piece of content, in which case the text will appear to the left of the media. If you go this route, try to keep your text under about 100 words per step.
You can add text as a standalone box with no media, in which case your text will stretch across the whole width of the page. To do this, select “Text” as your content type and leave columns B through F blank. You can have longer chunks of text in this format. (This is a good way to include your references!) This step type gives you a block of text with no background color or dynamic elements.
You can also set your step type to a media step but change the TextHorizontalPercentage to 100%. This will also give you a text-only step, but it’ll still have the same background color as all your other steps, and it will dynamically widen and narrow as you scroll.
In all cases, you can format your text using HTML. Here are a few essentials.
Since you’re entering your text into a spreadsheet, you won’t be able to use the Enter key to separate your paragraphs. But no one wants to read a wall of text! In order to break your text, use two linebreak tags between your paragraphs: <br><br>
You might want to format your text. Some handy formatting tags include <b>bold</b>, <i>italics</i>, and <u>underline</u>.
You can also include links in your text: <a href=“www.example-url.com”>The text you want to show up on the page goes here</a>. This is one way to add references as you go!
If you want to do more with HTML, check out this list of basic tags.
You can use this HTML editor to format your text and generate the correct HTML. Format your content using the editor on the left side, and you’ll see your HTML appear on the right side. Before you copy it over, press the “Compress HTML” button at the bottom of the HTML window.
5. Finalize your story
Now that you’ve got the story content finished, it’s time to add some finishing touches and edit your content. First, go to the Story tab in your spreadsheet.
Ignore Column A, ScrollType.
Fill out Columns B and C, Title and Subtitle.
Column D, EndText, is what appears at the end of your scrolly story.
Column E, TextHorizontalPercentage, lets you change how wide the text box is compared to the media box in your story. By default, it’s set to 33%, or 1/3 of the width of your screen. If you’ve got a lot of text-heavy steps, you might want to increase that to give yourself a little more room. I recommend staying under 50%.
In Column F, Authors, put the author name(s).
Finally, go to your story’s link and read through it carefully.
Proofread for any errors in your text.
Make sure all your sources are cited.
Take a close look at your media items: Are they displaying properly? Do they make sense? Are they high enough resolution?
Following our discussion of emplaced storytelling, today we’re creating a biography of place. This is an opportunity for you to think about the places and communities that you’re connected to and how they’ve shaped you. We’ll be using StoryMapJS.
StoryMapJS is an easy-to-use tool for digital storytelling using spatial data. Through a simple web interface, users can create storytelling exhibits that move their audience through a series of points on the map, each including media, captions, and extended narrative. The resulting map can be embedded on almost any website.
How does it work?
For the audience, StoryMapJS is a bit like a PowerPoint, in that you click through slides, which might have a variety of content on them. That content is layered over a map, and as you move through the slides, you also move visually through space.
For the creator, the experience is likewise very simple. You enter the editor with a google account, and you’re presented with a very intuitive editing interface. As you add each slide in the order they’ll appear, you have the opportunity to add a headline, body text, an image, image credit, and a caption. You can also customize the appearance. There are a variety of built-in base maps to choose from.
The assignment
An important note: Your stories are your own, and some might be more personal than you want to share here. You’re not required to include anything you’re uncomfortable sharing. There are any number of frames you can employ here – experiences that set you on your current major or career path, favorite spots to walk, even places you imagine visiting. You’re welcome to employ whatever frame you like and to think creatively about it.
Come up with a list of 5 to 10 places that have been particularly influential for you. These can be any size – a city, a neighborhood, a park bench, or a room in your house. And they can be in anywhere – places you’ve lived, visited, where you are now at SIUE.
Write a couple of sentences describing the place and your relationship to it. What does someone who’s never been there need to know to understand this place’s importance?
Pick a picture that represents a feeling or a memory about each place and write a caption that explains the significance of the picture for someone who’s never been there. If you don’t own the picture, make sure you figure out who to credit as well.
Head over to StoryMapJS and click the green “Make a StoryMap” button. It’ll prompt you to log in with a Google account. When it gives you your list of StoryMaps (probably empty), hit New to begin.
Create your title slide. The first slide is your title slide, so it won’t have a location. Give it a headline and a brief description. You can also include an image here if you’d like
Add a new slide using the + button on the left of the page. Use the search bar on the map to find the right location. You can drag the pin if you want to be more precise. Add your text and image here as well, and then repeat for the rest of your locations.
Hit save (top menu).
Once you’ve saved, go to Share in the top right. Scroll down until you see the embed code. It’ll start with <iframe … Copy the whole embed code and create a new blog post on the course website. Add a custom HTML block, and paste the embed code in.
Publish your post with the tag “Storymap” and you’re good to go!
Spatial analysis is a method that uses mapping and geographic information systems (GIS) to analyze the relationships between people, places, and resources. Those relationships dictate what kind of access people have to things like grocery stores, banks, employment opportunities, green spaces, and more. Spatial analysis is a great tool for exploring concepts of spatial justice. In this lab, we’ll explore the spatial relationship between SIUE and the town of Edwardsville.
There are lots of tools we can use for spatial analysis. The most common one is ArcGIS, which is a proprietary (that is a paid) platform. We’ll be using a free tool. Those are sometimes less versatile (although you can do an awful lot with them!), but they also allow us to keep our data and our analysis regardless of whether we have access to a particular platform, and they’re often easier to use because they’re not as complex.
Navigate to Edwardsville. Using the push pin button, drop a pin onto the university and label it.
Use the search bar to search for a particular kind of amenity – for instance, restaurants, grocery stores, or parks.
Use the + button to add the results to your map.
Make some observations: what does the distribution of those pins look like? Where are they clustered? Are they in proximity to the university? Are they distributed evenly throughout the area? Are they all grouped in one spot?
Make sure you share your map with all group members before the end of class!
Thinking About Access
Pick the closest pin to the university and grab its name or coordinates. Head over to Google Maps (the regular kind) and get the directions from the university to that place.
Look at a few modes of transportation. How long would it take to drive there? Bike there? Take public transit there?
What would it cost to get there? Think about gas, parking, transit fares, exertion, and other costs that might crop up.
Now go back to your original map and look through the pins you added. Which one would you most like to go to? That is, which one would best serve your needs?
Do the same thing for that location, mapping out directions and analyzing costs.
Reflecting on Resources
Due as a blog post, 4/1/26
What are the implications of your analysis? Is this an example of good access to resources, or are there challenges here? Is this an issue of spatial injustice?
Reflect a little on your spatial analysis lab. What observations did you make? Have the things you noticed impacted how you experience SIUE and/or Edwardsville? How do you think they might impact others’ experiences, whether they’re students, faculty/staff, or community members? What do you think has caused the patterns you identified? If there’s an element of spatial injustice in what you observed, how might it be addressed?
Cultural Asset Mapping with Leaflet
Today, we’ll carry on talking about spatial justice, looking more broadly at the St. Louis metro. To begin with, we’ll start by building a data set. Each individual should add two locations to this spreadsheet that you find culturally significant.
Although we think of data viz as a fundamentally digital process, it has its roots in hands-on, physical media. There’s a lot of creativity that goes into data viz, and physical media give us lots of outlets to pursue that creative ethos! But there are other, scholarly reasons to play with hands-on data too. Having to craft each data point by hand humanizes the data. It forces us to reckon with the data both individually and in the aggregate. And it gives us a new set of possibilities and constraints in how we visualize, which can help to surface new patterns.
For this lab, we’ll do two different activities, which will take place in class over a few sessions.
March 23: Evaluating Creative Data Viz
In groups, review an existing physical data visualization project. Obviously, there are limitations to this, because we’re encountering these physical projects virtually. But try to imagine the experience of encountering this object in person – by touch and feel, by sight, by sound, by smell.
Between Monday and Wednesday, choose something to track. This could be something that your device already tracks for you, like screen time or steps. It could be something that you keep track of over the next few days (a la the Dear Data project). Or it could be something external to you that you find/collect the stats for, like temperatures or air quality. Bring at least 5 data points (but more is fine!).
March 25: Creative Data Visualization
On Wednesday, I’ll bring craft materials to class, and we’ll work on creatively, physically visualizing your data points. We’ll conclude by documenting and reflecting on your visualizations.
Palladio is a tool for visualizing and exploring data through maps, network charts, and categories. We’re going to begin by creating our own data set of immigration and migration data using the 1900 Census.
Working in a group, choose a census from this folder and add at least three lines apiece to the spreadsheet. (If you get stuck on handwriting, let me know and we can look at it together.
Together, we’ll put the data into Palladio and see what patterns emerge.
Sometimes we think of data as something that just exists, that we discover or access. But data sets are shaped by the people who create them, who structure them, and who use them. In order to produce visualizations and analysis that are accurate, critical, and transparent about data sources and bias, we have to evaluate our data sets.
Choose a data set from the list below and answer the following questions in about 300-400 words total. The first four questions are about the sources of the data. You can answer these relatively briefly. If you can’t find the answers to any of them, note that in your review. The last questions are about how we can or should use it, challenges with the data, and any perceptible biases in it. These will take more reflection and should accordingly make up the bulk of your review. Submit the review as a blog post on the class website by Wednesday, March 18 at 1:30, with the tag “Data review.”
Data set profile:
Who is credited as the creator and/or contributors of this data set? Who are they?
What are the sources of their data?
Why did they create or compile it?
How has it been used?
What format is the data set in?
Data set evaluation:
Take a look at the data itself. How have they structured it? What fields have they chosen? What effect might that have on how it can be used?
Read the creators’ description of the data set. Have they described the choices they made in cleaning the data, and if so, how? What effect might those choices have on the data?
Consider the creators’ identities and goals in creating the data set. How might those things have shaped the data, either intentionally or inadvertently?
Voyant is a tool for distant reading. It helps us identify patterns within a text or set of texts (corpus). Today, we’ll use it to take a birds-eye view of how people view communities in the region. Remember that as a quantitative method, distant reading generally asks us to formulate a hypothesis about what we might find when we analyze our texts. So what similarities and differences might you expect about the texts you’ve chosen? You can compare across geography (St. Louis vs. Edwardsville, for instance) or across chronology (St. Louis in 1860 vs. St. Louis today) or some combination thereof.
Choose at least two texts to compare. You can choose from encyclopedia entries in this Google Drive folder, and/or you can use Wikipedia articles (current or older versions). The texts you choose should be about one or more locations in the St. Louis region.
Skim at least one of them and develop a hypothesis about what you might find when you compare your texts.
Input the two texts as a corpus and choose a visualization with which to test your hypothesis.
Write a blog post describing your texts, question, hypothesis, and results.
In the Google doc containing Frederick Douglass’s speech on the Dred Scott decision, leave at least two to three annotations on the text. These can be anything that you think would make the text easier and more enjoyable to read: explanations of historical references, definitions of unfamiliar words, context that helps explain Douglass’s meaning, and more.
Although we often think of corrections to a text when we imagine editing, literary editions serve lots of functions (and very rarely is correction one of them!). Literary editions layer different kinds of information about a text through annotations, including background on the period or place, context from the author’s life and other works, and variants across different editions of the text. In this way, they help to make the text more approachable and help the reader engage with the text more deeply.
In a printed edition, you’ll often encounter these annotations as footnotes. In digital form, they come in lots of shapes and sizes: links to other pages, pop-ups, and digital footnotes that link back and forth between text and annotation.
Today, we’re using the Recovery Hub Digital Edition Template to annotate Frederick Douglass’s speech on the Dred Scott decision. You read this speech last week and made note of areas where further clarification and background might help people understand the text better. Today, we’ll put that into action.
The Recovery Hub’s template is designed to make the process of creating a digital edition simpler. Although there’s lots of code involved, you don’t have to write it! Instead, you can use their existing code and lightly customize it to suit your text. Today, you don’t have to interact with the code at all! But if you’re interested — maybe you want to try your hand at digitizing your family’s recipes, like we talked about last week? — you can find the template on GitHub.
I’ve set up the project for us by creating a repository for our code and cloning the template. Here are your tasks:
Head over to this Google doc, which contains the speech. Leave a comment on the section of text you’d like to annotate with your proposed annotation and your name. This could be a single word, a phrase, or a sentence. You should add at least three annotations.
We’ll discuss the annotations together and see what themes emerge.
Once you’ve got a sense of the kinds of annotations people have proposed, go back and fill out your annotation. Here are a few points to touch on:
Why this annotation? What about the text you selected seemed like it needed further engagement?