Graph-art NPM | npm.io

graph-art

This project generates a visualisation of a graph everytime you refresh the page. You can add and remove nodes by interacting with the canvas.

The color of the joint between two nodes is a 50/50 blend of the 2 node colors.

The number of generated nodes when instantiated is calculated from the width and height of the canvas and capped at a limit of to prevent lagging. This limit is set to 100 by default, but can be changed via the config settings.

Setup

The instantiation of the graph canvas accepts a config file with default options when no options are given.

Config settings

width: canvas width in pixels ( required)
height: canvas height in pixels ( required )

Optional

colors: an array of HSB colors ( example: [194, 100, 10] )
nodeRadius: radius of the node in pixels. Default: 6
nodeLimit: limit of nodes to render at first time in numbers. Default: 100
nodeConnectionCap: limit of connections each node accepts when rendering. Default: 4.
distanceCap: limit distance to other nodes to accept connections from in pixels. Default: 140.

{
    "width": 500,
    "height": 500,
    "colors":
    [
        [194, 100, 10],
        [169, 100, 45],
        [181, 93, 59],
        [159, 29, 83]
    ],
    "nodeRadius": 6,
    "nodeLimit": 100,
    "nodeConnectionCap": 4,
    "distanceCap": 150
}

Instantiate a new graph visualisation by calling new GraphCanvas(configObject).