This tool helps you tell stories in your data
Are you making charts and graphs for your audience? This week's tool will help you add context to the data.
Hare: Hi, Ren! Happy first day it’s tolerable to live in Florida and venture outside. What are we talking about today?
LaForme: I’d love to talk about changing leaves and pumpkin spice lattes (not to mention decorative gourd season). Alas, that’s not what this feature is about.
Instead, I thought we could take a look at a new tool from perhaps my favorite toolmaker for journalists, Knight Lab at Northwestern University. They’re the makers of TimelineJS, StoryMapJS, SoundciteJS, JuxtaposeJS and a couple other great things. Have you tried any of those, Kristen?
Hare: I have! They’re super easy to use, which is saying something coming from me. (Disclosure: My job covering local news is funded by the Knight Foundation.)
LaForme: It’s a particularly great set of tools because they’re all mostly made by journalists, for journalists. They’re completely free and ridiculously easy to use.
And their new tool, StorylineJS, is no different. StorylineJS is a really simple tool to tell the story behind a dataset. If you think of a standard chart or graph, most of the time we’re relying on the reader to intuit a takeaway based on what they’re seeing. StorylineJS adds annotations to data so that you can actually provide context about what readers are seeing.
Hare: Oh that is cool. Is it kind of like Genius, the annotation tool, for visuals?
LaForme: A little bit, but for simple charts instead of words.
Hare: How do you see journalists using this?
LaForme: It’s great for any time you might need to show a simple line chart, but you want to make sure readers get the most out of it. It’d be great, for example, when talking about the economy or recessions. You could point at hills and valleys and explain what experts think caused those. You could look at electricity prices and explain causes for ebbs and flows in that.
The world is rich with data. But readers don’t necessarily want data. They want to understand what’s happening, and this tool makes that pretty easy.
Hare: Sorry if this is dumb, but I’m assuming you’re adding these to graphics you’ve made in house, right? Can you add them to graphics you’re embedding from other sources?
LaForme: This tool actually generates the graphic and the annotations. You start by making a very simple spreadsheet, just two columns with the data and two more for the annotations and their headlines, and then giving the StorylineJS tool access to that data. It generates the chart for you, which you can then embed on your website.
Hare: Got it. Will you show us how it works?
LaForme: Sure. I’ll make a really simple one right now to cover the topic we almost started with: the weather. It’s going to be a little silly, but that totally fits in with my ethos that learning should be fun.
Hare: It also fits with my ethos that it is now good to live in Florida again.
LaForme: Okay, here goes.
Hare: Oh cool! I expect to see my neighbors in furry boots and puffy vests as soon as it hits 65. (Not even kidding.) Anything special we should know about using this tool?
LaForme: Sure. You have to make your spreadsheet using Google Sheets, so it does require a little familiarity with that (though it’s really easy to learn). You’ll need to be able to embed an iframe on your site. If you’ve posted a YouTube video or something like that before, you should be fine.
Also, a few caveats. The Storylines have to be pretty simple, since Knight Lab doesn’t recommend adding more than seven or so annotations. And they have to be time-based datasets, as the x-axis has to always be a time.
This is maybe petty, but I also find myself wanting to click left and right arrows to look through the annotations like the other Knight Lab tools. This is new, so maybe they’ll add that?
Hare: I thought the same thing as I toggled through. Good call. Stay warm, friend! See you next week!
LaForme: Watch out for those neighbors!