Successfully reported this slideshow.

Navigating the Wide World of Data Visualization Libraries

2

Share

Loading in …3
×
1 of 72
1 of 72

Navigating the Wide World of Data Visualization Libraries

2

Share

Download to read offline

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

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

More Related Content

More from Krist Wongsuphasawat

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Navigating the Wide World of Data Visualization Libraries

  1. 1. Navigating the Wide World of Data Visualization Libraries kristw.yellowpigz.com (on the web) Krist Wongsuphasawat / @kristw
  2. 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. 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. 4. “ Which visualization library should I use? ”
  5. 5. D3 and many more…
  6. 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. 7. “ It depends. ”
  8. 8. How to compare? Understand design space Survey existing libraries Organize them by some properties Create a framework for reasoning
  9. 9. API Design Level of Abstraction DESIGN SPACE of DATA VISUALIZATION LIBRARIES (on the web)
  10. 10. API Design JSON JSON with callbacks Plain JS Framework Specific Level of Abstraction DESIGN SPACE of DATA VISUALIZATION LIBRARIES (on the web)
  11. 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. 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. 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. 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. 15. API Design JSON JSON with callbacks Plain JS Framework Specific Level of Abstraction DESIGN SPACE of DATA VISUALIZATION LIBRARIES (on the web)
  16. 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. 17. 2 3 1 4 5 Level of Abstraction
  18. 18. 2 3 1 4 5 Level of Abstraction High-level Less expressivity * Less effort * Low-level * More expressivity * More effort
  19. 19. Graphic Libraries 2 3 1 4 5 Level of Abstraction High-level Less expressivity * Less effort * Low-level * More expressivity * More effort
  20. 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. 21. 1. Graphics Libraries p5*js
  22. 22. 1. Graphics Libraries React-Rough
  23. 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. 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. 25. 2. Low-level Building Blocks D3
  26. 26. 2. Low-level Building Blocks d3-annotation https://d3-annotation.susielu.com/
  27. 27. 2. Low-level Building Blocks Flubber https://github.com/veltman/flubber
  28. 28. 2. Low-level Building Blocks Dagre https://github.com/dagrejs/dagre
  29. 29. 2. Low-level Building Blocks visx https://airbnb.io/visx
  30. 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. 31. 3. Visualization Grammar
  32. 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. 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. 34. 3. Visualization Grammar [Leland Wilkinson. “The Grammar of Graphics” p. 7]
  35. 35. 3. Visualization Grammar [Leland Wilkinson. “The Grammar of Graphics” p. 191]
  36. 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. 37. 3. Visualization Grammar vega-lite
  38. 38. 3. Visualization Grammar G2
  39. 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. 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. 41. 4. High-Level Building Blocks ECharts, Highcharts, Plotly, Victory, React-Vis, Semiotic, … https://datavizcatalogue.com/methods/candlestick_chart.html
  42. 42. 4. High-Level Building Blocks ECharts
  43. 43. 4. High-Level Building Blocks Victory
  44. 44. 4. High-Level Building Blocks Compared with vega-lite grammar
  45. 45. 4. High-Level Building Blocks Compared with vega-lite grammar
  46. 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. 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. 48. 5. Chart Templates Chart.js
  49. 49. 5. Chart Templates nivo
  50. 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. 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. 52. Scorecard Library A x Library B x
  53. 53. Multiple level of abstractions Not uncommon
  54. 54. Multiple level of abstractions Not uncommon dc.js has both chart templates & high-level building blocks. x x
  55. 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. 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. 57. “ Which visualization library should I use? ”
  58. 58. Picking libraries Can they create what you need? • Visualization types • common, rare, custom
  59. 59. Picking libraries Can they create what you need? • Visualization types • common, rare, custom • Extra requirements • performance • special effects
  60. 60. Picking libraries Can they create what you need? • Visualization types • common, rare, custom Time Consider other factors. ++ -- • Extra requirements • performance • special effects
  61. 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. 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. 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. 64. Recap
  65. 65. “Which visualization library should I use?”
  66. 66. Organize libraries by API Design & Level of Abstraction
  67. 67. x x ✨
  68. 68. x x x x x x✏ Library A Library B Library C
  69. 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. 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. 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. 72. Thank you

×