Critical Reflections on Visualization Authoring Systems

Supplemental Material

Unified Terminology

Common Term	Lyra	Data Illustrator	Charticulator
Mark Graphical elements such as shapes (rect, arc, line), symbols, images and texts	Mark	Shape, Text and Image	Mark
Path Point Points on a path which describes a shape		Anchor Point
Path Segment Line or curve segments on a path which describes a shape		Segment
Handle Auxiliary graphical element on marks and collections to facilitate resizing, rotating and changing gaps	Handle	Handle	Handle
Anchor Auxiliary graphical element to facilitate the specification of relative positions of marks	Connector		Anchor (green dot)
Link Lines or bands that connect marks/glyphs			Link
Glyph A group of marks to be repeated by data. Users can specify the layout of marks in a glyph. A glyph can have zero, one, or more marks, and has it own margin and bounding box	Layer/Group Mark	Group	Glyph
Collection Mark/glyph instances generated by data	Mark	Collection	Plot Segment
Peer Mark/glyph instances that are generated together with the current selected mark/glyph	Mark instances	Peer
Scale A function that transforms data variable values into visual property values, see the scale function in d3.js	Scale	Scale	Scale
Axis Visual representation of spatial scales	Axis	Axis	Axis + Width/Height Legend
Legend Visual representation of non-spatial scales	Legend (color, shape, size)	Legend (color, shape size, stroke width)	Legend (color, width/height)
Guide Auxiliary graphical elements that facilitate drawing and alignment	*		Guide
Scaffold A layout construct that stacks glyphs along a certain direction			Scaffold
Layout Predefined functions/algorithms that specify the positions of marks/glyphs/collections	Layout	Layout	Scaffold + Sub-layout (overlapping, stacking, grid, circle packing)

* Lyra uses “guide” to refer to axes and legends together.

Summary of Main Components for the Three Systems

Video clips illustrate how to create a version of the Wall Street Journal's A Field Guide to Red and Blue America, originally designed by Randy Yeip, Stuart A. Thompson and Will Welch. Click on a thumbnail to watch the corresponding video clip.

	Lyra	Data Illustrator	Charticulator
Mark Instantiation & Customization	predefined marks only drag from toolbar	custom vector shapes draw with Pen Tool; manipulate path points & segments using Direct Selection Tool	predefined marks only drag from toolbar; draw in glyph editor

Glyph Composition	create layers	group marks	compose in glyph editor

Instantiation of Path Points & Path Segments	map data values to point x, y positions	partition line marks; draw with Pen tool	connect glyphs using the Linking tool
Links between Glyphs	add a force-directed layout transform	not supported	connect glyphs using the Linking tool
Data Scoping for Glyphs	one or more tuples per glyph no user action needed for one tuple per glyph; “group by” for multiple tuples per glyph	one or more tuples per glyph repeat or partition	one or more tuples per glyph no user action needed for one tuple per glyph; “group by” for multiple tuples per glyph
Mapping Data Values to Visual Properties	drag data fields to property inspector or drop zone	choose data field from drop-down menu	perform either method

Scales	all D3/Vega scales a scale is created when a data binding is applied; a scale can be created manually, and exists independently from data binding	scales for categorical, temporal, and numerical data a scale is created when a data binding is applied; users choose whether to reuse or merge a scale from a previous data binding	scales for categorical, temporal, and numerical data a scale is created when a data binding is applied; by default, reuses a scale from a previous data binding

Axes & Legends	an axis or legend is created when a data binding is applied; they can be created independently from scales; properties are customized in configuration panel	an axis or a legend is created when a data binding is applied; they can be manipulated through on-canvas interaction, which changes the underlying scale	an axis or a legend is customized through configuration panel; a legend needs to be explicitly added through a button-click
Relative Layout	drag a target mark to a host mark’s anchor	specify through grouping, distribution, and alignment	specify through anchors, guides, handles, margins, and alignment
Layout in a Collection	stacking, force-directed, cartographic projections, and pie charts add a data transformation via button-click	grid and stacking apply repeat/ partition actions	grid, stacking, and circle packing use scaffolds and sub-layouts to position glyphs

Nested Layout	“group” marks are created when dragging data fields to “group” drop zones or applying a “group by” data transformation	concatenate repeat and partition actions in a flexible order	map categorical data columns to X & Y axes and apply sub-layout; embed a Charticulator template as a nested chart
Coordinate Systems	Cartesian	Cartesian	Cartesian, polar, and arbitrary curve drag from toolbar into a plot segment

what is supported

how to achieve the desired outcome

* In Lyra, a user specifies layouts via data transformations.

Supplemental material for “Critical Reflections of Visualization Authoring Systems”, Arvind Satyanarayan, Bongshin Lee, Donghao Ren, Jeffrey Heer, John Stasko, John Thompson, Matthew Brehmer, and Zhicheng Liu