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

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

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

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.

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)

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

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); })

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

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

Enhance Programmability ???