graphdrawing-ts

This project is a 1:1 zero-dependency rewrite of PGF's graphdrawing module from lua in TypeScript.

It can be used to create graph layouts at run-time and is useful for applications such as data-structure visualization.

Please note that this package will require a Node.js assert polyfill to run on browsers.

Usage

As an example, here is how to create a directed 3-cycle:

import { useState } from 'react'
import { GraphBuilder, ForceDeclarations, Path } from 'graphdrawing-ts'

const nodeSize = 25
const siblingSep = 20

const builder = new GraphBuilder(ForceDeclarations)

builder
  .pushOption('spring Hu 2006 layout')
  .pushOption('node distance', nodeSize * 3.5)
  .pushOption('sibling sep', siblingSep)

builder.beginGraphDrawingScope().pushLayout()

builder.createVertex("1", undefined, Path.squarePath(nodeSize))
builder.createVertex("2", undefined, Path.squarePath(nodeSize))
builder.createVertex("3", undefined, Path.squarePath(nodeSize))

builder.createEdge("1", "2")
builder.createEdge("1", "3")
builder.createEdge("2", "3")

builder.runGraphDrawingAlgorithm()

const renderedGraph = builder.renderGraph()

The resulting renderedGraph object has the structure:

{
    // ...
    vertices: [
        { name: "1", pos: { x: 0, y: 0 } },
        { name: "2", pos: { x: 0, y: -135.6 } },
        { name: "3", pos: { x: -118.9, y: -67.8 } },
    ]
}

Visually:

As you can see, the vertices have been positioned in a nice way given the graph structure (that is, triangularly).

For more on using the graphdrawing library, see the docs.

For more on implementing a front-end (renderer), check out the react example.

GraphBuilder

This package adds a GraphBuilder class which acts as a wrapper around InterfaceToDisplay, automatically taking care of managing scope height.

Supported Algorithms

• [x] Force
• [x] Trees
• [x] Layered
• [ ] Planar
• [ ] Pedigree
• [ ] Phylogenetics
• [ ] Routing