Network Monitoring Demo
This demo shows a basic network monitoring tool. Watch the traffic flowing through the
network.
The network consists of PCs, Laptops, Tablets, Servers, Databases and Routers. The color
of a connection depicts its traffic load and changes from green to yellow to red. The
traffic load of a node is shown on its control panel pop-up.
The bar charts in the node popups are created using
D3.js.
Things to Try
Show/Hide Node Control Panel
Every node has a control panel that shows its name, IP address and traffic load. You can
show this panel by clicking on the node. Close the panel by clicking on the empty canvas
area, or open the panel of another node.
(De)activate Nodes
The control panel contains a power button that turns a node on and off. Deactivated nodes
do not process data. This way you can influence the data flow and watch what happens when
nodes fail.
Enable Failures
When enabled, nodes and edges fail randomly and cannot process data anymore. Broken
elements are marked with a stop sign. If a failure happens outside the current viewport,
the viewport will focus on the broken element.
Repair Failures
You can repair a failed element by clicking it.
Mouse Interaction
Mouse wheel
Changes the zoom level of the view.
Left mouse drag
Moves the diagram within the view.
Clicking a node
Opens the control panel for that node.
Hover over a node or an edge
Shows the load of that element.
Hover over a load indicator in the control panel
Shows the load of that node.
Clicking a broken node or edge
Repairs that element.