Data Workflow

We employ a linear workflow to generate the layouts of storyline visualizations.

Step 0 Input

The input story script would be translated into the Story object defined as following:

var story = {
    _characters: [], // the names of characters
    _locations: [],  // the names of locations
    _timeStamps: [], // the key timestamps when lines converge or diverge
    _positions: [],  // the geometry points of storylines
    _paths: [],      // the svg paths of positions
    _tableMap: [     // 2D tables that record algorithm results: each row represents one character and each column indicates a timespan
        'character': new Table(),  // the status of characters
        'location': new Table(),   // the ID of the locations
        'session': new Table(),    // the ID of the sessions
    ],
}

Step 1 Order

The story will be then processed by storyOrder generator that comprises of alternative sorting functions (e.g., GreedySort). The characters will be sorted in the y-axis to minimize the crossings between two consecutive timespans.

var story = {
    //...
    _tableMap: [     // 2D tables that record algorithm results: each row represents one character and each column indicates a timespan
        'character': new Table(),  // the status of characters
        'location': new Table(),   // the ID of the locations
        'session': new Table(),    // the ID of the sessions
        'order': new Table(),      // the order of characters
    ],
}

Step 2 Align

The story will be next processed by storyAlign generator that intends to minimize the line deviations using GreeyAlign function.

var story = {
    //...
    _tableMap: [     // 2D tables that record algorithm results: each row represents one character and each column indicates a timespan
        'character': new Table(),  // the status of characters
        'location': new Table(),   // the ID of the locations
        'session': new Table(),    // the ID of the sessions
        'order': new Table(),      // the order of characters
        'align': new Table(),      // the alignment indicators of characters
    ],
}

Step 3 Compact

The story will be further processed by the storyCompact generator to minize the unnecessary white space. Now, we only provide GreedySlotCompact to calculate an approximated layout.

var story = {
    //...
    _tableMap: [     // 2D tables that record algorithm results: each row represents one character and each column indicates a timespan
        'character': new Table(),  // the status of characters
        'location': new Table(),   // the ID of the locations
        'session': new Table(),    // the ID of the sessions
        'order': new Table(),      // the order of characters
        'align': new Table(),      // the alignment indicators of characters
        'layout': new Table(),     // the y-position of characters
    ],
}

Step 4 Render

The story will be rendered by storyRender generator. We provide two types of rendering styles, namely, smooth and sketchy, which can be configured in CONSTANTS.js.

var story = {
    //...
    _tableMap: [     // 2D tables that record algorithm results: each row represents one character and each column indicates a timespan
        'character': new Table(),  // the status of characters
        'location': new Table(),   // the ID of the locations
        'session': new Table(),    // the ID of the sessions
        'order': new Table(),      // the order of characters
        'align': new Table(),      // the alignment indicators of characters
        'layout': new Table(),     // the y-position of characters
        'position': new Table(),   // the ID of the positions
        'path': new Table(),       // the ID of the paths
    ],
}

Step 5 Transform

The layout of story could be reshaped by storyTransform generator. We provide two types of transforming functions, namely, freeTransform and circleTransform. The default transformer is freeTransform where a horizontal shape is set as a default value. We also provide `circleTransform' for those who prefer radial layouts.