Networks
The network graph draws anything made of links: who works with whom, which accounts pay which, which services call which. Give it nodes and links and it lays them out — as a force layout, a hierarchy that follows the arrows, rings around a centre, a circle or a grid — and keeps the reader's hands on it: drag, pin, zoom, lasso, find.
It also reads the network for you. Communities are found and coloured, the people or accounts that hold it together are measured (links, betweenness, PageRank) and sized, and the shortest path between any two is one key away. A time bar plays the network as it grew; groups combine into one node and open again; nodes with more behind them load it when opened. The overview shows the whole graph small with a box you drag. Everything is drawn in the page, and stays usable at ten thousand nodes and more.
Who works with whom
A company of a hundred and fifty people in six departments, linked by the work they do together. Point at someone to light up their colleagues. Colour by community to see the teams that actually form, size by betweenness to see who joins them up, and ask for the shortest path between any two people.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-select id="nw-layout" label="Layout" value="force" style="inline-size: 10rem">
<bmx-option value="force">Force</bmx-option>
<bmx-option value="radial">Radial</bmx-option>
<bmx-option value="circular">Circular</bmx-option>
<bmx-option value="grid">Grid</bmx-option>
</bmx-select>
<bmx-select id="nw-colour" label="Colour by" value="group" style="inline-size: 13rem">
<bmx-option value="group">Department</bmx-option>
<bmx-option value="community">Community (found)</bmx-option>
<bmx-option value="office">Office</bmx-option>
</bmx-select>
<bmx-select id="nw-size" label="Size by" value="betweenness" style="inline-size: 11rem">
<bmx-option value="betweenness">Betweenness</bmx-option>
<bmx-option value="degree">Links</bmx-option>
<bmx-option value="pagerank">PageRank</bmx-option>
<bmx-option value="none">Same size</bmx-option>
</bmx-select>
<bmx-input id="nw-find" label="Find a person" type="search" placeholder="A name" style="inline-size: 12rem"></bmx-input>
<bmx-graph id="nw-people" color-by="group" size-by="betweenness" selectable="multiple" tooltip-fields="role,office" label="Who works with whom" locale="en-GB" style="inline-size: 100%; --bmx-graph-height: min(34rem, 110vw)"></bmx-graph>
<script>
const graph = document.getElementById('nw-people');
graph.nodes = [ /* your nodes */ ];
</script>
Following the money
Three thousand accounts and a year of payments between them. Drag the time bar's window, or press play to watch the network grow. One group of accounts pays money round in a circle; find it. Accounts marked + have counterparties not yet loaded: double-click one and the page adds them.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-graph id="nw-money" time-bar color-by="community" labels="none" node-size="5" link-distance="36" selectable="multiple" label="Payments between accounts" locale="en-GB" style="--bmx-graph-height: min(30rem, 100vw)"></bmx-graph>
<bmx-graph-overview for="nw-money" label="Overview of the payments network"></bmx-graph-overview>
<script>
const graph = document.getElementById('nw-money');
graph.nodes = [ /* your nodes */ ];
</script>
What breaks if this fails
Services and the services they call, laid out as a hierarchy that follows the arrows. Click a service to choose everything that depends on it, directly or not. Combine the services by team to see the shape of the system, and double-click a team to open it again.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-select id="nw-direction" label="Direction" value="down" style="inline-size: 9rem">
<bmx-option value="down">Down</bmx-option>
<bmx-option value="right">Across</bmx-option>
</bmx-select>
<bmx-graph id="nw-services" layout="hierarchy" directed color-by="team" selectable="multiple" tooltip-fields="team,owner" label="Service dependencies" locale="en-GB" style="inline-size: 100%; --bmx-graph-height: min(28rem, 100vw)"></bmx-graph>
<script>
const graph = document.getElementById('nw-services');
graph.nodes = [ /* your nodes */ ];
</script>
Ten thousand nodes
Ten thousand nodes in twenty-five communities and twelve thousand links, laid out in the page with a Barnes–Hut force layout and drawn on a canvas. You can watch it find its shape. Names appear as you zoom in and there is room for them; the overview keeps you oriented.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-graph id="nw-large" color-by="community" size-by="none" node-size="3" labels="auto" table-view="false" label="A network of ten thousand nodes" locale="en-GB" style="--bmx-graph-height: min(30rem, 100vw)"></bmx-graph>
<bmx-graph-overview for="nw-large" label="Overview of the large network"></bmx-graph-overview>
<script>
const graph = document.getElementById('nw-large');
graph.nodes = [ /* your nodes */ ];
</script>