AlgorithmX is an event-driven network visualization library, built on top of D3 and WebCola. It can be used to create interactive networks and animated algorithm simulations.
Browser
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://ialab.it.monash.edu/webcola/cola.min.js"></script>
<script src="https://unpkg.com/algorithmx"></script>
This will expose a global algorithmx
variable.
Module
Run npm install algorithmx
. AlgorithmX is written in TypeScript, and comes with complete type definitions.
To import the library in in a TypeScript or ES6 JavaScript project:
import { createCanvas } from 'algorithmx';
// select a div with id 'output' for rendering the network
const canvas = createCanvas('output');
// add three blue nodes
canvas.nodes(['A', 'B', 'C']).add().color('blue');
// add an edge
canvas.edge(['A', 'C']).add();
// pause for half a second
canvas.pause(0.5);
// temporarily make node 'B' 1.5 times as large
canvas.node('B').highlight().size('1.5x');