!nflect _📊^💬

Modulating Visualizations to Tell Stories with Data

!nflect is a web-based framework implementing inflections as a method to bridge the gap between data exploration and storytelling. By linking to specific views and annotations in visualizations, authors can embed insights from their data analysis within the narrative flow.

• Open the scrollytelling version of this page
• Check out a sample story on visualization research
• Fork the repository to create your own data story

Inf... what?

An inflection is a subtle modulation of a visualization's graphical attributes—such as zoom levels, highlights, or annotations—that guide a reader's attention and anchor interpretative insights.

Inflections can be referenced directly in a story, so that scrolling through the text triggers transitions of the visualization state accordingly—thereby strengthening the interplay between data analysis and narrative structure.

As an exercise in inception, we highlighted the inflections visible in these Vega-Lite charts on the left.

Overview

The !nflect repository contains everything you need to host data stories with inflected visualizations on a static web server.

The two key components are:

• Markdown files containing the stories
• Vega-Lite specifications for visualizations

Folder structure

If you take a closer look, you see three folders:

• /img: Reference images and screenshots
• /src: Libraries and fonts — you can ignore this one
• /vis: Vega-Lite specs and datasets for each chart

/img and /vis house the images and visualizations included in your data story, and the interfaces with which to inflect them.

Story files

The Markdown files contain the source texts for the stories. They are stored at the root level of the framework's file structure. You are currently reading the content of README.md, which is the default file loaded when no other story file is specified.

You can open a specific story file by adding its filename without the extension .md into the URL's hash. For example, the story file visualizations.md is opened with this URL:

https://uclab.fh-potsdam.de/inflect/#visualizations

Getting started

It takes three steps to create a data story:

1. Create visualization 📊
2. Add inflections 💬
3. Write data story 📄

Typically, one iterates between them to refine the story flow, data visualizations, and inflections. 🔃

To follow along, make sure that you have made a copy of the !nflect repository and can access it via webserver.

1. Create visualization 📊

• Go to the Vega-Lite editor to create a basic chart
• Export the JSON spec (.json) and place it in /vis
• Copy your CSV/JSON dataset into /vis/data if needed

The framework currently supports Vega-Lite bar charts, scatterplots, line charts, and pie charts.

2. Add inflections 💬

• Open the inflection editor by navigating your browser to: /vis/#spec_file (without the extension .json)
• Interact with the chart to define your inflections, e.g., zoom or adjust scales, highlight elements, or add lines or labels
• All these changes are encoded in the URL hash. You can copy that link at any time and paste it into your Markdown story

The editor includes a reset button to remove all inflections. You can also use the browser's back button to undo any changes.

3. Write data story 📄

• Create Markdown file (e.g., my_story.md) in root directory
• Draft narrative and embed links to inflected visualizations:
  see [this view](vis/#spec_file?hash)
• Save and open your story in the browser with: /#my_story (without the extension .md)

As you scroll along the story text, the framework automatically modulates the visualizations in sync with the paragraphs.

The syntax follows Markdown with three notable tweaks:

1. Two blank lines start a new section
2. Regular HTML links bypass the inflection mechanism and are rendered as simple text links
3. Inflected images can be included as Markdown image elements with the alt attribute set to img:
   ![img](img/#parameters...)

All at once

This documentation image shows the main components and mechanisms at a glance.

It contains:

• further detail on the file structure

• the software architecture...

• a cheat sheet on how to create a data story

• the structure of the URL hash that encodes the inflections

Credits

!nflect was developed by Theresa Eingartner and Marian Dörk in collaboration with Johanna Drucker at the UCLAB of FH Potsdam.

The framework relies on the libraries D3.js, Vega & Vega-Lite, and Marked for their visualization, interaction, and parsing powers.

The story text is rendered in Atkinson Hyperlegible.

!nflect is freely available under an MIT license: provided 'as is', you can use it for whatever, and the creators assume no liability.