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

• [x] Change color of vertices
• [x] Change color of edges
• [x] Create edge
• [x] Remove edge
• [x] create and remove vertices
• [x] Labels
• [x] Contract edge
• [x] Add hull
• [x] Generate a random graph
• [x] Color subset of vertices
• [x] Color subset of edges
• [x] Change size of node
• [x] Change size of edges
• [x] Change edge color by clicking on it
• [ ] Add live examples of methods
• [x] 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
• [x] Right click edge to change color