Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pnnl/sven
storyline visualization
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/pnnl/sven
- Owner: pnnl
- License: other
- Created: 2017-09-27T14:15:39.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-25T17:13:01.000Z (over 3 years ago)
- Last Synced: 2024-10-11T08:34:34.772Z (about 1 month ago)
- Topics: storyline, visualization
- Language: JavaScript
- Homepage: https://pnnl.github.io/sven/
- Size: 6.17 MB
- Stars: 16
- Watchers: 8
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# [Live Demo](https://pnnl.github.io/sven/)
# What does this do?
This is a demo of storyline visualization applied to a subset of the [VAST Challenge 2014 MC2 dataset](http://www.vacommunity.org/VAST+Challenge+2014%3A+Mini-Challenge+2), 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:
```js
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](http://www.vacommunity.org/VAST+Challenge+2014%3A+Mini-Challenge+2) dataset.
```json
[{"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.
```js
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.
```js
import StorylineChart from './StorylineChart';
```
# References
1. [Arendt, Dustin L. and Meg Pirrung. "The "y" of it matters, Even for Storyline Visualization." _IEEE VAST 2017_. IEEE, 2017.](https://ieeexplore.ieee.org/abstract/document/8585487)
1. [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)**](http://ieeexplore.ieee.org/abstract/document/7851163/)
1. [Volkova, Svitlana, et al. "Contrasting public opinion dynamics and emotional response during crisis." _International Conference on Social Informatics._ Springer International Publishing, 2016.](https://link.springer.com/chapter/10.1007/978-3-319-47880-7_19)
1. [Arendt, Dustin L., and Leslie M. Blaha. "SVEN: informative visual representation of complex dynamic structure." arXiv preprint arXiv:1412.6706 (2014).](https://arxiv.org/abs/1412.6706)
# 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}
}
```