Layout

It is possible to set a range of visual options of the Storygram.

Continuous

Whether all actors should be visible from the beginning to the end of the Storygram.

continuous: boolean;

Default value: false

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 2, actors: ['e', 'b'] },
    { event: 10, actors: ['d', 'b', 'e'] },
    { event: 12, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    continuous: true,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 2, actors: ['e', 'b'] },
    { event: 10, actors: ['d', 'b', 'e'] },
    { event: 12, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    continuous: true,
  }}
></StorygramGUI>

Compact

Whether the Storygram is compacted around the central x-axis or not. This is useful in case the groups are of a similar size over time, like governments, soccer teams etc.

compact: boolean;

Default value: false

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

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

Actor color

Callback that returns a string or a number indicating a color category. Note: it is not possible to assign directly a color to an actor, it will get a color of the selected color scheme.

actorColor: (event: Event, actor: Actor) => string | number;

Default value: (event, actor) => actor.actorID

<StorygramGUI
  data={[
    { actor: 'a', end: 1, team: 'one' },
    { actor: 'b', end: 2, team: 'two' },
    { actor: 'c', start: 0, team: 'two' },
    { actor: 'd', start: 2, end: 3, team: 'one' },
    { actor: 'e', start: 1, end: 2, team: 'one' },
  ]}
  config={{
    dataFormat: 'ranges',
    actorField: 'actor',
    startField: 'start',
    endField: 'end',
    actorColor: (event, actor) => actor.data.team,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { actor: 'a', end: 1, team: 'one' },
    { actor: 'b', end: 2, team: 'two' },
    { actor: 'c', start: 0, team: 'two' },
    { actor: 'd', start: 2, end: 3, team: 'one' },
    { actor: 'e', start: 1, end: 2, team: 'one' },
  ]}
  config={{
    dataFormat: 'ranges',
    actorField: 'actor',
    startField: 'start',
    endField: 'end',
    actorColor: (event, actor) => actor.data.team,
  }}
></StorygramGUI>

Highlight

Array containing the actors that are highlighted.

highlight: string[];

Default value: []

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

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

Event description

Callback that returns a string describing the selected event. Note that based on the length of the descriptions you might have to adjust also the right margin.

eventDescription: (arg: Event) => string;

Default value: event => String(event.eventValue)

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'], description: 'First event' },
    { event: 1, actors: ['d', 'b', 'e'], description: 'Parallel event' },
    { event: 2, actors: ['d', 'a'], description: 'Second event' },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    eventDescription: event =>
      event.data.event + '. ' + event.data.description,
    marginRight: 150,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'], description: 'First event' },
    { event: 1, actors: ['d', 'b', 'e'], description: 'Parallel event' },
    { event: 2, actors: ['d', 'a'], description: 'Second event' },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    eventDescription: event =>
      event.data.event + '. ' + event.data.description,
    marginRight: 150,
  }}
></StorygramGUI>

Url

Every actor in every event can have a custom URL. This is done by creating a callback that has as parameters the current actor and event, and returns a URL string.

url: (event: Event, actor: Actor) => string;

Default value: (event, actor) => 'https://www.google.ch/search?q=' + String(event.eventValue) + ' ' + actor.actorID

<StorygramGUI
  data={[
    {
      event: 2002,
      actors: ['USA', 'Germany', 'Japan'],
      description: 'Olympic Games',
    },
    {
      event: 2006,
      actors: ['Greece', 'Senegal', 'Nicaragua'],
      description: 'FIFA Cup',
    },
    {
      event: 2004,
      actors: ['Greece', 'Germany'],
      description: 'UEFA Cup',
    },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    url: (event, actor) =>
      'https://www.google.ch/search?q=' +
      String(event.eventValue) +
      ' ' +
      event.data.description +
      ' ' +
      actor.actorID,
    marginRight: 100,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    {
      event: 2002,
      actors: ['USA', 'Germany', 'Japan'],
      description: 'Olympic Games',
    },
    {
      event: 2006,
      actors: ['Greece', 'Senegal', 'Nicaragua'],
      description: 'FIFA Cup',
    },
    {
      event: 2004,
      actors: ['Greece', 'Germany'],
      description: 'UEFA Cup',
    },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    url: (event, actor) =>
      'https://www.google.ch/search?q=' +
      String(event.eventValue) +
      ' ' +
      event.data.description +
      ' ' +
      actor.actorID,
    marginRight: 100,
  }}
></StorygramGUI>

Every event can have a custom URL. This is done by creating a callback that has as parameter the current event, and returns a URL string. The event URL is accessed by clicking on the event description on the top.

eventUrl: (event: Event) => string;

Default value: (event) => 'https://www.google.ch/search?q=' + String(event.eventValue)

<StorygramGUI
  data={[
    {
      event: 2002,
      actors: ['USA', 'Germany', 'Japan'],
      description: 'Olympic Games',
    },
    {
      event: 2006,
      actors: ['Greece', 'Senegal', 'Nicaragua'],
      description: 'FIFA Cup',
    },
    {
      event: 2004,
      actors: ['Greece', 'Germany'],
      description: 'UEFA Cup',
    },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    eventUrl: event =>
      'https://www.google.ch/search?q=' +
      event.data.description +
      String(event.eventValue),
    marginRight: 100,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    {
      event: 2002,
      actors: ['USA', 'Germany', 'Japan'],
      description: 'Olympic Games',
    },
    {
      event: 2006,
      actors: ['Greece', 'Senegal', 'Nicaragua'],
      description: 'FIFA Cup',
    },
    {
      event: 2004,
      actors: ['Greece', 'Germany'],
      description: 'UEFA Cup',
    },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    eventUrl: event =>
      'https://www.google.ch/search?q=' +
      event.data.description +
      String(event.eventValue),
    marginRight: 100,
  }}
></StorygramGUI>

Event value scaling

Event value scaling factor (0.0 doesn't scale, 1.0 completely scales).

eventValueScaling: number;

Default value: 0.9

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 2, actors: ['e', 'b'] },
    { event: 10, actors: ['d', 'b', 'e'] },
    { event: 12, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    eventValueScaling: 0.9,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 2, actors: ['e', 'b'] },
    { event: 10, actors: ['d', 'b', 'e'] },
    { event: 12, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    eventValueScaling: 0.9,
  }}
></StorygramGUI>

Actor padding

Padding between the actors.

actorPadding: number;

Default value: 30

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

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

Event padding

Padding between the events.

eventPadding: number;

Default value: 40

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

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

Line size

Line size of the actors and groups.

lineSize: number;

Default value: 9

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

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

Color scheme

Name of the used d3 color scheme.

colorScheme:
  | 'schemeCategory10' | 'schemeAccent' | 'schemeDark2' | 'schemePaired' | 'schemePastel1' | 'schemePastel2' | 'schemeSet1' | 'schemeSet2' | 'schemeSet3';

Default value: 'schemeAccent'

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

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

Title of the tooltip displaying the hidden actors.

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterGroupAmt: [2, undefined],
    hiddenActorsTooltipTitle: 'Hidden letters',
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterGroupAmt: [2, undefined],
    hiddenActorsTooltipTitle: 'Hidden letters',
  }}
></StorygramGUI>

Url opens new tab

Boolean that indicates if a new tab should be opened by clicking on the Storygram.

urlOpensNewTab: boolean

Default value: true

<StorygramGUI
  data={[
    {
      event: 2002,
      actors: ['USA', 'Germany', 'Japan'],
      description: 'Olympic Games',
    },
    {
      event: 2006,
      actors: ['Greece', 'Senegal', 'Nicaragua'],
      description: 'FIFA Cup',
    },
    {
      event: 2004,
      actors: ['Greece', 'Germany'],
      description: 'UEFA Cup',
    },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    url: (event, actor) =>
      'https://www.google.ch/search?q=' +
      String(event.eventValue) +
      ' ' +
      event.data.description +
      ' ' +
      actor.actorID,
    marginRight: 100,
    urlOpensNewTab: true,
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    {
      event: 2002,
      actors: ['USA', 'Germany', 'Japan'],
      description: 'Olympic Games',
    },
    {
      event: 2006,
      actors: ['Greece', 'Senegal', 'Nicaragua'],
      description: 'FIFA Cup',
    },
    {
      event: 2004,
      actors: ['Greece', 'Germany'],
      description: 'UEFA Cup',
    },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    url: (event, actor) =>
      'https://www.google.ch/search?q=' +
      String(event.eventValue) +
      ' ' +
      event.data.description +
      ' ' +
      actor.actorID,
    marginRight: 100,
    urlOpensNewTab: true,
  }}
></StorygramGUI>

Top/Bottom/Left/Right Margin

Margins around the storygram. In the example below the Bottom and the Right margin is expanded to show the entire text.

marginTop: number
marginBottom: number
marginLeft: number
marginRight: number

Default value: 50

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

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

Layout

Continuous

Compact

Actor color

Highlight

Event description

Url

Event Url

Event value scaling

Actor padding

Event padding

Line size

Color scheme

Hidden Actors Tooltip Title

Url opens new tab

Top/Bottom/Left/Right Margin

Layout

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Continuous

Continuous