Importing Data

The Storygram accepts three different data structures as input.

Array

Data in the array structure consists of an array of objects, each of which contains a number or a datestring in which a event occurs and a array containing the involved actors. Datestrings have to be parseable the Dat.parse function, more information can be found here.

Below, a basic sample of this data structure is shown.

data=[
    {event: 1, actors: ['a', 'b', 'c']},
    {event: 2, actors: ['d', 'b', 'e']},
    {event: 3, actors: ['d', 'a']}
  ]

Every field of the object gets fed in the 'data' attribute of its event. This allows e.g. custom filtering.

This data can be fed into the StorygramGUI component in the data props. Then, specify in the config props object that the dataFormat is of type array and the key of the eventField and the actorArray.

config={
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
  }

Below is an interactive example of the resulting Storygram. Note that the data and config objects have enclosing curly braces because they are embedded into a React component.

<StorygramGUI
  data={[
    { event: 1, actors: ['a', 'b', 'c'] },
    { event: 2, actors: ['d', 'b', 'e'] },
    { event: 3, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
  }}
></StorygramGUI>

Table

Data in the table structure consists of an array of objects, each of which contains a number or a datestring in which a event occurs and different fields containing the involved actors. Datestrings have to be parseable the Dat.parse function, more information can be found here.

Below, a basic sample of this data structure is shown.

data=[
    {event: 1, actor1: 'a', actor2: 'b', actor3: 'c'},
    {event: 2, actor1: 'd', actor2: 'b', actor3: 'e'},
    {event: 3, actor1: 'd', actor2: 'a'}
  ]

Every field of the object gets fed in the 'data' attribute of its event. This allows e.g. custom filtering.

This data can be fed into the StorygramGUI component in the data props. Then, specify in the config props object that the dataFormat is of type array and the key of the eventField and the keys of the actorFields.

config={
    dataFormat: 'table',
    eventField: 'event',
    actorFields: ['actor1', 'actor2', 'actor3'],
  }

<StorygramGUI
  data={[
    { event: 1, actor1: 'a', actor2: 'b', actor3: 'c' },
    { event: 2, actor1: 'd', actor2: 'b', actor3: 'e' },
    { event: 3, actor1: 'd', actor2: 'a' },
  ]}
  config={{
    dataFormat: 'table',
    eventField: 'event',
    actorFields: ['actor1', 'actor2', 'actor3'],
  }}
></StorygramGUI>

Range

Data in the range structure consists of an array of objects, each of which contain information of an actor and two fields indicating a start and an end moment in number or datestring format. Datestrings have to be parseable the Dat.parse function, more information can be found here.

An actor can have multiple ranges. Below, a basic sample of this data structure is shown.

data=[
    {actor: 'a', end: 1},
    {actor: 'a', start: 3},
    {actor: 'b', end: 2},
    {actor: 'c', end: 1},
    {actor: 'd', start: 2, end: 3},
    {actor: 'e', start: 2, end: 2},
  ]

If the startField is null or undefined, it means that the actor is grouped from the first group on. If the endField is null or undefined, it means that the actor is grouped until the last group.

Every field of the object gets fed in the 'data' attribute of its actor. This allows e.g. custom filtering.

This data can be fed into the StorygramGUI component in the data props. Then, specify in the config props object that the dataFormat is of type range, the key of the actorField, the fromField and the toField.

config={
    dataFormat: 'ranges',
    actorField: 'actor',
    startField: 'start',
    endField: 'end'
  }

<StorygramGUI
  data={[
    { actor: 'a', end: 1 },
    { actor: 'a', start: 3 },
    { actor: 'b', end: 2 },
    { actor: 'c', end: 1 },
    { actor: 'd', start: 2, end: 3 },
    { actor: 'e', start: 2, end: 2 },
  ]}
  config={{
    dataFormat: 'ranges',
    actorField: 'actor',
    startField: 'start',
    endField: 'end',
  }}
></StorygramGUI>

Datestrings

When working with datestrings as eventvalues, simply put them in the event field as shown below. Note: the right and bottom margin is extended to show the full date.

data=[
    {event: '1/4/2019', actors: ['a', 'b', 'c']},
    {event: '2/4/2019', actors: ['d', 'b', 'e']},
    {event: '3/4/2019', actors: ['d', 'a']}
  ]

<StorygramGUI
  data={[
    { event: '1/4/2019', actors: ['a', 'b', 'c'] },
    { event: '2/4/2019', actors: ['d', 'b', 'e'] },
    { event: '3/4/2019', actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    marginRight: 80,
    marginBottom: 70,
  }}
></StorygramGUI>

Actor split callback

If the data is in array or table structure but every element still contains many actors separated for example by a comma, it is possible to further split those with a actor split callback that returns a string array.

data=[
    {event: 0, actors1: 'a,z', actors2: 'b,y', actors3: 'c'},
    {event: 1, actors1: 'd,x', actors2: 'b', actors3: 'e,y'},
    {event: 2, actors1: 'd,k,z', actors2: 'a,y,x'}
  ]

actorSplitFunction?: ((arg: string) => string[]) | undefined;

<StorygramGUI
  data={[
    { event: 0, actors1: 'a,z', actors2: 'b,y', actors3: 'c' },
    { event: 1, actors1: 'd,x', actors2: 'b', actors3: 'e,y' },
    { event: 2, actors1: 'd,k,z', actors2: 'a,y,x' },
  ]}
  config={{
    dataFormat: 'table',
    eventField: 'event',
    actorFields: ['actors1', 'actors2', 'actors3'],
    actorSplitFunction: input => input.split(','),
  }}
></StorygramGUI>