SVG Graph Browsers

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 Leys FOAFNaut
• Single node type
• Single edge type
• Spring layout
• Draggable nodes
• Widget nodes
• Kevin Lindseys 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