“Which visualization library should I use?” Typically, making this decision is not about whether one library is “better” than another, but whether the specific library is more suitable for what the developer is trying to achieve.To answer this question thoroughly, we need to better understand the design space of visualization libraries. The talk will give a tour of many kinds of visualization libraries on the web across the design space, while explaining the framework and design philosophy that the audience can learn along the way. The audience will expand their horizon and be more aware of the wide universe of libraries. The next time they come across a new package, they can use this framework as a lens to analyze its own offerings and how it is different from or similar to the libraries that they already know.

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

2. 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

3. 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

4. “ Which visualization library
should I use? ”

5. D3
and many more…

6. 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…

7. “ It depends. ”

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

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

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

11. 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)

12. 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)

13. 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)

14. 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)

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

16. 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

17. 2 3
1 4 5
Level of Abstraction

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

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

20. 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]

21. 1. Graphics Libraries
p5*js

22. 1. Graphics Libraries
React-Rough

23. 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

24. 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.

25. 2. Low-level Building Blocks
D3

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

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

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

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

30. 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

31. 3. Visualization Grammar

32. 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.

33. 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.

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

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

36. 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

37. 3. Visualization Grammar
vega-lite

38. 3. Visualization Grammar
G2

39. 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

40. 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.

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

42. 4. High-Level Building Blocks
ECharts

43. 4. High-Level Building Blocks
Victory

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

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

46. 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

47. 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

48. 5. Chart Templates
Chart.js

49. 5. Chart Templates
nivo

50. 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)

51. 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)

52. Scorecard
Library A
x
Library B
x

53. Multiple level of abstractions
Not uncommon

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

55. 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

56. 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

57. “ Which visualization library
should I use? ”

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

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

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

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

62. 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

63. 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

64. Recap

65. “Which visualization library should I use?”

66. Organize libraries by
API Design & Level of Abstraction

67. x x
✨

68. x
x x
x
x x✏
Library A
Library B
Library C

69. 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)

70. 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

71. 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)

72. Thank you