Storygram Docs
0. Installation1. Getting Started2. Importing Data3. Filtering4. LayoutContinuousCompactActor colorHighlightEvent descriptionUrlEvent UrlEvent value scalingActor paddingEvent paddingLine sizeColor schemeHidden Actors Tooltip TitleUrl opens new tabTop/Bottom/Left/Right Margin5. Advanced settings6. Data structure7. FAQ


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


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

continuous: boolean;
Default value: false


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

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


Array containing the actors that are highlighted.

highlight: string[];
Default value: []

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)


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) => '' + String(event.eventValue) + ' ' + actor.actorID

Event Url

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) => '' + String(event.eventValue)

Event value scaling

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

eventValueScaling: number;
Default value: 0.9

Actor padding

Padding between the actors.

actorPadding: number;
Default value: 30

Event padding

Padding between the events.

eventPadding: number;
Default value: 40

Line size

Line size of the actors and groups.

lineSize: number;
Default value: 9

Color scheme

Name of the used d3 color scheme.

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

Hidden Actors Tooltip Title

Title of the tooltip displaying the hidden actors.

Url opens new tab

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

urlOpensNewTab: boolean
Default value: true

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