Skip to main content

more diagrams

glint-chord-diagram​

The glint-chord-diagram visualizes a graph's nodes arranged in a circle. Connections between nodes are shown as chords or lines within the circle. This diagram is particularly effective for showing relationships and dependencies between groups. Nodes can be organized into subgraphs, ensuring they are placed together on the circle.

Inputs​

  • graph: An instance of Graph<ChordNode, ChordLink>.
  • maxDepth (Number): When defined, nodes that are found deeper than this value are grouped, and their connections are shown as a ribbon rather than a single line.

glint-force-directed-diagram​

The glint-force-directed-diagram (FDD) represents a graph as a system of nodes and links influenced by simulated physical forces. Connected nodes are pulled toward each other, while unconnected nodes are pushed apart. This creates a clear visual representation of node clusters and relationships. Users can interact with the diagram by dragging nodes to see how connected elements are affected.

Inputs​

  • graph: An instance of Graph<SimulationNode, SimulationLink>.
  • simulationOffset (Number): Skips ahead a specified number of simulation iterations, allowing you to load the diagram in a more stable state.
  • alphaDecay (Number, 0-1): Controls the rate at which the simulation "cools down" and stabilizes. A higher value results in faster stabilization.
  • logarithmicSize (Boolean): If true, the size of nodes is scaled logarithmically. This is useful for graphs where node sizes vary significantly in magnitude.
  • stickyNodes (Boolean): If true, nodes will remain in their new position after a user drags and releases them.

glint-treemap-diagram​

The glint-treemap-diagram represents hierarchical data using a series of nested rectangles. The size of each rectangle is proportional to the value of the node it represents, providing an effective visual comparison of node sizes. Top-level (root) nodes are assigned different colors to distinguish their sub-trees.

Inputs​

  • model: A TreemapNode instance that serves as the root of the data.
  • flat (Boolean): When true, the diagram displays only the leaf nodes. When false, it shows the full hierarchy as stacks of rectangles.