Navigating the Wide World
of Data Visualization Libraries
kristw.yellowpigz.com
(on the web)
Krist Wongsuphasawat / @kristw

Univ. of Maryland
Twitter
Airbnb
Open source
Academic research in data visualization
Visual Analytics Tools, interactive.twitter.com
Data Experience
Apache Superset, visx, labella, react-vega

Univ. of Maryland
Twitter
Airbnb
Open source
Academic research in data visualization
Visual Analytics Tools, interactive.twitter.com
Data Experience
Apache Superset, visx, labella, react-vega
Wrote JS, TS
to build visualizations on the web

“ Which visualization library
should I use? ”

D3
and many more…

react-three-fiber
visx
Chart-Parts
@deck.gl/react
Recharts
p5*js
flubber
dimple
Chart.js
ECharts
@deck.gl/json
Vega-Lite FusionCharts
Vega
Chartist.js
HighCharts
Plotly
@deck.gl/core
Google Charts
dc.js
G2Plot
G2
Muze
nivo
vue-trend
Victory
D3
d3-annotation
cola
React-Vis
Semiotic
labella
Rough.js
three.js react-rough
pixi.js
and many more…

“ It depends. ”

How to compare?
Understand design space
Survey existing libraries
Organize them by some properties
Create a framework for reasoning

API
Design
Level of Abstraction
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
• Framework-agnostic.
• Flexible, can be used anywhere.
• Tends to be more imperative than declarative.
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
• Declare a configuration object, not instructions
• No function or custom objects.
• More declarative.
• Serializable. Can save to text file.
• More difficult to integrate with others.
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
• Configuration object that takes functions
• More flexible
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
• Tie to specific framework (e.g. React)
• Better integration with target codebase
• Need to learn the framework
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)
@deck.gl/react
@deck.gl/core
@deck.gl/json

2 3
1 4 5
Level of Abstraction

2 3
1 4 5
Level of Abstraction High-level
Less expressivity *
Less effort *
Low-level
* More expressivity
* More effort

Graphic
Libraries
2 3
1 4 5
Level of Abstraction High-level
Less expressivity *
Less effort *
Low-level
* More expressivity
* More effort

1. Graphics Libraries
Processing, p5*js, Three.js, Two.js, Rough.js, …
• Graphics operations
• e.g., draw, shading
• Very high expressivity
• Very high effort
• Does not know about data
[https://codesandbox.io/embed/r3f-gamma-correction-kmb9i]

1. Graphics Libraries
p5*js

1. Graphics Libraries
React-Rough

Graphic
Libraries
Low-level
Building Blocks
2 3
1 4 5
Level of Abstraction High-level
Less expressivity *
Less effort *
Low-level
* More expressivity
* More effort

2. Low-level Building Blocks
D3, d3-legend, d3-annotation, Flubber, cola, dagre, visx, …
• Independent building blocks
• Components and utilities. Each provides specific functions.
• e.g. scale, axis, interpolation, layout, shape
• Combined flexibly to create a visualization.
• Can work with other libraries.

2. Low-level Building Blocks
D3

2. Low-level Building Blocks
d3-annotation
https://d3-annotation.susielu.com/

2. Low-level Building Blocks
Flubber
https://github.com/veltman/flubber

2. Low-level Building Blocks
Dagre
https://github.com/dagrejs/dagre

2. Low-level Building Blocks
visx
https://airbnb.io/visx

Graphic
Libraries
Low-level
Building Blocks
Visualization
Grammar
2 3
1 4 5
Level of Abstraction High-level
Less expressivity *
Less effort *
Low-level
* More expressivity
* More effort

3. Visualization Grammar

3. Visualization Grammar
Grammar of a language (e.g. English)
• part of speech (noun, verb, etc.)
• a structure for combining them
into a meaningful sentence.

3. Visualization Grammar
Grammar of a language (e.g. English)
• part of speech (noun, verb, etc.)
• a structure for combining them
into a meaningful sentence.
The Grammar of Graphics [Wilkinson]
• part of charts
• a structure for combining them
to describe an output graphics.

3. Visualization Grammar
[Leland Wilkinson. “The Grammar of Graphics” p. 7]

3. Visualization Grammar
[Leland Wilkinson. “The Grammar of Graphics” p. 191]

3. Visualization Grammar
vega-lite, G2, Muze, Chart Parts, …
• A framework that provides
• A set of chart parts
• Specific way to compose the parts together to describe a chart
• No chart type
• Less likely to work with other libraries
• Can express a broad range of visualizations on its own
• Fluidly switch between different visualizations
• Rapid exploration

3. Visualization Grammar
vega-lite

3. Visualization Grammar
G2

Graphic
Libraries
Low-level
Building Blocks
Visualization
Grammar
High-level
Building Blocks
2 3
1 4 5
Level of Abstraction High-level
Less expressivity *
Less effort *
Low-level
* More expressivity
* More effort

4. High-Level Building Blocks
ECharts, Highcharts, Plotly, Victory, React-Vis, Semiotic, …
• Framework with preassembled larger parts
• A container + many series/layers
LineSeries, BarSeries, CandleStickSeries, BeeSwarmSeries, etc.
• May include chart type
• Trade expressivity for convenience.

4. High-Level Building Blocks
ECharts, Highcharts, Plotly, Victory, React-Vis, Semiotic, …
https://datavizcatalogue.com/methods/candlestick_chart.html

4. High-Level Building Blocks
ECharts

4. High-Level Building Blocks
Victory

4. High-Level Building Blocks
Compared with vega-lite grammar

4. High-Level Building Blocks
Compared with vega-lite grammar

Graphic
Libraries
Low-level
Building Blocks
Visualization
Grammar
High-level
Building Blocks
Chart
Templates
2 3
1 4 5
High-level
Less expressivity *
Less effort *
Low-level
* More expressivity
* More effort
Level of Abstraction

5. Chart Templates
Chart.js, nivo, …
• Refer to component by chart types
• Bar, Pie, Area, Line, Stacked Area, Donut,
Waterfall, Bump, Calendar, Treemap,
Sankey, Waffle, ColumnWithLine, etc.
• Often ready to use, straight out of the box
• Less customization or optimization

5. Chart Templates
Chart.js

5. Chart Templates
nivo

Graphic
Libraries
Low-level
Building Blocks
Visualization
Grammar
High-level
Building Blocks
Chart
Templates
2 3
1 4 5
API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

Graphic
Libraries
Low-level
Building Blocks
Visualization
Grammar
High-level
Building Blocks
Chart
Templates
react-rough
react-three-fiber
visx Chart-Parts
Victory
React-Vis
Semiotic
@deck.gl/react
nivo
vue-trend
Recharts
p5*js
Rough.js
three.js
pixi.js
D3
d3-annotation
cola
flubber
labella
G2
Muze
dimple
Google Charts
G2Plot
dc.js
Chart.js
Chartist.js
ECharts
HighCharts
Plotly
@deck.gl/core
@deck.gl/json
Vega-Lite
FusionCharts
Vega
2 3
1 4 5
API
Design
JSON
JSON
with callbacks
Plain JS
Framework
Specific
Level of Abstraction
DESIGN SPACE of
DATA VISUALIZATION
LIBRARIES
(on the web)

Scorecard
Library A
x
Library B
x

Multiple level of abstractions
Not uncommon

Multiple level of abstractions
Not uncommon
dc.js
has both chart templates &
high-level building blocks.
x x

Multiple level of abstractions
Not uncommon
G2 & G2Plot
G2Plot is chart templates
on top of G2 grammar.
x x
dc.js
has both chart templates &
high-level building blocks.
x x

Multiple level of abstractions
Not uncommon
G2 & G2Plot
G2Plot is chart templates
on top of G2 grammar.
x x
React-Vis
high-level building blocks
e.g. <XYPlot />
and chart templates
e.g. <Sankey />
x x
dc.js
has both chart templates &
high-level building blocks.
x x

“ Which visualization library
should I use? ”

Picking libraries
Can they create what you need?
• Visualization types
• common, rare, custom

Picking libraries
Can they create what you need?
• Visualization types
• common, rare, custom
• Extra requirements
• performance
• special effects

Picking libraries
Can they create what you need?
• Visualization types
• common, rare, custom
Time
Consider other factors.
++ --
• Extra requirements
• performance
• special effects

Picking libraries
Can they create what you need?
• Visualization types
• common, rare, custom
++ --
Customization
Time
Consider other factors.
++ --
• Extra requirements
• performance
• special effects

Picking libraries
Can they create what you need?
• Visualization types
• common, rare, custom
Target tech stack
+ Project lifespan
++ --
Customization
Time
Consider other factors.
++ --
• Extra requirements
• performance
• special effects

Picking libraries
Can they create what you need?
• Visualization types
• common, rare, custom
Target tech stack
+ Project lifespan
++ --
Customization
+ Experience*
Time
Consider other factors.
++ --
• Extra requirements
• performance
• special effects

Recap

“Which visualization library should I use?”

Organize libraries by
API Design & Level of Abstraction

x x
✨

x
x x
x
x x✏
Library A
Library B
Library C

What visualization library should I use?
Organize by API design & Level of Abstraction
Scorecard & Guidelines
[medium.com/nightingale/navigating-the-wide-world-of-web-based-data-visualization-libraries-798ea9f536e7]
kristw.yellowpigz.com
Krist Wongsuphasawat / @kristw
Navigating the Wide World
of Data Visualization Libraries
(on the web)

Acknowledgement
Kanit Wongsuphasawat and Senthil Natarajan
for their feedback on the original Nightingale article.
Benjawan Chanthaworakit for keeping our two kids busy
while I made these slides.
Virtual background by Oli Götting via Pixabay

What visualization library should I use?
Organize by API design & Level of Abstraction
Scorecard & Guidelines
[medium.com/nightingale/navigating-the-wide-world-of-web-based-data-visualization-libraries-798ea9f536e7]
kristw.yellowpigz.com
Krist Wongsuphasawat / @kristw
Navigating the Wide World
of Data Visualization Libraries
(on the web)

Thank you