- Title: [[Vega-Lite A Grammar of Interactive Graphics]] - Type: #source/video - Author: - Reference: <+URL+> - Published at: - Reviewed at: [[2021-10-18]] - Links: --- [[Vega-Lite]] provides a [[Grammar of Graphics]] approach to a broad range of interactive data visualizations. [[d3]] and [[Vega]] allow more customization but require deeper expertise (and usually more code) to create common charts. Simpler tools like Tableau allow simple exploration when well known visualizations are needed but do it by omitting control over many aspects of rendering. Vega-Lite - [[Grammar of Graphics]] style buildings blocks for a broad range of interactive visualizations - Simple operations for composing graphics - Buildings blocks for composing interactions with selections. ## Design of Vega-Lite Coming up with a visual representation of abstract data helps amplify human cognition. Vega-lite represents visualizations as declarative [[JSON]] specifications. Vega-lite Compiler resolves any ambiguities with sensible defaults. e.g. if you're binning by a positional axis the engine will bin the data into a larger number of bins than if you're binning to color. Because you're starting with declarative visualization that's building on a compose-able a grammar, the engine can reason about the visualization to pick sane defaults. e.g. a 2 axis, multi-color, binned visualization is a histogram with stacked bar charts rather than each color bar spread out because that preserves the overall shape of the histogram and distribution of the data - channel (color) - marks (bar) - layout transform (stacking) - These components compose and interact in a non-trivial way to create a richer visualization that represents the data. ### Layered and multi-view composition Vega-Lite has a grammar for composing visualizations built around 4 basic operators - **Facet** partition the data along an ordinal field into small multiples (only operator where each sub-plot gets only a subset of the data) - **Layer** stack them on top of each other - **Concat** tile side by side (either H of V) - **Repeat** captures the very common pattern of visualizing multiple dimensions of a dataset by repeating the same visualization for multiple different encodings of the the y-axis value and holding the x-axis the same. But repeat works in both dimensions (e.g. a scatter plot matrix (SPLOM)) A primary reason for having a grammar of composition allows having a cohesive understanding of how the data interacts when composing charts hierarchically into more complex dashboards. At the very least, this lets you create dashboards ina data driven way. Vega-lite can also optimize the data flow, management and transformation. To understand the data further, you really want interactions ### Selections - **Event processing** - **Point of interest** (e.g. data tuple or axis) - **Hit test predicate** Selection types - Single - Project - Bind - Hover Selections also come with selection transforms (analogous to data transforms). e.g. when you create a single selection, rather than selecting that point by identity (i.e. all of it's fields) you can create a selection that selects all items with a matching field value. Selections can also be created by binding values to an input element e.g. a slider rather than just direct manipulation. Because of the regularity, you can implement pan and zoom by just binding the visualization's scales to a selection grid. The scale domains drive the selection. Because of the composability, cross filtering and focus-detail "comes for free" or at least fall out very naturally ## Examples Engine compiles to either svg or canvas. The json documents can be directly shared. ### Voyager Data voyager is a visualization search and recommendations tool that recommends visualizations in the form of vega-lite specifications.