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.

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. Solution
Inspiration
Results
Conclusions
Motivation

3. Many programmatic ways
to create a visualization

4. Visualization Libraries
Graphic Libraries
Low-level Building Blocks
Visualization Grammars
High-level Building Blocks
Chart Templates
Level of
abstraction

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

8. nivo

10. Problem
Visualization components have different APIs.
Icons by Sean Au

11. Problem
Visualization components have different APIs.
Component users
Keep learning new APIs
Icons by Sean Au

12. Problem
Visualization components have different APIs.
Component users
Keep learning new APIs
Example: Set “x” for scatterplot
Icons by Sean Au

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

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

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

16. Problem
Component users
Keep learning new APIs
High switching cost
Visualization components have different APIs.
Icons by Sean Au

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

18. Problem
Visualization components have different APIs.
Component users
Keep learning new APIs
High switching cost
Inconsistent features
Icons by Sean Au

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

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

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

22. Solution
Inspiration
Results
Conclusions
Motivation

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

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

25. Vega-Lite
Creating a bar chart
[Satyanarayan et al. 2017]

26. Vega-Lite
Creating a bar chart
[Satyanarayan et al. 2017]

27. Vega-Lite
Creating a bar chart
Channel Name
Channel Definition
[Satyanarayan et al. 2017]

28. Vega-Lite
Creating a bar chart
[Satyanarayan et al. 2017]

29. Vega-Lite
Creating a bar chart
Channel Name
Channel Definition
[Satyanarayan et al. 2017]
Could any vis. component
define encoding like this?

30. Solution
Inspiration
Results
Conclusions
Motivation

31. Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
Analyze
vega-lite

32. Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
Analyze
Adopt this part
vega-lite

33. Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
Analyze
Adopt this part
vega-lite
Let the component authors
handle rendering.

34. Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
Decouple & Evolve
vega-lite

35. Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
Decouple & Evolve
vega-lite encodable
Parser
+
Configurable grammar
Adapt

36. Assumption
Data in tabular format

37. Principle #1
Vis. component is described by its encoding channels.

38. Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.

39. Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.
Value (Channel Definition)

40. Value (Channel Definition)
Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.

41. Value (Channel Definition)
Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.

42. Value (Channel Definition)
Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.

43. Value (Channel Definition)
Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.

44. What are the valid
channel names and definitions?
Value (Channel Definition)
Key (Channel Name)
Principle #1
Vis. component is described by its encoding channels.

45. Principle #2
Author defines specific channels.

46. Principle #2
Author defines specific channels.
Channel Name

47. Principle #2
Author defines specific channels.
Channel Name Channel type & output

48. Principle #2
Author defines specific channels.
Channel Name Channel type & output

49. Architecture
Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
vega-lite
Configurable grammar
encodable
Parser
+
Adapt

50. my-component
Architecture
Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
vega-lite
Configurable grammar
encodable
Parser
+
Adapt

51. my-component
Architecture
Grammar
Parsing & rendering logic
User’s specification
Output visualization
+
vega-lite
Configurable grammar
encodable
Parser
+ Encodable
Adapt

52. 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
+

53. 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
+

54. Build a component
with .
Encodable

56. Visualization Component (WordCloud)

57. Visualization Component (WordCloud)
Config
WordCloudConfig = {
color: [‘Color’, string];
size: [‘Numeric’, number];
text: [‘Text’, string];
}

58. Visualization Component (WordCloud)
Config
WordCloudConfig = {
color: [‘Color’, string];
size: [‘Numeric’, number];
text: [‘Text’, string];
}
DeriveEncoding< WordCloudConfig >

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

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

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 >

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

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

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

65. Solution
Inspiration
Results
Conclusions
Motivation

66. Examples

67. Example
Word Cloud

68. Example
Scatter Plot

69. Example
Balloon Plot

70. Example
Coffee Chart

71. Beyond examples
Real-world usage
Apache Superset
(incubating)
npm package
encodable

72. Solution
Inspiration
Results
Conclusions
Motivation

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

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

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

76. github.com/kristw/encodable

77. Acknowledgement
Kanit Wongsuphasawat
Dominik Moritz
Chris Williams
Airbnb Data Experience team
Benjawan Chanthaworakit

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

79. Thank you