Vector is an open source javascript library for creating interactive graphics. View the repository, browse the API, run the tests, or meet the team.

Graphs Tutorial

The graph module is used to visualize simple graphs in the form of a node-link diagram. Both directed and undirected graphs are supported. The Reingold-Tilford “Tidy” layout for drawing trees is also supported.

To create a graph, first create an interactive object (link). Then create a graph object as shown below. When doing so, you will specify whether or not it is a directed edge.

let graph = interactive.graph({directed:true});

When creating a node, you can specify position, label, x radius and y radius of the node, which is shown as an ellipse. Label and both radii parameters are optional.

let node = graph.addNode(xPosition, yPosition, label, xRadius, yRadius);
let leaf = graph.addNode(xPosition, yPosition, label, xRadius, yRadius);

When creating an edge, if you are working with an undirected graph, the order of the nodes passed into the constructor does not matter. If it is a directed graph, the edge is created in the order from, to.

let edge = graph.addEdge(nodeFrom, nodeTo);

For more information about the graph class, such as how to move nodes and how to style nodes, feel free to visit our API, watch the simple example video above, or visit our examples and sort by graph to view more complex examples.