Page 5 of 17

Lab 13: Scrollytelling with the Scrolly Story Generator

April 8, 2026 / Margaret Smith

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?

Technical Details

Spreadsheet

Story

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.

A screenshot of Google Maps, displaying the menu that pops up when you right click on the location, with coordinates at the top

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.

A screenshot of the interface for accessing the embed code in Youtube

A screenshot of the interface for accessing the embed code in Youtube, with the URL portion of the embed code highlighted

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:
You might want to format your text. Some handy formatting tags include bold, italics, and underline.
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.

A screenshot of the HTML editor with the icon for 'Compress HTML' in the lower right outlined in a red box

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?

How Did They Make That? – Trace Trettenero

April 7, 2026 / ttrette

-Saint Louis Patina-

St. Louis Patina is a blog-style digital project created by Chris Naffziger that focuses on documenting the architecture and history of St. Louis. One of the websites key features is an interactive “city map” that allowed me to explore different neighborhoods and their architectural characteristics. The goal of the project is to highlight the beauty and historical significance of local buildings and to help people understand how the city developed over time.The intended audience includes historians and also anyone interested in architecture or urban history. Because the site is easy to navigate and visually organized, it is accessible even to people who are not experts. The interactive map is especially effective because it presents information in a simple way, allowing me to explore the STL neighborhoods at my own pace. It also encourages engagement by allowing comments and discussion, which makes the project feel more interactive and community based.

One more strength of the project is how clearly it connects architecture to larger cultural influences. The author often relates St. Louis buildings to European architectural styles, which adds depth and context to the areas he talks about This helps users understand that local structures are part of a broader historical story. Additionally, the layout is clean and intuitive, making the site easy to use. However, there are also some weaknesses. Some parts of the map lack detailed descriptions, which can make it harder for users to fully understand certain locations. There are also technical issues, such as accessibility errors and overuse of tags, which can make navigation feel cluttered and overwhelming. These issues suggest that while the project is strong conceptually, it could benefit from further refinement.

The St. Louis Patina website enhances the understanding of the local region by combining visual tools with historical facts and blog posts. It provides new insights into familiar places while also adding nuance to what I already know about St. Louis, even though that may be much less than people who live nearer to the area.

Tyler Phillips Story Map

April 6, 2026 / typhill

story map

April 6, 2026 / lilebea

How Did They Make That

April 6, 2026 / matthev

Matthew Evans

Margaret Smith

DHSS-HUM-230

6 April 2026

Bulldozing a Path – North Saint Louis and the NGA

This is a documentary that examines the construction of the National Geospatial Intelligence Agency (NGA) campus in North St. Louis and its impact on the local community. This was created by independent filmmakers and researchers, the project combines historical research, archival materials, and oral history interviews to explore how urban development projects can displace residents, erase community history, and reshape neighborhoods.

The primary goal of the project is to document the experiences of residents affected by displacement in North St. Louis. By highlighting both the social and cultural consequences of such projects, the documentary asks critical questions about who truly benefits from development and what is lost when neighborhoods are demolished. It emphasizes the tension between economic goals and the well-being of long-standing communities.

The intended audience includes scholars and students of urban history, race and inequality, and geography, as well as St. Louis residents and members of the general public, urban planning, and community preservation. Through a combination of interviews with residents, archival research, the filmmakers are able to provide a layered perspective that connects the historical sense of communities with the present-day effects of large-scale development.

The project concludes that, while the NGA campus has been promoted as revitalization, it exemplifies a recurring pattern of displacement in North St. Louis. Neighborhoods, particularly those historically populated by Black residents, are cleared, and cultural memory is often lost along with the physical homes. Despite this, the documentary highlights the resilience and resistance of affected communities, showing that even in the face of displacement, local identities persist.

Strengths of the documentary include its use of firsthand accounts and archival materials, which lend authenticity and historical depth, as well as its ability to situate one development project within a larger pattern of urban transformation. Weaknesses include limited discussion of potential economic benefits and a relatively short format that constrains the depth of its history.

Overall, Bulldozing a Path enhances understanding of North St. Louis by adding historical context to display urban development, emphasizing both the promises of investment and the human and cultural costs of redevelopment. The project provides knowledge of the region, providing familiar narratives about revitalization and challenging viewers to consider the real impacts of large-scale development on communities.

Lab 12: Constructing a Biography of Place

April 6, 2026 / Margaret Smith

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!

AI Fiction Review

April 1, 2026 / twoldet

For the review, I read The Pedestrian by Ray Bradbury and The Nine Billion Names of God by Arthur C. Clarke. Even though both stories are different, they both talk about how technology affects people and how humans depend on it. They also show different ideas about what AI and machines might mean for the future.

In “The Pedestrian,” Bradbury shows a future where people spend most of their time inside watching screens. There are very few people outside, and the world feels empty. The main idea is that technology has changed how people live and made them less social. The police car in the story acts like a machine that controls people, even without human emotions. This shows that when machines take over rules and decisions, people can lose freedom and individuality. The story gives a warning about how too much technology can disconnect humans from real life.

In “The Nine Billion Names of God,” Clarke shows a different view of technology. Here, monks use a computer to help them finish a religious goal. The machine is not shown as dangerous, but as helpful. It supports human belief and helps them do something they could not do alone. However, the ending suggests that technology might be more powerful than people expect, and it raises questions about what could happen when humans use machines for big spiritual or meaningful tasks.

Both stories show AI and technology as very powerful, but in different ways. In Bradbury’s story, technology controls people and makes life feel empty. In Clarke’s story, technology helps people but also creates mystery about what it can really do. These ideas connect to today’s world because we also depend a lot on technology like phones, social media, and AI tools. Sometimes it helps us, but sometimes it also distracts us or changes how we think.

Overall, both stories show that technology itself is not good or bad. It depends on how people use it and how much they rely on it. The main message is that humans should be careful and aware of how technology affects their lives.

AI Fiction Review

April 1, 2026 / ymohame

Choosing Annalee Newitz’s “When Robot and Crow Saved East St. Louis” and Arthur C. Clarke’s “The Nine Billion Names of God” highlights a weird truth: we usually treat AI as either a helpful neighbor or a terrifying god. There’s rarely a middle ground. In Newitz’s story, the AI (Robot) isn’t some cold, calculating brain in a box. It’s more like a humble social worker.

The author assumes that the world is messy and broken, but that technology can be a bridge. By having the Robot “talk” to crows to stop a plague, Newitz argues that AI shouldn’t just be about “data”—it should be about connection.

The ethical weight here is placed on community. The AI is only “good” because it helps humans and animals survive together. On the flip side, Clarke’s story treats AI like a spiritual shortcut.

The monks use a computer to list all the names of God, assuming that once the “data entry” of the universe is finished, the world can end. The AI here has zero personality; it’s just a high-speed calculator for the divine. It suggests that humans are impatient and that technology is the ultimate tool for skipping the hard work of existence.

How this fits today: Newitz’s Robot feels like the AI we want: something that helps us solve real-world problems like sickness or climate change by listening to things we ignore. Clarke’s Computer feels like the AI we have: a machine that can crunch numbers and generate results at a speed that feels almost supernatural, but doesn’t actually understand the “why” behind the task.

The creators of these stories make a big argument: technology isn’t just about the hardware. It’s about what we ask it to do. If we ask it to help us survive, it becomes a partner. If we ask it to solve the “meaning of life” through pure math, we might not like the answer it gives us

Spatial Analysis Reflection: SIUE and Edwardsville

April 1, 2026 / ikoupep

For this lab, I used Google My Maps to explore the area around Southern Illinois University Edwardsville and analyze how different resources are distributed. I focused on restaurants as my main example. When I added pins, I noticed that most of the restaurants were clustered along major roads and commercial areas, especially closer to the center of Edwardsville. Around campus itself, there were fewer options within walking distance, which shows that resources are not evenly spread out.

The closest location I found was a fast-food restaurant just a few minutes away by car. Driving there was quick and convenient, but biking would take longer and require more effort. Public transportation options were limited, which could make it harder for students without cars to access these places. When I looked at a location I personally preferred, like a higher-quality restaurant, it was even farther away. This increased the cost and time, especially if you don’t have a car. Gas, time, and effort all become factors, which shows how access can depend a lot on transportation.

From this analysis, I think SIUE has decent access to resources, but it is not equal for everyone. Students with cars have many more options, while those without cars may struggle more. This could be seen as a small example of spatial inequality because access depends on your situation, not just your location.

This lab changed how I see the area around campus. Before, I didn’t really think about how things are placed, but now I notice that businesses are grouped in certain areas for economic reasons, like being close to busy roads or where more people pass by. This impacts students, staff, and community members differently. For example, international students or students without transportation might feel more limited in their choices.

I think these patterns happen because businesses want to be in profitable locations, and cities are designed around cars. To improve this, there could be better public transportation, more bike-friendly routes, or even more services closer to campus. Overall, this lab helped me understand how geography affects daily life and access to resources in a real way.

Mapping and Spatial Analysis w/ Leaflet

April 1, 2026 / naortiz

For my location I choose the beauty store Sephora. A list of multiple stores was shown, with one at least in every city in the State. There are a variety of options to get there such as walking, the bus, driving, or cycling. The closest one to SIUE is only a 7 min car ride. Though I have been there and I can say that is not my favorite. My favorite one is in Chicago it is a bit of a ride coming to about 6 hours 58m on the train. Which is what I usually take to go home anyways. My observation is that the store here in Edwardsville is not that filled. It is a small store. The one in Chicago is about 3 times the size. It does impact my experience here sometimes because somethings I get at my Sephora back home, I cannot get them here. Though I know it does have to do with the population size as well, seeing as Chicago is a very big city, and Edwardsville is not.