Force Directed Graph (FDG)

 

 

Definition

 

A Force Directed Graph is a data visualization Drawing

 

Force Directed Graph or FDG are drawn or produced
by a class of algorithms for drawing graphs for a set of nodes & edges

The intent is to position the nodes of a graph
in a two-dimensional or three-dimensional space
such that all the edges are of equal length
with none or perhaps few crossing edges

This can be achieved by assigning forces
among the set of nodes & edges
based on their relative positions
and hence applying these forces either to
simulate the motion of these nodes & edges

It is a graph that is represented by Force Directed Tree

 

Force Directed Tree

 

🌳
Tree

uses an array of objects as the data
with an assigned value which determines
the size of the node

can be
📍 multi-level  
📍 hierarchical

 

⭕
Nodes

A node is a tree item represented by a circle with an assigned value

Properties

Nodes can have many children & one parent

 

Top-level nodes
originates from the top level of data don't have any parent

 

Fixed Nodes

 

Collapsible Nodes

Nodes can expand or collapse
toggling the visibility of its descendant nodes

 

Values
The value of a node is a sum of values of its children

 

Size
The size of a node depends on its value

The actual size of the node
is calculated in how its value relates to
the maximum value across the entire tree structure

The radius of the circle is controlled by
the settings of the scale of the
smallest, biggest & in-between nodes

 

🎡
SVG

🌄 Images denoting the

⭕ Nodes
👣 Paths

which provide:

Labels

Controls

Toggling

 

🔗
LINKS

 

Definition

Links are defined as connect nodes
to display (complex) relations
between a source and a target
based on the following

Properties

Length

Thickness

Colors

 

🥊
FORCES

Force Directed Graph drawing algorithms assign forces among the set of nodes & edges

        Typically, in graph drawing:

        spring-like attractive forces are based on Hookes Law to
        attract pairs of endpoints of the graph's edges towards each other

        while Coulomb's law defines repulsive forces separating every pair of nodes.

        In equilibrium states:
        the edges tend to have uniform spring-like force for every pair of nodes

        An alternative model considers a spring-like force ∀ pair of nodes (I, j)
        where the ideal length δ(i, j) of each spring is ∝ the graph-theoretic distance
        between nodes (i, j) without using a separate repulsive force.

        Minimizing the difference (usually the squared difference)
        between Euclidean & ideal distances between nodes is equivalent to
        a metric multidimensional scaling problem

 

Forces of Attraction

Visually highlights

📍 Direct neighbors of the clicked node                        
📍 Links connect the clicked node with its neighbors

📍 Edge attraction  
📍 Vertex repulsion

using functions that are not based on
the physical behavior of springs & particles

some force-directed systems use springs
whose attractive force is logarithmic

 

Hookes Law

 

 

Data

 

Types

📍 In-line Data  
📍 ExternalData

Data Fields

Property is a key-value object

key

A Key is a specific structured field
eg value or a name