Interactive SVG Data Visualization with Directed Graphs

1. SVG Graph Browsers Data Visualization and Exploration With Directed Graphs in SVG

2. The Challenges • Need to cope with large amounts of data • Need for systematic controls on business or project procedures • Need to author relationship documents of various types • Desire for a minimum set of simple interface mechanisms to accomplish as many goals as possible

3. Node-Edge Graph • Node • Representative of an entity or process • Depicted as an icon or shape • Edge • Representative of a relationship between entities or processes • Depicted as a line between Nodes • Might be weighted or directional • Can represent complex relationships of data that cannot be depicted in a tree

4. Types of Data Sources • RDF • Given the subject-predicate-object nature of RDF, this is an ideal match for graphs • Demands an directed graph • XML • Can be bi-directional • Must establish a strict schema to show relationships • Not always ideal for all XML domains • Tree structure not always very rich • SQL • Must represent dependencies between tables/rows • Typically, an entity will be a row, and an edge will be an external key, but it will not always be so easy with complex datatypes • Easiest if parsed into an intermediary format, such as RDF or XML

5. Layout and Distribution Strategies • Traditional graph layouts seek to avoid overlap of nodes or edges • Spring layout • Tree/hierarchical layout • Customized layouts based on novel features • Clustering • types of nodes • relationships between nodes • Emphasis or hiding of nodes • Mathematical Idea vs. Pragmatism • Purity must be compromised in order to achieve clarity and simplicity of presentation

6. Node Properties Wide variety of entities to depict • Shapes • Uniform shape (all circles or squares) • Traditional flowchart or org chart symbols • Often contain text • True Representation • Pictures, Text • Shows the thing itself • Icons • Symbolic of entity type • Differentiated by various styles: size, color, features • Often has label • Widgets • Contain functional controls for interactivity • Best used when entities are all of the same type

7. Edge Properties There are various ways to depict edges, with different style possibilities to emphasize nature of the relationship • Straight Lines • Dashed, thickness, color-coding, etc. • Arrows indicating directionality • Markers and labels • Arcs • uses sophisticated intersection avoidance for clarity • can be computationally expensive, or even impossible • Best used when there are few connections • Encompassing sets • Borders drawn around related nodes • Proximity and distance • Implicit relationships • May or may not show lines

8. Animation • Visual appeal • Can show temporal properties • Growth • Shifting of resources • Danger of hiding true nature of data

9. Interactivity • Navigation • Static graph vs. Graph as interface • Text queries • Retrieve data from external source • Search for data within current datasource • Allows user to take over placement of nodes for aesthetic or organizational appeal • Allows user to find out more information than is available at first glance • Mouseover bubbles • Walking data (drilling down) on nodes or edges • Can use organization of graph as search criteria

10. Authoring Interactive graphs allow for novel authoring possibilities • Draw relationship edges between existing nodes • Restrict relationships based on established criteria • Component-based • Save as stand-alone documents or as updates to referenced data sources

11. Existing Implementations • Jim Ley’s FOAFNaut • Single node type • Single edge type • Spring layout • Draggable nodes • Widget nodes • Kevin Lindsey’s DAG Filters • Different node types • Widget nodes • Conventionalized connectors • Allows live creation of SVG filters • Law Enforcement Demo • Directed graph, document-centric • Various icons and entity types (including photos) • Edge types depicted as colors • Mouseover data • Walking the data