Getting Started

The Storygram allows you to explore and visualize sequential groupings in your data.

Make shure to give a look to our examples and the beta version of our interactive storygram explorer.

In the example below an excerpt of the career of Bass Player Marcus Miller is shown. Data courtesy from metason.net. Feel free to change the code below to familiarize with the Storygram's functionality. You'll be able to do so through the whole documentation.

<StorygramGUI
  data={MetasonData()}
  config={{
    dataFormat: 'array',
    eventField: 'release_year',
    actorArrayField: 'participants',
    filterGroupAmt: [3, undefined],
    filterGroupSize: [5, 15],
    filterEventValue: [1982, 1989],
    eventDescription: event =>
      event.data.release_title + ', ' + event.data.release_year,
    url: (event, actor) =>
      'https://music.metason.net/artistinfo?name=' + String(actor.actorID),
    eventUrl: event =>
      'https://www.google.ch/search?q=' +
      event.data.release_title +
      ' ' +
      event.eventValue,
    filterActorCustom: actor => actor.actorID !== 'Marcus Miller',
    marginRight: 300,
  }}
></StorygramGUI>

After playing around with the code you might have noticed two things:

The Storygram doesn't look always the same. This is due to the fact that it tries to optimize the clarity of the visualization by reducing edge crossings.

The size of the Storygram is set automatically based on the amount of actors and events to be visualized.

Bug Reports & Questions

The StoryGram is MIT-licensed and the source is available on github. If any questions or issues come up as you use the StoryGram, please get in touch via Git Issues.

Contributors

The StoryGram was invented and developed by Franz Flückiger and then integrated into the Bachelor Thesis in the ZHaW. Many thanks to the contributions of Stefan Guggisberg and Philipp Ackermann.