Live Demo

What does this do?

This is a demo of storyline visualization applied to a subset of the VAST Challenge 2014 MC2 dataset, that uses our new design guidelines proposed in [1]. The visualization helps explain patterns of life by showing when two or more entities have the same state at the same time. Time is encoded on the x-axis and state is encoded on the y-axis.

You can click on days or employment groups to change the filter, which will only show storylines for the given entities. You can shift + click to add names to the filter without replacing the existing set of names. In the visualization, you can also click on an individual storyline to set the filter to that name, or a location to set the filter to all the names passing through that location.

Try adding a single name to the filter, then add all the weekdays or weekends to see how a person's behavior varies subtly. Be careful that you don't clear the filter with many days selected, this will cause the browser choke while trying to layout too many storylines.

Running the Demo

This demo is powered by nwb react-component. The development environment is started by running the following commands:

npm install
npm start

Using the Layout Library

Input

The input format is flexible (see below) but should at a minimum be an array of objects, where each object contains the following information:

• A unique identifier for each entity to be drawn as a storyline. In this example it's "name"
• The state of the entity. In this case it's "activity"
• A time window. In this example it's "hour"

Here's a snippet of the input data from our analysis of the VAST Challenge 2014 MC2 dataset.

[{"activity": "Home",
  "date": "2014-01-06 00:00:00",
  "hour": 21,
  "name": "Alcazar, Lucas"},
 {"activity": "GASTech",
  "date": "2014-01-06 00:00:00",
  "hour": 11,
  "name": "Alcazar, Lucas"},
 {"activity": "GASTech",
  "date": "2014-01-06 00:00:00",
  "hour": 10,
  "name": "Alcazar, Lucas"},
 {"activity": "Dining",
  "date": "2014-01-06 00:00:00",
  "hour": 12,
  "name": "Alcazar, Lucas"}]

Layout

To generate a storyline layout from this data, create a layout object and define the accessor functions as appropriate. In our case we create a unique storyline for each name x date pair.

import SvenLayout from './sven-layout';

const layout = SvenLayout()
  .time(d => d.hour)
  .id(d => String([d.name, d.date]))
  .group(d => d.activity);
  
const storylines = layout(data);

Rendering

To render the storyline, pass the object produced by the layout algorithm to the storyline component.

import StorylineChart from './StorylineChart';

<StorylineChart data={storylines}/>

References

1. Arendt, Dustin L. and Meg Pirrung. "The "y" of it matters, Even for Storyline Visualization." IEEE VAST 2017. IEEE, 2017.
2. Balint, J. Timothy, Dustin L. Arendt, and Leslie M. Blaha. "Storyline visualizations of eye tracking of movie viewing." Eye Tracking and Visualization (ETVIS), IEEE Second Workshop on. IEEE, 2016. (best paper)
3. Volkova, Svitlana, et al. "Contrasting public opinion dynamics and emotional response during crisis." International Conference on Social Informatics. Springer International Publishing, 2016.
4. Arendt, Dustin L., and Leslie M. Blaha. "SVEN: informative visual representation of complex dynamic structure." arXiv preprint arXiv:1412.6706 (2014).

How to Cite

If your academic research directly uses or is inspired by this work, please cite the following in your publications.

@inproceedings{arendt2017matters,
  title={The “y” of it Matters, Even for Storyline Visualization},
  author={Arendt, Dustin and Pirrung, Meg},
  booktitle={2017 IEEE Conference on Visual Analytics Science and Technology (VAST)},
  pages={81--91},
  year={2017},
  organization={IEEE}
}