COMPONENTS

Graph

Graphs show the interrelations between a collection of items, e.g. people, things, ideas or functions.

Note: Graph component is scheduled to be demised in the GS UI Toolkit and GS Design System. 

graph-intro

The major purpose of graph diagrams is to show interrelations between a collection of items e.g. people, things, ideas or functions. Graph diagrams are made up primarily of geometric shapes (items) connected by lines and arrows (relationships).

graph-anatomy
  1. Node
  2. Label
  3. Connector

Graphs can use circles or rectangles to represent the nodes.

graph-appearance

Chord Network: Ideal to visualize two-way flows between multiple entities. The entities are represented by nodes around a circle connected by arcs representing the relationships or flows.

 

Network: Ideal to visualize interdependent relationships between entities. The entities are represented by nodes and are connected by lines representing the relationships.

 

Mind Map: Ideal to visualize hierarchical relationships between pieces of the whole. The entities are represented by nodes that are sized according to importance.

 

Tree: Ideal to visualize all the possible outcomes of an event. Each branch represents an outcome.

 

Flow: Ideal to visualize a sequence of actions involved in a complex system or activity. They are used to order and give structure to a process.

 

Bracket: Ideal to visualize the relationships between a series of events and outcomes. They are basically two tree diagrams facing each other.

 

Fishbone: Ideal to visualize the causes that contribute to create a specific event. They look like a fish skeleton with lines representing a cause and the head the final event.