Storygram Docs
0. InstallationUsage with TypescriptUsage with node.js without TypescriptEmbedding in HTML page1. Getting Started2. Importing Data3. Filtering4. Layout5. Advanced settings6. Data structure7. FAQ

Installation

Welcome to the Storygram Documentation!

Usage with Typescript

Import the Storygram module and the Config type.

import { Storygram, Config } from 'storygram'

Then define your data:

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

Define your configuration:

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

Then create a Storygram object with your data and configuration:

let storyGram = new Storygram(data, config)

Finally, draw your Storygram:

storyGram.draw();

The complete code looks like this:

import { Storygram, Config } from 'storygram'


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


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


let storyGram = new Storygram(data, config)
storyGram.draw();

Usage with node.js without Typescript

To do the same with node.js without Typescript type:

var Storygram = require('storygram');


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


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


var storyGram = new Storygram(data, config)
storyGram.draw();

Embedding in HTML page

To embed the Storygram in a html page type:

(...)
  <body>
    <h1>My first Storygram!</h1>


    <script src="https://unpkg.com/storygram/dist/storygram.min.js"></script>
    <script>
      const data = [
        { event: 1, actors: ['a', 'b', 'c'] },
        { event: 2, actors: ['d', 'b', 'e'] },
        { event: 3, actors: ['d', 'a'] },
      ];
      const config = {
        dataFormat: 'array',
        eventField: 'event',
        actorArrayField: 'actors',
      };
      let storyGram = new Storygram.Storygram(data, config);
      storyGram.draw();
    </script>
  </body>
(...)

It will append a 'svg' for the storyGram and a 'div' for the tooltip.