# (Graph|Network) - Visualization

## About

Graph visualization is based on the mathematical theory of networks, graph theory.

## Type

### Circle

- Chord graph. Nodes are place on a circle. Death Star dependency graph
- Radial, diagonal and Dendro Network are tree. Ie Network without cycle.

### Flow

- Sankey diagrams visualize the magnitude of flow between nodes in a network.
- Alluvial diagrams show how network structure changes over time.

## Tool

- Diagram as code - https://mermaidjs.github.io/ - Generation of diagrams and flowcharts from text in a similar manner as markdown. https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid Flowchart
- https://www.yworks.com/ - yeD (YFiles used by JetBrains - 30000 euro)
- Graphviz
- Powerpoint

## Library

### Graphviz - dot

https://graphviz.org/doc/info/lang.html

### Dagre

- Dagre is a Layout computation - https://github.com/dagrejs/dagre - Client side computation layout layer

### D3

- Force-Directed Graph as Forced Directed (Network|Graph)
- https://github.com/nylen/d3-process-map.git - directed acyclic graph - It is designed for illustrating the relationships between objects in a process.

### React Diagram

https://github.com/projectstorm/react-diagrams

### VisjS

Python from http://bl.ocks.org/vardanp91/raw/be0f763405b76d33caefdaebc2ac3487/

```
import visJS2jupyter.visJS_module
import visJS2jupyter.visualizations as visualizations
```

### JGraph

JGraph is a open source graph component that provides functionality for visualisation and interaction with node-edge graphs (not charts). Doc (Doc code)

Library by language:

- Java called JGraphX - Doc
- Javascript called mxGraph - code - Doc and example

### diagram-js

https://github.com/bpmn-io/diagram-js