Data Visualization and Exploration With Directed Graphs in SVG

This is a survey of methods and client-side or n-tier applications for displaying data with directed (node-edge) graphs using SVG. This will focus on existing applications, including one by the presenter, and on the problems and solutions of various datasets, such as XML, RDF, and SQL.

Layout and Distributions Strategies

Nodes may have layout based on relationships between nodes, types of nodes, or simple overlap avoidance.

Edges (the lines connecting nodes) may be simple lines between nodes, or use sophisticated intersection avoidance; both strategies have advantages and costs.

Interaction and animation (time-based rendering) impose different constraints on layout strategy than static depiction of data. Another factor is adherence to a formal layout structure versus a more intuitive presentational one.

Data Modeling

Nodes and/or edges may be of the same type or different types. In the circumstance where all nodes are of the same type, they are treated normally as peers, and edges describing the nature of the relationship are more important. Where nodes are of different types, certain types typically have inherent or user-chosen priorities, which can drastically affect the layout and presentation.

Data hiding and clustering allow the user to more efficiently comprehend complex datasets. Clustering can be mere placement of nodes or batching of nodes into a collection-node.

Nodes can depict data types with a variety of techniques, including styling attributes such as colors, size, or icon. Edges can also display information using arrows, markers, colors, dashes, or other stylistic conventions.

Strong typing and relationship constraints can be represented on nodes by conventionalized complex icons with specific connectors and orthogonal orientations.

User Interaction

Different graphs range in utility from passive browsing of static graphs, to dynamic queries, to authoring.

Navigation is separated into interface navigation and data navigation.

Searching through data can be achieved by string-searches, or selection of criteria from menus. It can do searches based on specific nodes by any given criteria and can be applied to related nodes (such as a search on a person that also searches all sub-node that are clustered around that person). Data-typed edges are also candidates for dynamic searching, returning all results of similar relationship-types.

User exploration of data can be restricted to orientation and expansion/contraction of nodes, or enhanced by non-graph methods, such as mouseover tooltips or opening document nodes in another view.

Technical advantages and disadvantages with using SVG include an inherent hierarchical structure, strict painter's model of rendering, rich styling, advanced text handling, DOM scripting, and Web-based architecture, among many others.