Visualization Specifications

Questions: All languages have trade-offs in terms of what they can express and how easy it is to do so. In each of the papers

How do they model (interactive) visualizations?

Describe their trade-offs.

Create a new section with a subheading ## YOURUNI YOURNAME and write the question answers in your section.

ew2493 Eugene Wu

Example answers here

bgw2119 Brennan Wallace

D3

How do they model (interactive) visualizations?

D3 uses the document-object-model elements of a browser to display/represent data that has been bound to the elements. How the elements are styled and how the data is bound gives the programmer the control of how things are displayed, especially how the DOM element style depends on the value of the data element it represents.

On a tool level D3 seems to be called similarly to jQuery (especially for selections) with some extra features and modules for mapping data to elements, speeding up the development of visualizations (help with layouts for example), and handling user input.

Describe their trade-offs:

Pros:

Web-based so creations are easily accessible.

Does not require a new lexicon, rather attaches data to elements in the DOM.

Can use web-standards and typical technologies such as CSS. This also means that there is more support and knowledge re-use.

Non-capsulated control flow and representation allows easier debugging. This in part because there is no hidden internal state that may or may not match the users expectations.

Cons:

Web-based so slower than a compiled programming language.

Not a “toolkitspecific scenegraph abstraction” so it is not cross-platform.
This also means it may have a more verbose syntax.

Vega-lite

How do they model (interactive) visualizations?

The Vega-lite workflow is essentially that the user writes an extremely high level document with specific syntax.
Then Vega-lite compiler provides the functionality and visualization of the document after processing it and working with and optimizing the requirements specified by the users (the document mentioned a bottom-up tree traversal to remove excess elements). A lot of the interaction functionality seems to be largely built-in and unlocked with relatively simply commands.

Describe their trade-offs:

Pros:

User interactions are at least 2x as fast as D3.

The high level syntax allows quick development.

This quick development helps with exploration where fast iteration is needed.

Cons:

The syntax is very specific to Vega-lite so there is a high learning curve.

Difficult to impossible to customize or tie into existing systems (for example D3 visualizations could be attached to server side events or time but, it seems that Vega-lite can not).

###DVMS

How do they model (interactive) visualizations?

DVMS displays the results of database queries. It delivers the data directly from a database with out another program(s) in between. The controls are essentially nested database queries. There is a two step process of the paper.

User maps data to objects.

A compilation step of mapping objects to relational algebra.

Describe their trade-offs:

Pros:

The DB Query approach would lead to knowledge reuse for those used to databases.

Does't assume all results can be stored in memory.

The declarative style is efficient allow for faster iteration.

Brushing interactions work "automatically".

Can warn users about slow/costly queries.

Cons:

Similar to Vega-lite, the syntax is very specific to DVMS so there is a high learning curve. Especially for those unfamiliar with database queries.

Seem difficult to customize or tie into other systems (for example D3 visualizations could be attached to server side events or time but, it seems that Vega-lite can not).

gr2547 Gabriel Ryan

D3:

How do they model interactive visualizations?

D3 = Data driven documents. Uses document based model, bind data to document elements and apply transforms to generate and modify content. Somewhat similar to jquery, however in addition to modifying existing elements also enables creation of new elements for visualizing data.

Describe trade-offs:

pros:

Developer has greater control over visualizations

Elements have built in dependency info allowing more efficient rendering of changes

Part of web development framework, web developers can seamlessly add it to website

cons:

More effort/ higher learning curve then toolkit with more abstractions

following svg standard can result in more verbose descriptions

Vega-Lite:

How do they model interactive visualizations?

Combine traditional graphical grammar describing how data is composed and displayed with grammar describing interaction. Intended as a high level visualization for exploratory visualation that favors conciseness over expressivity. Vega-lite spec is in json, which can generated from any language.

DVMS:

lacking flexibility of d3 and other lower level specification languages

##gf2308 Gal Levy-Fix
D3 models interactive visualizations through transforming document object model based on data. Instead of providing a new proprietary framework for all features, D3 uses the existing capabilities of web standards such as HTML, SVG, and CSS. D3 resembles some low-level libraries since the document model directly specifies graphical primitive but also allows for high-level capabilities through helper modules. It being web based trades off optimization power that compiled languages have for greater accessibility and lower overhead. Leveraging existing web standards may reduce efficiency but can cut down on the learning curve of learning a new representation.

Vega-lite models interactive visualization by combining graphics grammar with a new interaction grammar. The language is meant to provide a high level language for interactivity with enough precision and flexibility that normally is only available in low level languages like Vega and D3. The language is extended to include algebra to combine single view Vega-Lite specifications to multi-view displays. Vega-lite is also extended to include high-level interaction grammar through selections and operators to transform selections for increased expressivity. Vega-Lite tradeoffs some expressiveness associated with a low-level language for gains in the conciseness and clarity of specification associated with a high-level language.

##fp2358 Fei Peng
###D3
D3 uses document object model(DOM) as the representation of data and enables direct inspection and operation upon it. The data users can write programs modifying DOM using API provided by D3 to conduct transformation or displaying in graph with low-level libraries. D3 supports several W3C API to access DOM but also includes special operators like data to enable extra functions.

pros:

provide flexible and friendly programming interface because its grammar is similar to that of javascript.

take advantage of modern browsers that support many graphical tools to enable better display performance.

high efficiency: less page load time and more frame rate

cons:

users need to have extra knowledge of how the data are represented over the encapsulation of DOM

hard to use for users who are not familiar with Javascript or programming

###Vega-lite
Vega-lite provides high-level language to express the operation and transformation that users wish to conduct upon data. The format of Vega-lite codes is similar to json which is commonly used in data analysis. Vega-lite includes several primitives like selection, filter and proves that these components are sufficient to express common interactive data operations.

pros:

high ability of expressiveness and suitable for exploratory visualization

enable search and inference over data

provide really friendly interface, even users unfamiliar with programming can use it

cons:

data that are computed during compile-time cannot be interactively modified

the expressiveness of Vega-lite is not complete. It only supports common operations and cannot work in complicated scenarios since it needs to guarantee conciseness.

##rz2361 Rong Zhou
###D3
D3 applies traditional document-object-model (DOM) in HTML and uses declarative, domain specific language for data visualizations on the web. Compare with other web lower-level graphic libraries, D3 is simpler to use, and it also includes modules to better help the layout and scales of data visualization.

pros:

There is no extra toolkit-specific lexicon of graphical marks, which is easier for web developers to play with.

Browser-frame visualization can still be slower than Flash-based frame when the data size increases.

###Vega-lite
Vega-Lite applies grammar-based language and maintains interactivity for visualization compared with other higher-level languages. Vega-Lite uses JSON, and its compiler can output a lower-level Vega language for broader range of use and various languages. Vega-Lite also uniquely introduces view composition algebra for composite views and nested views in data visualizations. Although it lacks expressiveness compared with Vega, it can provide much more clear specifications.

Interactive components cannot be customized or refined once it is compiled.

##jz2793 Jiajun Zhang

###D3

How to model visualization?
D3 uses the standard document object model (DOM), by which you can bind input data to document elements. Thanks to the web techniques, it can make visualization by defining/maintaining/changing the styles of the elements.
Since the document object supports event listener, scene-graphs are changed when needed and the web to display it. This leads to interaction.

D3 is more powerful and compatible to javascript, as its immediate evaluation reduces internal control flow.

Convenient. No need to redraw. More flexible.

cons:

Browsers may need to make more efforts to cover in improving of SVG. Because flash has greater frame rates.

###Vega-lite

How to model visualization?

Vega-Lite is more general, higher level interactive data visualization. It has a new algebra, along with a bunch of operators to make view display.
After the visual encodings, interaction design is composed of selections(queries), as well as the operators for transactions of selections, which is triggered by events.
It seems a high level language rather than methods/algorithms dealing with data.

pros:

With a hight level specification, it makes common methods and custom techniques more concisely described.

Easy to find out an alternative design.

cons:

Version in the paper cannot handle interactions with selections which need compiling.
Less expressive.

te2245 Tom Effland

D3

How do they model (interactive) visualizations?

D3 directly maps arbitrary data objects to DOM objects in the browser using "bindings". DOM elements can be selected via "selections" and manipulated by "transformations". Transformations can be computed as functions of the bound data via left, inner, and outer joins of the selections and bound data.

Instead of using an internal scene-graph, D3 treats the DOM as the scene-graph. Thus elements and styling are inherited directly from web standards like CSS and SVG.

Describe their trade-offs:

Pros:

Sidestepping internal scene-graph allows for greater transparency and support -- developers do not need to learn the specific semantics of encapsulation to debug visualizations or author new primitives. Instead they can use web-standards they already know (and are well documented.)

Immediate execution allows for efficiency gains without the need for internal dependency bookkeeping

By just targeting data-DOM binding and related subtasks, D3 is less monolithic and benefits from modular support/improvements in web standards without needed internal upkeep

Cons:

Low-level of abstraction makes development of visualizations without decent prior knowledge of web development and standards have a steep learning curve

Vega-Lite

How do they model (interactive) visualizations?

Visualizations are specified via a high-level JSON description. Charts are broken down to core visual "units", then can be composed and nested with interactive links over selections and transformations using an "interaction" grammar. The resulting specifications are compiled to Vega specifications where they are then rendered using Vega.

Describe their trade-offs:

Pros:

Allows for rapid iteration of visualizations using high-level grammar

At least 2x faster interaction speeds compared to D3

Cons:

Specifications are specific to Vega/Vega-Lite, so has high learning-curve

az2407 Alireza Zareian

D3

How do they model (interactive) visualizations?

D3 has a simple yet effective model. It provides a selection operation to select different elements from the HTML, and then allows to bind a specific data source to it. It then adds event listeners and animated transitions on top of it to provide a low-level yet easy to use tool to visualize almost everything.

Describe their trade-offs:

Pros:

It is very powerful and flexible since you can bind any data to any type of element and make any type of transformation. It is not just limited to a specific set of visualizations

It is web-based, so can be used easily in web applications and is also multi-platform.

The syntax is javascript, so familiar for most developers

The architecture is very simple to learn and use

Cons:

It is low-level so in some simple applications it requires relatively high effort

It might not be as fast and reliable as alternatives which are implemented using static languages and optimized for a specific platform.

Vega-lite

How do they model (interactive) visualizations?

Vega-lite is a heavier architecture than D3. It consists of two grammars, one for graphics in general and one for interaction. The graphics grammar, unlike D3, it has a very specific and sophisticated grammar. Visualization modules have been pre-defined, and the user only uses them as building blocks to build the desired visualization. Layer, concatenation, facet, and repeat operations can arrange data points (units) in many possible forms, just by defining them with proper parameters. The interaction grammar is also more sophisticated than D3. In D3, the interaction is through event listener, and developers should write their own functions to handle each event. In Vega-Lite however, there are built-in features to let users select sets of units and perform predefined operations such as toggle, translate, and zoom on them.

Describe their trade-offs:

Pros:

If someone learns Vega-Lite, it is faster to make visualizations using Vega-Lite, since it provides larger building blocks

It has been optimized for visualization, so it is probably faster than D3.

It is specifically designed for interactivity. Hence, it is easier to implement interactive visualizations on it.

Cons:

It is not as flexible as D3. The syntax is descriptive versus procedural, which means developers cannot do whatever they want in sequences of operations. They can only describe how they want different modules of connected to form a limited number of pre-defined interfaces

It is not multi-platform and portable like D3 is.

sh3266 Daniel Hong

D3

How do they model (interactive) visualizations?

D3 advocates the document object model which combines HTML, CSS, JavaScript, SVG technologies for visualization rather than introducing a toolkits with custom frameworks. D3 is a domain-specific language that depends on the web rather than being a custom toolkit. Visualizations are conducted by binding input data to document elements that are appropriately dynamically transformed.

Describe their trade-offs:

Pros:

Toolkits incur a high opportunity cost of expressiveness

Internal structures are exposed only when errors arise

Runtime overhead is reduced

Developers' knowledge of standards are leveraged

Cons:

Custom toolkits may be more efficient and easier for quick development

Developers may be more familiar with existing models

Vega-lite

How do they model (interactive) visualizations?

Vega-lite makes distinctions between explanatory and exploratory, and conciseness and expressiveness. Vega-lite is a high-level grammar that supports multi-view data displays through multiple operations and enables improved interactivity that allows analysts to highlight visual elements and materialize the selected dataset. Low level flexibility available in Vega and transformation of selections adds expressibility.

Describe their trade-offs:

Pros:

Vega-lite is consciously designed to favor conciseness over expressiveness

Improved support for interactivity even with high-level grammar

"toggle" and "project" transform selected data

Cons:

Relatively limited flexibility compared to low level grammar

Suitable for projects such as the Voyager but difficult for complex expressive analytics

lw2666 Luren Wang

D3

How do they model (interactive) visualizations?

Instead of defining its own standard, D3 follows the web standard. Thus, D3 frees the user from having to be tied to a specific framework. D3 allows the binding of data to the DOM and the creation of "data-driven" transformations to the document. It does this by making use of standards such as SVG, HTML5, and CSS.

Describe their trade-offs:

Pros:

Adherence to web standards ensure that users do not have to learn framework specific features.

Debugging is made easier due to web standard.

Compared to other visualization libraries such as Bokeh, D3 allows the user to have more control.

Unopiniated and fast performance

Cons:

Unlike Bokeh, more lines of code is needed to make the same visualizations.

Unopiniated means less abstraction for the users.

Vega-lite

How do they model (interactive) visualizations?

Vega-lite, unlike D3, is opiniated and is intended to be a high-level visualization grammar. Its grammar
is composed of rules which describes the graphics and the interactions between graphics. Vega-lite provides
JSON syntax to interoperability.In order to maintain expressive interaction methods despite it being a high-level specification, Vega-lite introduces an algebriac system to compose single-view specifications into multi-view displays using operations such as layer, concatenate, facet, and repeat.

Describe their trade-offs:

Pros:

High-level grammar with expressiveness.

Suitable for exploration.

Faster interaction speeds when compared to D3.

Cons:

Unlike D3, which is unopiniated, Vega-lite's grammar is one other thing that the user must learn.