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

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

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

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

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

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

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

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

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

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

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