<figure><img src="image_1.png" /></figure>

HAL
open science

# Technology Review - SketchVis, Vega, and Lyra

Revant Kumar

► To cite this version:

Revant Kumar. Technology Review - SketchVis, Vega, and Lyra. College of Computing, Georgia Institute of Technology, USA. 2015, pp.5. hal-04219642

HAL Id: hal-04219642

https://hal.science/hal-04219642v1

Submitted on 27 Sep 2023

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>

Distributed under a Creative Commons CC BY 4.0 - Attribution - International License
Technology Review
SketchVis, Vega, and Lyra

Revant Kumar

Master of Science in Computer Science
College of Computing, Georgia Institute of Technology, USA
rkumar74@gatech.edu

# 1 SketchVis

## 1.1 Motivation behind SketchVis

* Usually, when people are faced with complex data or problem, they write to work it on whiteboards so that they are able to collaborate, list important questions and sketch simple visualizations.

* However, these visualizations correspond to some underlying data which is present in the computer. Since the sketch is on a whiteboard, the data on the computer cannot be combined with it.

* Thus, this is the motivation behind SketchVis.

* Creators of SketchVis have addressed this problem by extending these sketched whiteboard visualizations with the actual data to be analyzed.

## 1.2 What is SketchVis?

* SketchVis is a proof-of-concept system that leverages hand-drawn input to support exploring data through simple charts.

* The core idea is to augment the initial structure of a bar chart or scatter plot drawn on a whiteboard with simple visualizations of actual underlying data.

* It has combined naturalistic sketch-based interaction and powerful desktop data analysis tools by bringing data to sketched whiteboard visualizations.

## 1.3 Pros of SketchVis

* It enables information exploration and examination in more fluid, natural ways, extending the traditional advantages of the whiteboard.

* By lowering the barrier to creating charts on a whiteboard display, SketchVis allows people to approach the visualization of data sets as an exploration, developing their understanding of their data as they plot a series of charts.

* Some participants found the speed and direct nature of the system's sketch interaction as a great boon. Through its iterative design, SketchVis grew to combine sketched frames and hand written data selections.

## 1.4 Cons of SketchVis

* Not all types of visualizations are currently supported
* Only simple visualizations like bar charts and scatter plots are supported

* During their study, creators of SketchVis found that handwriting-based axis selection is one of the major usability issues was. The participants in the study became frustrated by having to rewrite mis-recognized text, effectively letting the interface get in the way of quickly selecting a new axis to view.

* Eager Recognition property of SketchVis leads to performance degradation. In eager recognition, a data attribute could be recognized from a single letter if no other data attributes start with that letter. However, it was noticed that participants would often change between each letter to see if the writing was recognized. After each letter, the data displayed on the chart might change, possibly distracting our participants.

## 1.5 Further Improvements to SketchVis

* Axis selection that supports the full freedom of input afforded by freehand input could alternatively be accessed through pen-based widgets.

* Problem of Eager Recognition need to be addressed.

* More Charts types such as pie charts, line charts, node-link diagrams need to be supported which will enable richer analysis covering a wider range of data sets.

## 1.6 Other Related Tools/Topics that can be explored

* Graph Sketcher

* NapkinVis

* NiCE

* SketchInsight: http://research.microsoft.com/en-us/um/redmond/groups/cue/sketchinsight/

* SketchStory

## 1.7 References for SketchVis

* http://research.microsoft.com/en-us/um/redmond/groups/cue/publications/its2011-sketchvis.pdf

* Understanding Pen and Touch Interaction for Data Exploration on Interactive Whiteboards

* http://research.microsoft.com/en-us/um/redmond/groups/cue/publications/CGA2013-DEXIS.pdf

* http://research.microsoft.com/en-us/um/redmond/groups/cue/publications/TVCG2013-SketchStory.pdf

* http://research.microsoft.com/en-us/um/redmond/groups/cue/publications/TVCG2012-NaturalInfoVis.pdf

# 2 Lyra

## 2.1 Motivation behind Lyra

* To build an interactive environment for designing customized visualizations without writing code.

## 2.2 What is Lyra?

* Lyra is an interactive design environment for custom visualization that is comparable in expressiveness to programming-based tools.
## 2.3 Pros of Lyra

* With Lyra, designers add graphical marks to a canvas and associate data fields with mark properties. Visual data pipelines enable data transformation and advanced layout algorithms.

* Lyra incorporates familiar interactions found in drawing and diagramming tools: Handles can be used to interactively move, rotate, and resize marks; connectors relatively position marks; and drop zones allow data binding via drag-and-drop.

* By exposing all mark properties as data binding targets, Lyra provides the fine grained control needed to produce unique visualizations.

* Direct manipulation of marks further reduces the articulatory distance for design.

## 2.4 Cons of Lyra

* Vega currently lacks support for polar coordinates. As a result, Lyra cannot (yet) provide arc mark connectors or produce radial axes, making it difficult to recreate classic visualizations such as Nightingale's Rose or Burtin's antibiotics chart.

* Lyra only supports the RGB color space, while Vega also supports HSL, LAB, and HCL

* When users of Lyra missed a drop zone by a few pixels, they expected Lyra to infer their intent.

* When users successfully dropped a field, they would lose track of the currently selected mark if it was repositioned.

* Lyra's lack of support for undo, which led users to become more hesitant to freely explore.

## 2.5 Further Improvements to Lyra

* Increasing the activation area for a drop zone could help to address the issue where users of Lyra missed a drop zone by a few pixels.

* Extension of Lyra's direct manipulation techniques to support other tasks than just com-
posing graphical marks.

* Incorporating the direct manipulation techniques with complex data transformations so that Lyra's data pipelines offer sufficient flexibility to support analytics tasks.

## 2.6 Other Related Tools/Topics that can be explored

* Flare: http://flare.prefuse.org/

* D3.js: http://d3js.org/

* Protovis: http://mbostock.github.io/protovis/

## 2.7 Demo of Lyra

* I have made a bar chart with Lyra using this link. Refer Figure 1 for the bar chart –
http://vallandingham.me/make_a_barchart_with lyra.html

## 2.8 References for Lyra

* http://idl.cs.washington.edu/files/2014-Lyra-EuroVis.pdf

* http://vallandingham.me/make_a_barchart_with lyra.html

* https://github.com/uwdata/lyra

* https://github.com/uwdata/lyra/wiki

* http://thewhyaxis.info/lyra/
<figure><img src="image_3.png" /><figcaption>Figure 1: Bar Chart using Lyra</figcaption></figure>

# 3 Vega

## 3.1 What is Vega?

* Vega is a visualization grammar, a declarative format for creating, saving and sharing visualization designs.

* With Vega, we can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.

* Vega's model of visualization design is intimately influenced by the Protovis and D3 frameworks.

## 3.2 Pros of Vega

* With Vega, we just need to provide a specification which is simply a JSON object that describes a visualization. A specification describes the data sets used, scale transforms and encoding algorithms, axes, and visual marks (rectangles, lines, shapes, etc) whose properties may depend on the data.

* These specifications may be read and interpreted by a runtime system to dynamically create visualizations, or a specification may be cross-compiled to provide a reusable visualization component, in the form of editable code for a specific visualization framework.

## 3.3 Cons of Vega

* For a person without any technical knowledge, Vega will be tough to use for him/her. This because Vega requires the person to enter all the details for the visualization such as datasets, scale transforms, encoding algorithms, axes and visual marks.

* Also, Vega only supports JSON format.
## 3.4 Further Improvements to Vega

* More file supports for the data can be introduced

* The amount of technical knowledge need to be provided by the used needs to be reduced so that the tools become more efficient and user-friendly.

## 3.5 Other Related Tools/Topics that can be explored

* Wilkinson's Grammar of Graphics

* ggplot2: http://ggplot2.org/

* Tableau's VizQL: http://www.tableausoftware.com/products/technology

## 3.6 Demo of Vega

* I have tried their Vega Editor (http://trifacta.github.io/vega/editor/). It seems good. But the problem lies with the data.

* Data needed to be in the proper format (.json) before visualization can be achieved.

* Thus, any person who does not have a technical background or does not have the data in the correct format will have tough time working on Vega.

<figure><img src="image_4.png" /><figcaption>Figure 2: Bar Chart using Vega</figcaption></figure>

## 3.7 References for Vega

* http://trifacta.github.io/vega/

* https://github.com/trifacta/vega

* https://github.com/trifacta/vega/wiki

* https://github.com/trifacta/vega/wiki/Tutorial

* http://vincent.readthedocs.org/en/latest/

* http://bl.ocks.org/weiglemc/6042138