demo D309
A network drawn as your network
A glyph per device where you put it, every circuit its own line coloured by the rule on the column, and a click that ties a line back to its row
nodes: [{ id, label, icon, x, y }]
The office network drawn the way a network team draws it: a glyph per device in the place you put it, and one line per circuit coloured by how much headroom it has left. Click a line to find its row, or a device to find everything plugged into it.
Devices where you put them, drawn as what they are
A generic graph settles wherever the maths takes it and draws every device as the same circle, which is how a network you know well arrives as a diagram you cannot read.
Name the devices instead. Each one takes a glyph from the icon set the grid already holds, so a router looks like a router and a server looks like a server, and each one takes a position given as a fraction of the plot, so the edge router sits at the top, the switches sit under it and the racks sit under those. Pinning one device never reshuffles the rest. A device you name that appears in no circuit is still drawn, because a box with nothing plugged into it is worth seeing.
Every circuit stays its own reading
Two circuits between the same pair used to be added together, which produced a number nothing measures: a pair of links at seventy per cent is not one link at a hundred and forty.
Here they are drawn side by side, in row order, each with its own value, its own colour and its own tooltip, and the pointer picks out the line you are actually over. The colours come from the utilisation rules on the column, so the cell in the table and the line on the diagram can never disagree, and the legend names the rules that fired. Select a line and the table jumps to that circuit; select a device and every circuit it terminates lights up while the rest dim.
How do I draw my own devices on a network chart?
Give the chart nodes: [{ id, label, icon, x, y }]. The id matches the value in your source and target columns, icon is any name in the grid’s icon set (a built-in, or one you registered), and x and y are fractions of the plot that pin the device there. Colour comes from the conditional-formatting rules on the value column, so there is nothing to configure twice; linkWidth fixes the stroke width where you do not want it to follow the value, and selection: true wires clicks on lines and devices to the rows behind them.