Skip to content

Storyline helps you tell stories with data

How frequently in your teaching do you use simple data to help students understand an important concept or trend, or to create opportunities for students to incorporate data into their own critical thinking around a particular subject or topic? Chances are you use data of some kind fairly frequently, even in disciplines that aren’t known for being particularly data-heavy. (As an example, in literature courses I taught I would frequently talk to students about, say, trends in literacy rates during the period we were studying, or shifts in newspaper circulation and public library memberships. In other words, I would share data that helped contextualize what we were reading in contemporary social, cultural, and economic conditions.)

All too often, when we use data in classes we treat it as something that is fairly static: a printed handout, an image on a slide, or a graph we draw on the whiteboard. There’s nothing wrong with that, exactly, but I often find myself wanting to give students a better entry point into data — and, more importantly, to help students understand the story the data can help us tell. “Teaching with data” is a broad category that can mean many things, but I take as one of its fundamental components a desire to teach students how to think with data and to construct meaning from it. So I was very excited to see that the Knight Lab recently released a tool for creating simple annotated charts. It’s called Storyline, and while its features are minimal I think it has great teaching potential.

Storyline is a web-based tool, and it’s so easy to use that if you know how to make a spreadsheet you can certainly make a Storyline. At the moment, Storyline makes it possible to generate a time-series line chart (essentially, a chart that shows a data variable over time) with up to 800 data points.

Unlike a static chart, Storyline allows you to attach brief textual annotations to individual data points. Here’s what it looks like in action:

The annotations are displayed in sequential order beneath the chart. Interaction with the chart can take two forms: clicking an annotated data point (those shown as circles on the chart) or clicking an annotation bubble beneath the chart. Go ahead — give it a try in the example above. And then keep reading to find out how to create your own…

Storyline is kept simple as a matter of design. What you see here is essentially what you get. Its power as a tool for teaching and learning with data is in the story developed through annotations. The annotations might highlight, for instance, disparities between high and low points in the data you are displaying. Or they might provide historical context for specific data points, indicating (as in the example above) what external factors might contribute to changes seen in the chart.

The steps for creating a Storyline are straightforward and clearly documented.

  1. Use Google Sheets to create a spreadsheet that contains your time series data. One column should contain the dates or times, and another column should contain the data associated with those dates/times. Be sure each column has a heading. (You can call the columns anything you like.)
  2. Next, add two more columns to your spreadsheet. These will contain the title and content for any annotations you want to add to your chart. (Again, call these whatever you like.) For any row you want to explain, add the text and title information in the appropriate cells in these columns.
  3. Publish the spreadsheet by selecting “Publish to the web…” from the File menu in Google Sheets. When prompted in the dialog that opens, click “Publish” and then “OK”.
  4. Now copy the URL from your web browser’s location bar. (Note: Don’t copy the URL Google Sheets provides you in the Publish window. Instead, you’ll always want to select the full URL in your browser and then copy it using the Ctrl + C keyboard command (Windows) or by pressing Command + C (Mac).
  5. Finally, back on the Storyline instructions page paste the URL for your spreadsheet into the window labeled “Configure your Storyline”, then click the Load button. You’ll be prompted to provide some information about the columns in your spreadsheet. Once you’ve done so, click the Create Storyline button — and your Storyline will automatically appear!

Once you’ve created a Storyline, you can copy and then share the link with anyone. Each Storyline is published publicly, so there is no login or account required. Better still, if you’re using Canvas you can easily add your Storyline directly to any content page. Instead of copying the direct link for your Storyline, just copy the embed code that appears above it. Then, when editing your Canvas page, click the “HTML Editor” link that appears above the top right corner of the Canvas editor window. Paste the full embed code into the editor window, then save your changes.

Screenshot of the Canvas page editor, in HTML view, showing the Storyline embed code pasted into the content area.
Adding a Storyline to a page is as simple as copying the embed code, editing your the page using the HTML editor, and then pasting the embed code into the appropriate location on the page.

The result should be something like this:

As Storyline’s creators point out, decisions about contextualizing the chart are yours to make: “headlines, context, more specific on the data sources and credits–we expect you’ll include what you want outside of Storyline.” One good way to provide some of that extra context and information is to incorporate your Storyline into a larger lesson or narrative. For instance, rather than simply direct students to a page containing just the Storyline above, I would instead use the Storyline as one part of a longer textual explanation. Like so:

Screenshot of a Canvas page with embedded storyline and surrounding text helping to contextualize the data displayed.
Contextualizing your Storyline is always a good idea, and helps students understand the data and its implications in light of other things they know or are learning in the course.

Storyline is also a great tool for students to use, supporting a range of individual or group approaches to presenting and interpreting data. Here are a few of the possibilities:

  • Individual projects: Students are assigned, or choose for themselves, topics to explore with data. They locate a small data set that can be used to illustrate an important course concept, or that allows them to apply concepts learned previously. After creating their own annotated Storyline, they share the results with the class via discussion posts or in-class presentations.
  • Group projects: In small groups, students are assigned, or choose for themselves, topics that can productively be explored with data. As a group, they identify a data set and construct a simple story that can be told through Storyline annotations. Each group’s Storyline is shared with the rest of the class via a discussion post or in-class presentations.
  • Single shared project: A third possibility is to create a single Google Sheet that can be shared with — and edited by — all members of the course. Data might be selected by the instructor, with students assigned individual data points to annotate or explain. As each student contributes annotations to the shared spreadsheet, the whole class can observe and discuss the developing story.

That’s Storyline in a nutshell. Give it a try, and let me know in the comments if you find ways to use it in any of your classes. I’d love to update this post with real EvCC examples!

[9/21/2017 — Lightly edited to correct grammar and typography]