Hi I am Hyeok from Northwestern University.
In this talk, I will present Cicero, a declarative grammar for responsive visualization.
I collaborated this with my colleagues from Adobe Research.
Responsive visualization refers to presenting a visualization for different screen types.
Prior work has identified applying a set of transformations to a source design
as a frequent approach to authoring responsive visualizations.
Here is a short example case.
This line chart describes forecasted changes in the GDP growth rate over time.
From the desktop to the mobile version,
the author changed the size and removed a subset of the data.
There are many challenges in authoring responsive visualizations,
such as managing multiple artboards, comparing messages across responsive versions,
and exploring a large set of design space.
Another challenge is that we lack an understanding of
how to express responsive design strategies
to help build intelligent responsive visualization authoring systems in the future.
That is, we need a syntax to express responsive visualization techniques.
Many prior work on declarative grammars for visualization, such as Vega-Lite, ggplot2,
has shown that a declarative grammar can help build lots of visualization authoring systems, or tools,
as we discuss in the last CHI SIG session.
For example, Hoffswell's prototype responsive visualization authoring system
is backed by Vega-Lite.
After an extensive review and discussion of prior approaches around responsive visualization,
declarative visualization grammar, and techniques for responsive web design,
we derived three design guidelines, be expressive, be flexible, and be reusable
for a declarative grammar for responsive visualization.
First, prior surveys on responsive visualization designs have informed that
a design space of responsive visualization is large rather than a set of simple tactics.
Thus, a grammar should be able to express such a large set of responsive techniques.
Second, authors may need to use different expressions for the same visualization entity.
For instance, some authors may want to specify
the red bar that encodes the 'dog' value here using the color name, 'red,'
and others may want to do the same thing using the data value, 'dog,'
depending on how they understand the visualization structure.
Thus, a grammar should be able to flexibly specify the behavior of an entity
under a transformation
Lastly, our prior work has shown that responsive visualization techniques are reused.
Therefore, expressions should be able to be reused in the future.
Following the guidelines, we introduce Cicero,
a declarative grammar that expresses transformations for responsive visualizations
in an expressive, flexible, and reusable way.
A Cicero spec is expressed as a JSON object.
A Cicero spec consists of two parts: metadata and an array of transformation rules.
The metadata object contains information about responsive context, aspect ratio, etc.
Each transformation rule is composed of a specifier, action, and option,
informed by prior surveys on responsive visualization strategies.
In this talk, I will focus on the transformation rules.
First, a specifier queries visualization elements to change
using structure, data, and attribute queries.
A structure query references an element by its role and group in the visualization.
This example specifier queries every mark in a given visualization.
Next, a data query references an element by values that it encodes.
The updated specifier now selects those marks that encode the cost of 30.
Lastly, an attribute query references elements by their attributes and properties.
For instance, this specifier is now updated to specify those marks
with a color encoding channel.
Next, an action element specifies the type of a transformation.
Informed by prior work, Cicero has eight action keywords.
They are: modify, reposition, transpose, add, duplicate, remove, replace, and swap.
I'll introduce several example actions, and more details can be found in the paper.
For example, the transpose action changes the relative position of a pair of objects,
such as transposing axes.
The replace action is used to change the role or functionality of an element.
The example case replaces axis labels with a color legend.
The modify action indicates changes to properties of elements.
Here, the rule is trying to modify the size of the view.
Lastly, given an action type, an option object details
how to change the element selected by the specifier.
An option object has the same structure as a specifier.
The properties declared in an option object should be considered
as subordinate to the visualization element selected by the specifier.
In the last example, the size in the option is the size of the entire chart, or view.
Now, I will show how Cicero can specify the transformations in the first example,
which includes resizing and data filtering.
As shown earlier, the rule here modifies the view size to 365 by 450.
The second rule filters out a subset of data of which the year is less than or equal to 2011.
To demonstrate the expressiveness of cicero rules,
we replicated total of 13 real-world cases in our supplemental material.
As a declarative grammar, Cicero requires a compiler
that transforms an original design spec to a new spec.
A Cicero compiler takes two objects as input: an original design spec and a Cicero spec.
Here, we express original designs in our Vega-Lite extension.
Then, the compiler returns a new visualization spec
expressed in the same grammar of the original design.
Finally, the grammar-specific compiler renders the visualization.
Further details are available in the paper
Future work can apply Cicero grammar to sophisticated authoring systems
as internal representation in conjunction with a visualization grammar for rendering.
Then those internal representations can express human edits,
which further builds up to a graphical user interface for manual edits.
Cicero can also express machine edits suggested by an automated design recommender,
which we can use to build fully-automated authoring systems.
Cicero can ultimately support mixed-initiative authoring systems
that combines human edits and machine edits together.
This is the end of the talk.
Thank you for listening.