Network graph
Node-link graph with a deterministic seeded force layout, node size by degree, neighbour highlight, drag to move and a group legend.
Preview
Who works with whom
Shared projects, Q3EngineeringDesignProductDataDrag a node to move it
- Noor, Design: 4 connections (Iris, Yuki, Lena, Theo)
- Theo, Engineering: 6 connections (Noor, Mira, Ade, Kai, Pablo, Lena)
- Mira, Engineering: 4 connections (Theo, Ade, Sana, Femi)
- Ade, Engineering: 3 connections (Theo, Mira, Kai)
- Lena, Product: 5 connections (Noor, Omar, Ruth, Theo, Sana)
- Omar, Product: 3 connections (Iris, Lena, Ruth)
- Iris, Design: 3 connections (Noor, Yuki, Omar)
- Kai, Engineering: 3 connections (Theo, Ade, Pablo)
- Sana, Data: 4 connections (Mira, Jon, Femi, Lena)
- Jon, Data: 3 connections (Sana, Femi, Ruth)
- Ruth, Product: 3 connections (Lena, Omar, Jon)
- Pablo, Engineering: 3 connections (Theo, Kai, Yuki)
- Yuki, Design: 3 connections (Noor, Iris, Pablo)
- Femi, Data: 3 connections (Sana, Jon, Mira)
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | { id: string; label: string; group?: string }[] | — | Nodes; size grows with the number of links. |
| links | { source: string; target: string }[] | — | Undirected links by node id. |
| groups | { key: string; label: string; color?: string }[] | [] | Groups for colour and the legend. |
| label | string | — | Accessible name of the chart. |
| height | number | 380 | Height in px; width follows the container. |
| iterations | number | 300 | Fixed simulation steps, so server and client agree. |
| seed | number | 1 | Seed for the starting positions. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.