Successfully reported this slideshow.

Encodable: Configurable Grammar for Visualization Components

0

Share

Upcoming SlideShare
An introduction to Vue.js
An introduction to Vue.js
Loading in …3
×
1 of 79
1 of 79

Encodable: Configurable Grammar for Visualization Components

0

Share

Download to read offline

There are so many libraries of visualization components nowadays with their APIs often different from one another. Could these components be more similar, both in terms of the APIs and common functionalities? For someone who is developing a new visualization component, how should the API look like? This work drew inspiration from visualization grammar, decoupled the grammar from its rendering engine and adapted it into a configurable grammar for individual components called Encodable. Encodable helps component authors define grammar for their components, and parse encoding specifications from users into utility functions for the implementation.

There are so many libraries of visualization components nowadays with their APIs often different from one another. Could these components be more similar, both in terms of the APIs and common functionalities? For someone who is developing a new visualization component, how should the API look like? This work drew inspiration from visualization grammar, decoupled the grammar from its rendering engine and adapted it into a configurable grammar for individual components called Encodable. Encodable helps component authors define grammar for their components, and parse encoding specifications from users into utility functions for the implementation.

More Related Content

More from Krist Wongsuphasawat

Related Books

Free with a 14 day trial from Scribd

See all

Encodable: Configurable Grammar for Visualization Components

  1. 1. Encodable <.> Krist Wongsuphasawat / @kristw Configurable Grammar for Visualization Components Presented at IEEE VIS 2020. See additional information at github.com/kristw/encodable Data Experience Team Airbnb, Inc.
  2. 2. Solution Inspiration Results Conclusions Motivation
  3. 3. Many programmatic ways to create a visualization
  4. 4. Visualization Libraries Graphic Libraries Low-level Building Blocks Visualization Grammars High-level Building Blocks Chart Templates Level of abstraction
  5. 5. Visualization Libraries Graphic Libraries Low-level Building Blocks Visualization Grammars High-level Building Blocks Chart Templates Level of abstraction Graphic Libraries Manipulate graphics processing, three.js, …
  6. 6. Visualization Libraries Graphic Libraries Low-level Building Blocks Visualization Grammars High-level Building Blocks Chart Templates Manipulate graphics processing, three.js, … Level of abstraction Chart Templates Google Charts, nivo, FusionCharts, … A catalog of charts by “chart types”
  7. 7. nivo
  8. 8. Problem Visualization components have different APIs. Icons by Sean Au
  9. 9. Problem Visualization components have different APIs. Component users Keep learning new APIs Icons by Sean Au
  10. 10. Problem Visualization components have different APIs. Component users Keep learning new APIs Example: Set “x” for scatterplot Icons by Sean Au
  11. 11. Problem Visualization components have different APIs. A) Requires field x in data Component users Keep learning new APIs Example: Set “x” for scatterplot Icons by Sean Au
  12. 12. B) Without field x in data Problem Visualization components have different APIs. Component users Keep learning new APIs Example: Set “x” for scatterplot Icons by Sean Au
  13. 13. B) Without field x in data Problem Visualization components have different APIs. Component users Keep learning new APIs Example: Set “x” for scatterplot Icons by Sean Au
  14. 14. Problem Component users Keep learning new APIs High switching cost Visualization components have different APIs. Icons by Sean Au
  15. 15. Problem Component users Keep learning new APIs High switching cost Inconsistent features Visualization components have different APIs. Logarithmic scale Number formatting Make axis include zero etc. Icons by Sean Au
  16. 16. Problem Visualization components have different APIs. Component users Keep learning new APIs High switching cost Inconsistent features Icons by Sean Au
  17. 17. Problem Visualization components have different APIs. Could the components be more similar? Component users Keep learning new APIs High switching cost Inconsistent features Icons by Sean Au
  18. 18. Problem Visualization components have different APIs. Could the components be more similar? Component authors No API standard No help Component users Keep learning new APIs High switching cost Inconsistent features Icons by Sean Au
  19. 19. Problem Visualization components have different APIs. Could the components be more similar? Could building consistent components be easier? Component authors No API standard No help Component users Keep learning new APIs High switching cost Inconsistent features Icons by Sean Au
  20. 20. Solution Inspiration Results Conclusions Motivation
  21. 21. Visualization Libraries Graphic Libraries Visualization Grammars Chart Templates Level of abstraction Google Charts, nivo, FusionCharts, … processing, three.js, … Manipulate graphics A catalog of charts by “chart types” Low-level Building Blocks High-level Building Blocks
  22. 22. Visualization Libraries Graphic Libraries Visualization Grammars Chart Templates One language to describe all charts A catalog of charts by “chart types” Low-level Building Blocks High-level Building Blocks Vega-Lite, … Google Charts, nivo, FusionCharts, … Level of abstraction Manipulate graphics processing, three.js, …
  23. 23. Vega-Lite Creating a bar chart [Satyanarayan et al. 2017]
  24. 24. Vega-Lite Creating a bar chart [Satyanarayan et al. 2017]
  25. 25. Vega-Lite Creating a bar chart Channel Name Channel Definition [Satyanarayan et al. 2017]
  26. 26. Vega-Lite Creating a bar chart [Satyanarayan et al. 2017]
  27. 27. Vega-Lite Creating a bar chart Channel Name Channel Definition [Satyanarayan et al. 2017] Could any vis. component define encoding like this?
  28. 28. Solution Inspiration Results Conclusions Motivation
  29. 29. Grammar Parsing & rendering logic User’s specification Output visualization + Analyze vega-lite
  30. 30. Grammar Parsing & rendering logic User’s specification Output visualization + Analyze Adopt this part vega-lite
  31. 31. Grammar Parsing & rendering logic User’s specification Output visualization + Analyze Adopt this part vega-lite Let the component authors handle rendering.
  32. 32. Grammar Parsing & rendering logic User’s specification Output visualization + Decouple & Evolve vega-lite
  33. 33. Grammar Parsing & rendering logic User’s specification Output visualization + Decouple & Evolve vega-lite encodable Parser + Configurable grammar Adapt
  34. 34. Assumption Data in tabular format
  35. 35. Principle #1 Vis. component is described by its encoding channels.
  36. 36. Key (Channel Name) Principle #1 Vis. component is described by its encoding channels.
  37. 37. Key (Channel Name) Principle #1 Vis. component is described by its encoding channels. Value (Channel Definition)
  38. 38. Value (Channel Definition) Key (Channel Name) Principle #1 Vis. component is described by its encoding channels.
  39. 39. Value (Channel Definition) Key (Channel Name) Principle #1 Vis. component is described by its encoding channels.
  40. 40. Value (Channel Definition) Key (Channel Name) Principle #1 Vis. component is described by its encoding channels.
  41. 41. Value (Channel Definition) Key (Channel Name) Principle #1 Vis. component is described by its encoding channels.
  42. 42. What are the valid channel names and definitions? Value (Channel Definition) Key (Channel Name) Principle #1 Vis. component is described by its encoding channels.
  43. 43. Principle #2 Author defines specific channels.
  44. 44. Principle #2 Author defines specific channels. Channel Name
  45. 45. Principle #2 Author defines specific channels. Channel Name Channel type & output
  46. 46. Principle #2 Author defines specific channels. Channel Name Channel type & output
  47. 47. Architecture Grammar Parsing & rendering logic User’s specification Output visualization + vega-lite Configurable grammar encodable Parser + Adapt
  48. 48. my-component Architecture Grammar Parsing & rendering logic User’s specification Output visualization + vega-lite Configurable grammar encodable Parser + Adapt
  49. 49. my-component Architecture Grammar Parsing & rendering logic User’s specification Output visualization + vega-lite Configurable grammar encodable Parser + Encodable Adapt
  50. 50. my-component Architecture Grammar Parsing & rendering logic User’s specification Output visualization + vega-lite Configurable grammar encodable Parser + Encodable Adapt Minimal Configuration User’s specification +
  51. 51. my-component Architecture Grammar Parsing & rendering logic User’s specification Output visualization + vega-lite Configurable grammar encodable Parser + Encodable Adapt Minimal Configuration User’s specification + Rendering logic Output visualization +
  52. 52. Build a component with . Encodable
  53. 53. Visualization Component (WordCloud)
  54. 54. Visualization Component (WordCloud) Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; }
  55. 55. Visualization Component (WordCloud) Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig >
  56. 56. Visualization Component (WordCloud) API type WordCloudProps = { encoding: width: number; height: number; data: object[]; } Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig >
  57. 57. Visualization Component (WordCloud) User’s Code API type WordCloudProps = { encoding: width: number; height: number; data: object[]; } <WordCloud encoding={{ color: { field: ‘food’ }, size: { field: ‘count, scale: { range: [0,48] } }, text: { field: ‘food’ }, }} width={400} height={400} data={[ {food:‘Burger’, count:80 }, {food:‘Noodle’, count:10 } ]} /> Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig >
  58. 58. Visualization Component (WordCloud) User’s Code API type WordCloudProps = { encoding: width: number; height: number; data: object[]; } Rendering function WordCloud({ width, height, data , encoding }: WordCloudProps) { const encoder = encoder.setDomainFromDataset( data ); const channels = encoder.channels; return (<div style={{ width , height }}> { data .map(d => (<span style={{ color: channels.color.encodeDatum(d), fontSize: channels.size.encodeDatum(d), }}> {channels.text.getValueFromDatum(d)} </span>))} </div>); } <WordCloud encoding={{ color: { field: ‘food’ }, size: { field: ‘count, scale: { range: [0,48] } }, text: { field: ‘food’ }, }} width={400} height={400} data={[ {food:‘Burger’, count:80 }, {food:‘Noodle’, count:10 } ]} /> Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig >
  59. 59. Visualization Component (WordCloud) User’s Code API type WordCloudProps = { encoding: width: number; height: number; data: object[]; } Rendering function WordCloud({ width, height, data , encoding }: WordCloudProps) { const encoder = encoder.setDomainFromDataset( data ); const channels = encoder.channels; return (<div style={{ width , height }}> { data .map(d => (<span style={{ color: channels.color.encodeDatum(d), fontSize: channels.size.encodeDatum(d), }}> {channels.text.getValueFromDatum(d)} </span>))} </div>); } <WordCloud encoding={{ color: { field: ‘food’ }, size: { field: ‘count, scale: { range: [0,48] } }, text: { field: ‘food’ }, }} width={400} height={400} data={[ {food:‘Burger’, count:80 }, {food:‘Noodle’, count:10 } ]} /> Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig > createEncoder< WordCloudConfig >( encoding )
  60. 60. Visualization Component (WordCloud) User’s Code API type WordCloudProps = { encoding: width: number; height: number; data: object[]; } Rendering function WordCloud({ width, height, data , encoding }: WordCloudProps) { const encoder = encoder.setDomainFromDataset( data ); const channels = encoder.channels; return (<div style={{ width , height }}> { data .map(d => (<span style={{ color: channels.color.encodeDatum(d), fontSize: channels.size.encodeDatum(d), }}> {channels.text.getValueFromDatum(d)} </span>))} </div>); } <WordCloud encoding={{ color: { field: ‘food’ }, size: { field: ‘count, scale: { range: [0,48] } }, text: { field: ‘food’ }, }} width={400} height={400} data={[ {food:‘Burger’, count:80 }, {food:‘Noodle’, count:10 } ]} /> Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig > createEncoder< WordCloudConfig >( encoding ) fillChannelDef(encoding.color) createChannelEncoder(…) fillChannelDef(encoding.size) createChannelEncoder(…) fillChannelDef(encoding.text) createChannelEncoder(…) Filler Parser encoder
  61. 61. Visualization Component (WordCloud) User’s Code API type WordCloudProps = { encoding: width: number; height: number; data: object[]; } Rendering function WordCloud({ width, height, data , encoding }: WordCloudProps) { const encoder = encoder.setDomainFromDataset( data ); const channels = encoder.channels; return (<div style={{ width , height }}> { data .map(d => (<span style={{ color: channels.color.encodeDatum(d), fontSize: channels.size.encodeDatum(d), }}> {channels.text.getValueFromDatum(d)} </span>))} </div>); } <WordCloud encoding={{ color: { field: ‘food’ }, size: { field: ‘count, scale: { range: [0,48] } }, text: { field: ‘food’ }, }} width={400} height={400} data={[ {food:‘Burger’, count:80 }, {food:‘Noodle’, count:10 } ]} /> Config WordCloudConfig = { color: [‘Color’, string]; size: [‘Numeric’, number]; text: [‘Text’, string]; } DeriveEncoding< WordCloudConfig > createEncoder< WordCloudConfig >( encoding ) fillChannelDef(encoding.color) createChannelEncoder(…) fillChannelDef(encoding.size) createChannelEncoder(…) fillChannelDef(encoding.text) createChannelEncoder(…) Filler Parser encoder
  62. 62. Solution Inspiration Results Conclusions Motivation
  63. 63. Examples
  64. 64. Example Word Cloud
  65. 65. Example Scatter Plot
  66. 66. Example Balloon Plot
  67. 67. Example Coffee Chart
  68. 68. Beyond examples Real-world usage Apache Superset (incubating) npm package encodable
  69. 69. Solution Inspiration Results Conclusions Motivation
  70. 70. Encodable <.> Envision a world where vis. components are more similar and consistent. Krist Wongsuphasawat (@kristw) github.com/kristw/encodable Component authors Less work to create consistent components. Component users Improve productivity and developer experience.
  71. 71. Encodable <.> Envision a world where vis. components are more similar and consistent. Krist Wongsuphasawat (@kristw) github.com/kristw/encodable Configurable grammar and parser Make progress towards that world. Less overhead to iterate and enhance a component. Component authors Less work to create consistent components. Component users Improve productivity and developer experience.
  72. 72. Encodable <.> Envision a world where vis. components are more similar and consistent. Krist Wongsuphasawat (@kristw) github.com/kristw/encodable Configurable grammar and parser Make progress towards that world. Less overhead to iterate and enhance a component. Future work More common features, e.g., legend, axes while keeping Encodable lightweight. Auto-generate doc and control panels. Extend to other platforms and languages. Component authors Less work to create consistent components. Component users Improve productivity and developer experience.
  73. 73. github.com/kristw/encodable
  74. 74. Acknowledgement Kanit Wongsuphasawat Dominik Moritz Chris Williams Airbnb Data Experience team Benjawan Chanthaworakit
  75. 75. Encodable <.> Envision a world where vis. components are more similar and consistent. Krist Wongsuphasawat (@kristw) github.com/kristw/encodable Configurable grammar and parser Make progress towards that world. Conveniently add/remove channels. Future work More common features, e.g., legend, axes while keeping Encodable lightweight. Auto-generate doc and control panels. Extend to other platforms and languages. Component authors Less work to create consistent components. Component users Improve productivity and developer experience.
  76. 76. Thank you

×