Download as PDF, PPTX
![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]](https://image.slidesharecdn.com/navigatevislibforshare-210205032044/85/Navigating-the-Wide-World-of-Data-Visualization-Libraries-20-320.jpg)
![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.](https://image.slidesharecdn.com/navigatevislibforshare-210205032044/85/Navigating-the-Wide-World-of-Data-Visualization-Libraries-33-320.jpg)
![3. Visualization Grammar
[Leland Wilkinson. “The Grammar of Graphics” p. 7]](https://image.slidesharecdn.com/navigatevislibforshare-210205032044/85/Navigating-the-Wide-World-of-Data-Visualization-Libraries-34-320.jpg)
![3. Visualization Grammar
[Leland Wilkinson. “The Grammar of Graphics” p. 191]](https://image.slidesharecdn.com/navigatevislibforshare-210205032044/85/Navigating-the-Wide-World-of-Data-Visualization-Libraries-35-320.jpg)
![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)](https://image.slidesharecdn.com/navigatevislibforshare-210205032044/85/Navigating-the-Wide-World-of-Data-Visualization-Libraries-69-320.jpg)
![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)](https://image.slidesharecdn.com/navigatevislibforshare-210205032044/85/Navigating-the-Wide-World-of-Data-Visualization-Libraries-71-320.jpg)
Uploaded byKrist Wongsuphasawat
Navigating the Wide World of Data Visualization Libraries
The document discusses the various options and considerations in choosing data visualization libraries for web applications, including highlighting popular libraries like D3, Chart.js, and high-level frameworks like ECharts. It outlines a framework for understanding these libraries based on their API design and level of abstraction, ranging from low-level building blocks to high-level templates. A scorecard and guidelines are provided to help users select the most suitable library for their specific visualization needs.
More Related Content
![[Φυσική Προσανατολισμού Β´ Λυκείου] Καμπυλόγραμμες Κινήσεις](https://cdn.slidesharecdn.com/ss_thumbnails/01-170203100144-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Navigating the Wide World of Data Visualization Libraries
Navigating the Wide World of Data Visualization Libraries
- 1. Navigating the WideWorld of Data Visualization Libraries kristw.yellowpigz.com (on the web) Krist Wongsuphasawat / @kristw
- 2. Univ. of Maryland Twitter Airbnb Opensource 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 Opensource 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 visualizationlibrary should I use? ”
- 5.
- 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.jsreact-rough pixi.js and many more…
- 7.
- 8. How to compare? Understanddesign space Survey existing libraries Organize them by some properties Create a framework for reasoning
- 9. API Design Level of Abstraction DESIGNSPACE of DATA VISUALIZATION LIBRARIES (on the web)
- 10. API Design JSON JSON with callbacks Plain JS Framework Specific Levelof Abstraction DESIGN SPACE of DATA VISUALIZATION LIBRARIES (on the web)
- 11. API Design JSON JSON with callbacks Plain JS Framework Specific Levelof 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 Levelof 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 Levelof 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 Levelof 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 Levelof Abstraction DESIGN SPACE of DATA VISUALIZATION LIBRARIES (on the web)
- 16. API Design JSON JSON with callbacks Plain JS Framework Specific Levelof Abstraction DESIGN SPACE of DATA VISUALIZATION LIBRARIES (on the web) @deck.gl/react @deck.gl/core @deck.gl/json
- 17. 2 3 1 45 Level of Abstraction
- 18. 2 3 1 45 Level of Abstraction High-level Less expressivity * Less effort * Low-level * More expressivity * More effort
- 19. Graphic Libraries 2 3 1 45 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.
- 22.
- 23. Graphic Libraries Low-level Building Blocks 2 3 14 5 Level of Abstraction High-level Less expressivity * Less effort * Low-level * More expressivity * More effort
- 24. 2. Low-level BuildingBlocks 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 BuildingBlocks D3
- 26. 2. Low-level BuildingBlocks d3-annotation https://d3-annotation.susielu.com/
- 27. 2. Low-level BuildingBlocks Flubber https://github.com/veltman/flubber
- 28. 2. Low-level BuildingBlocks Dagre https://github.com/dagrejs/dagre
- 29. 2. Low-level BuildingBlocks visx https://airbnb.io/visx
- 30. Graphic Libraries Low-level Building Blocks Visualization Grammar 2 3 14 5 Level of Abstraction High-level Less expressivity * Less effort * Low-level * More expressivity * More effort
- 31.
- 32. 3. Visualization Grammar Grammarof a language (e.g. English) • part of speech (noun, verb, etc.) • a structure for combining them into a meaningful sentence.
- 33. 3. Visualization Grammar Grammarof 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 [LelandWilkinson. “The Grammar of Graphics” p. 7]
- 35. 3. Visualization Grammar [LelandWilkinson. “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.
- 38.
- 39. Graphic Libraries Low-level Building Blocks Visualization Grammar High-level Building Blocks 23 1 4 5 Level of Abstraction High-level Less expressivity * Less effort * Low-level * More expressivity * More effort
- 40. 4. High-Level BuildingBlocks 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 BuildingBlocks ECharts, Highcharts, Plotly, Victory, React-Vis, Semiotic, … https://datavizcatalogue.com/methods/candlestick_chart.html
- 42. 4. High-Level BuildingBlocks ECharts
- 43. 4. High-Level BuildingBlocks Victory
- 44. 4. High-Level BuildingBlocks Compared with vega-lite grammar
- 45. 4. High-Level BuildingBlocks Compared with vega-lite grammar
- 46. Graphic Libraries Low-level Building Blocks Visualization Grammar High-level Building Blocks Chart Templates 23 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.
- 49.
- 50. Graphic Libraries Low-level Building Blocks Visualization Grammar High-level Building Blocks Chart Templates 23 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 visxChart-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.
- 53. Multiple level ofabstractions Not uncommon
- 54. Multiple level ofabstractions Not uncommon dc.js has both chart templates & high-level building blocks. x x
- 55. Multiple level ofabstractions 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 ofabstractions 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 visualizationlibrary should I use? ”
- 58. Picking libraries Can theycreate what you need? • Visualization types • common, rare, custom
- 59. Picking libraries Can theycreate what you need? • Visualization types • common, rare, custom • Extra requirements • performance • special effects
- 60. Picking libraries Can theycreate what you need? • Visualization types • common, rare, custom Time Consider other factors. ++ -- • Extra requirements • performance • special effects
- 61. Picking libraries Can theycreate what you need? • Visualization types • common, rare, custom ++ -- Customization Time Consider other factors. ++ -- • Extra requirements • performance • special effects
- 62. Picking libraries Can theycreate 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 theycreate 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.
- 65. “Which visualization libraryshould I use?”
- 66. Organize libraries by APIDesign & Level of Abstraction
- 67.
- 68. x x x x x x✏ LibraryA Library B Library C
- 69. What visualization libraryshould 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 fortheir 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 libraryshould 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.