Bettergraphs NPM

BetterGraphs

A library for visualizing graph theory concepts.

How to use

Step 1 - Import the library

Import D3.js

<script src="https://d3js.org/d3.v6.min.js"></script>

Import BetterGraphs

<script src="https://unpkg.com/bettergraphs/dist/index.js"></script>

Step 2 - Create a graph object

const graph = betterGraphs.graph(divId);

Where div is an id tag of the HTML <div></div> you want to render the graph in.

Step 3 - Call methods

Use the object you declared to call functions.

NOTE: All animationDuration arguments are in milliseconds. If you want an animation to take 1 sec pass in 1000.

# graph.load(graph)

// graph.load() example
graph.load(
  {
    nodes: [
      {id: 1, label: "1"},
      {id: 2, label: "2"},
      {id: 3, label: "3"}
    ],
    links: [
      {source: 1, target: 2},
      {source: 1, target: 3}
    ]
  }
)

# graph.changeVerticesColor(string[], string, number)

First argument is a string array of the vertices you want to color. Second argument is the color you want. Third argument is animation duration.

// changeVerticesColor() example
graph.changeVerticesColor(["1", "2"], "red", 1000);

# graph.changeEdgesColor(string, string, number)

First argument is 2d array of strings array of the edges you want to color. Second argument is the color you want. Third argument is animation duration.

// changeEdgesColor() example
graph.changeEdgesColor([["1", "2"], ["1", "3"]], "blue", 1000);

# graph.changeSizeOfVertices(string[], number)

First argument is a string array of the vertices you want to color. Second argument is the radius you want.

// changeSizeOfVertices() example
graph.changeSizeOfVertices(["1", "2"], 25);

# graph.changeSizeOfEdges(string, number)

First argument is a 2d array of strings containing edges. Second argument is the stroke width.

// changeSizeOfEdges() example
graph.changeSizeOfEdges([["1", "2"], ["1", "3"]], 15);

# graph.changeAllVerticesColor(string, number)

First argument is the color you want. Second argument is animation duration.

// changeAllVerticesColor() example
graph.changeAllVerticesColor("red", 2500);

# graph.changeAllEdgesColor(string, number)

First argument is the color you want. Second argument is animation duration.

// changeAllEdgesColor() example
graph.changeAllEdgesColor("pink", 1500);

# graph.removeVertex(string)

First argument is the label of the vertex you want to remove.

// removeVertex() example
graph.removeVertex("1");

# graph.addVertex(string)

First argument is the vertex you want to add (its label).

// addVertex() example
graph.addVertex("4");

# graph.addEdge(string, string)

First argument is one of the endpoints of the edge you want to add. The second argument is the other endpoint.

// addEdge() example
graph.addEdge("4", "1");

# graph.addHull(string[])

An array of vertices you want a blob around.

//  addHull() example
graph.addHull("1", "2");

# graph.removeEdge(string, string)

First argument is one of the endpoints of the edge you want to remove. The second argument is the other endpoint.

// removeEdge() example
graph.removeEdge("1", "2");

# graph.changeLabel(string, string)

First argument is the label you want to change. Second argument is what you want to change the label to.

//  changeLabel() example
graph.changeLabel("4", "b");

# graph.generateRandomGraph(number, number)

First argument is amount of vertices. Second argument is amount of edges.

//  generateRandomGraph() example
graph.generateRandomGraph(10, 10);

# graph.contractEdge(string, string)

First argument is one of the endpoints of the edge you want to contract. The second argument is the other endpoint.

//  generateRandomGraph() example
graph.contractEdge("1", "2");

# graph.curveEdge(string, string)

First argument is one of the endpoints of the edge you want to curve. The second argument is the other endpoint.

//  curveEdge() example
graph.curveEdge("1", "2");

NOTE: When you create your links array for your graph you can alternatively pass in an attribute hasCurve: true.

links: [
  { source: 1, target: 2 },
  { source: 2, target: 3, hasCurve: true}, // Curved link.
]

# graph.colorEdgeOnRightClick(string)

First argument is the color you want the edge to be colored.

//  colorEdgeOnRightClick() example
graph.colorEdgeOnRightClick("pink");

Roadmap

Change color of vertices
Change color of edges
Create edge
Remove edge
create and remove vertices
Labels
Contract edge
Add hull
Generate a random graph
Color subset of vertices
Color subset of edges
Change size of node
Change size of edges
Change edge color by clicking on it
Add live examples of methods
Ability for some edges to be curved
Label pointing to a vertex
Move graph to a specific coordinate
Label pointing to blob
Tooltip to vertex
Tooltip to blob
And re-layouting graphs (user can drag nodes to desired positions and take a snapshot)
Hull tube
Right click edge to change color