ChartStory

ChartStory is a visual analysis tool for automated partitioning, layout, and captioning of charts into comic-style narratives. ChartStory is contributed by Jian Zhao, Shenyu Xu, Senthil Chandrasegaran, Chris Bryan, Fan Du, Aditi Mishra, Xin Qian, Yiran Li, and Kwan-Liu Ma. The preprint version of the paper can be viewed here.

ChartStory takes an ensemble of user-created charts (a) and automatically generates a data comic (b-d). This is achieved through a back- end pipeline with operations to identify story pieces (b), organize & order story pieces (c), and generate & integrate explanations (d). The user can also interactively edit the captions and layout of the charts, and change the style or appearance of the data comic (e).

Demo Video

(click the image to watch)

Generated Datacomics Examples

With NLP generated captions

college data

gun data

luma data (used in the scenario)

With bullet-point-style captions

college data

gun data

Theme Examples

dark theme with comic-style charts	dark theme example 1	dark theme example 2
excel theme example 1	excel theme example 2	five thirty eight theme example
ggplot2 theme example	latimes theme example	quartz3 theme example 1
quartz3 theme example 2	vox theme example

User Study Results

• study #1 results (.xlsx)
• study #2 results (.xlsx)
• study #3 resulting datacomic (.png)

High-Resolution Figures in the Paper

• Fig. 4: ChartStory interface (.pdf)
• Fig. 9: Data comic examples (.pdf)

System Setup and Running

Prerequisite:

Node and Python

Install:

npm install

(Also install the required Python packages by following the README in the folder rewrite-python-service)

Start server:

npm start

Open the explorer with http://localhost:8090/