“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.
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Navigating the Wide World of Data Visualization Libraries
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
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)
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]
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.
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.
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
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.
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
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
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
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)
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)