Narrative Chart —— Let your charts tell stories with a few lines!

Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar. The library is implemented in JavaScript and compatible with most modern web browsers.

Highlights
Action-Oriented Declarative Programming

Narrative Chart uses a novel action-driven grammar with a JSON format. Users can specify a chart design with a sequence of actions and Narrative Chart would parse the actions and execute them one by one. The grammar is intuitive and simple to use as it is close to real actions of designers, such as adding a title or modifying the chart on the canvas.

Rich Supportive for Visual Narrative

Common Chart Types

Narrative Chart supports the creation of the charts frequently used in data storytelling, such as bar charts, line charts, pie charts, and unit visualization. We identified these commonly-used charts by coding thousands of charts in the wild.

Annotation

Narrative Chart supports 13 common annotating methods that aid the communication of data insights, such as highlighting a mark and adding a circle, symbol, and texture.

Title & Caption

Narrative Chart supports the design of titles and captions, two elements that are prevalent in narrative visualization. Users can customize the positions and styles (e.g., font-size, font-weight, border, background) of these two components.

Animation

Narrative Chart supports the animation of all the visual components (e.g., title, caption, chart, annotation) to enhance user engagement with data and supports the transition in data narratives.

Emotional Palette

Narrative Chart incorporates the emotional color palette from prior research and supports 9 different color themes (e.g., playfulness, negativity, and trustworthiness) to help create an emotional storytelling atmosphere.

Embellishment

Narrative Chart supports the creation of rich types of embellished charts (e.g., ISOTYPE charts, juxtaposing an image beside the chart) to increase user engagement and provides contextual information for data communication.