API Reference

Public APIs

We implement iStoryliner to enable users to generate storyline visualizations interactively, which are listed as follows:

Basic Usage

import iStoryline from "i-storyline-js"
let iStoryliner = new iStoryline();

// generate storyline visualizations from the story script
let storyScriptUrl = './data/xml/Redcap.xml';

// graph can be drawed using any canvas or svg libraries
let graph = await iStoryliner.load(storyScriptUrl);

// story can be saved as a document
let graph = iStoryliner.dump(fileName='newRedcap', fileType='json');

# iStoryliner.addCharacter(names, times)

Appends a new character to the story

let graph = iStoryliner.addCharacter(['Me'], [1, 10]);

// We can also remove the character
let graph = iStoryliner.removeCharacter(['Me']);

# iStoryliner.addSession(names, times)

Appends a new group to the story

let graph = iStoryliner.addSession(['Me', 'Red cap'], [1, 10]);

// We can also remove the group
let graph = iStoryliner.removeSession(['Me', 'Red cap'], [1, 10]);

# iStoryliner.addLocation(location, names, times)

Appends a new location to the story

let graph = iStoryliner.addLocation(['Grandma's House'], ['Red cap', 'Wolf'], [1, 10]);

// We can also remove the location
let graph = iStoryliner.removeLocation(['Grandma's House']);

# iStoryliner.sort(names, times)

Changes the order of lines

let graph = iStoryliner.sort(['Red cap', 'Mother'], [1, 10]);

# iStoryliner.bend(names, times)

Bends a line

let graph = iStoryliner.bend(['Mother'], [10]);

# iStoryliner.straighten(names, times)

Straightens a line

let graph = iStoryliner.straighten(['Red cap'], [1, 20]);

# iStoryliner.compress(names, times[, scale])

Compress white space

let graph = iStoryliner.compress(['Red cap', 'Wolf'], [1, 20], 0.5);  // scale < 1

# iStoryliner.expand(names, times[, scale])

Expand white space

let graph = iStoryliner.expand(['Red cap', 'Wolf'], [1, 20], 2);  // scale > 1

# iStoryliner.space(interSep, outerSep)

Changes the inner or outer space between line groups

let graph = iStoryliner.space(10, 20);

# iStoryliner.adjust(names, times, points)

Adjusts the path of a line

let graph = iStoryliner.adjust(['Red cap'], [1, 20], [[10, 200], [100, 200]]);

# iStoryliner.relate(names, times, style)

Connect lines to indicate the semantic relationships

let graph = iStoryliner.relate(['Red cap', 'Mother'], [1, 10], 'Twine' | 'Collide' | 'Merge');

# iStoryliner.stylish(names, times, style)

Set the sketch style of lines

let graph = iStoryliner.stylish(['Red cap'], [1, 20], 'Zigzag' | 'Wave' | 'Bump');

# iStoryliner.reshape(upperPath, lowerPath)

Changes the shape of layouts

let graph = iStoryliner.reshape([[10, 200], [100, 200]], [[10, 400], [100, 400]]);

# iStoryliner.scale(width, height[, reserveRatio])

Scales the size of layouts

let graph = iStoryliner.scale(500, 200);  // reserveRatio = false