Visualization Specifications

Luren edited this page Jan 31, 2017 · 25 revisions

Readings:

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.

  1. User maps data to objects.
  2. 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.

pros:

  • concise, common operations 1-2 lines of json
  • allows developer to easily specify how user will interact with chart

cons:

  • limited ability to specify or customize visuals, seems limited to charts

DVMS:

Data visualization management system. Integrate into database so that user visualization code is translated into optimized SQL.

pros:

  • integrated sql generation allows increased performance

cons:

  • 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:

  1. provide flexible and friendly programming interface because its grammar is similar to that of javascript.
  2. take advantage of modern browsers that support many graphical tools to enable better display performance.
  3. high efficiency: less page load time and more frame rate

cons:

  1. users need to have extra knowledge of how the data are represented over the encapsulation of DOM
  2. 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:

  1. high ability of expressiveness and suitable for exploratory visualization
  2. enable search and inference over data
  3. provide really friendly interface, even users unfamiliar with programming can use it

cons:

  1. data that are computed during compile-time cannot be interactively modified
  2. 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.
  • D3's optional modules store reusable results to avoid repetitive and unnecessary computation and make visualization process faster.

cons:

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

pros:

  • Vega-Lite preserves better interactive functionalities compared with other high-level grammar-based languages.
  • It is also more concise and clear than other lower-level languages.

cons:

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

pros:

  1. Dynamic visualizations (specified by transactions) reduce redundancy of computation.
  2. D3 is more powerful and compatible to javascript, as its immediate evaluation reduces internal control flow.
  3. 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:

  1. With a hight level specification, it makes common methods and custom techniques more concisely described.
  2. Easy to find out an alternative design.

cons:

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

yz3060 Ye Zhang

D3

D3 enables designers to bind input data to arbitrary document elements, apply dynamic transforms to both generate and modify content. Immediate evaluation of operators further simplifies debugging and allows iterative development.

D3’s atomic operand is the selection. D3 adopts the W3C Selectors API to identify document elements for selection. Operators act on selections, modifying content.

pros:

Significantly faster page loads.

D3 transforms provide greater scalability

cons:

As the number of data points increases, DS provides lower frame rates than Flash.

Vega-Lite

Vega-Lite combines a traditional grammar of graphics, providing visual encoding rules and a composition algebra for layered and multi-view displays, with a novel grammar of interaction.

First, Vega-Lite composes singleview specifications into multi-view displays via an algebra. Second, with a high-level interaction grammar, an interaction design is composed of selections. Selections parameterize visual encodings by serving as input data.

pros:

Provide more support for interactivity than other high-level languages.

More concise than those of the lower-level Vega language.

cons:

Components that are determined at compile-time cannot be interactively manipulated.

As a higher-level grammar, Vega-Lite favors conciseness over expressivity. Highly specialized techniques cannot be expressed by default.

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
  • High-level model inherently puts limit expressiveness via which primitives are implemented and are composable

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.