1. Direction of refinement – Ideas MEI Honghui 2017/7/1
VisComposer
Direction of refinement – Ideas
MEI Honghui
2017/7/1

2. WHAT has been done An IDE: VisComposer
Interactive design environment with real-time evaluation
Scenegraph
Tree-structure visual representation
Nodes are surrogate objects for display and modification of visual specifications
Workflow
Node-link dataflow system
Drag-n-drop to apply visual binding
Code injection
scenegraph and workflows are translated into JavaScript codes before running by eval

3. Potential refinements of paper
A more solid composition model
A top-down layering model
Related to Tamara’s Nested Process Model
Implement a progressive-multi-level design and creation process
Mechanism to enhance programmability
Writing code
Evaluating code
Highlight relations among data, visual structure, codes, and graphical objects
Audition and interactive/iterative pruning
More detailed evaluation

4. Top-down layering model
Scenegraph  workflow  module  code
Each level has a complete functionality
To be an analogy
Scenegraph: charting software (what the result may be)
Workflow: declarative language (what the result should be)
Module: graphical library (how the result should be computed)
P.S. Declarative languages “specify what the results of a computation should be rather than how the results should be computed” - Jeffrey Heer et.al.*
*J. Heer and M. Bostock, “Declarative Language Design for Interactive Visualization,” IEEE Trans. Vis. Comput. Graph., vol. 16, no. 6, pp. 1149–1156, 2010.

5. Top-down layering model
Node-link graph
Data: hierarchical (JSON)
"nodes":[]
{"name":"Myriel","group":1}
"links":[]
{"source":1,"target":0,"value":1}
Visual encodings
Node
Text: "name"
Color: "group" (cat20)
Font-size: sum of "value" of related links
Link
Length: constant
Width: "value" (custom non-linear mapping)

6. Top-down layering model
Scenegraph
Add data and choose a charting template
Modify data attributes to show and way to encode
Example
Create a node-link graph from scratch
Replace point with text
Modify visual encodings

7. Top-down layering model
Workflow
Drag-n-drop binding of data transformation and visual mapping
Example
Add an custom non-linear mapping of link width
Analogy to D3
.data(link).enter()
.append(d3.svg.line)
.attr('x1',d=>d.source_x).attr(...)
.attr('width',function(d){
return d3.scale.XXX(d.value); })

8. Top-down layering model
Module
Coding for full customization
Example
Writing a custom layout module

9. Top-down layering model
Inter-layer operation
Get back to higher-level
Example
Calculate the sum of values of all related links

10. Enhance Programmability
???