Demo: https://dumn.herokuapp.com
Documentation: https://dumn.herokuapp.com/pages/docs/index.html
To use the API, add the following to your HTML header:
<script defer type="text/javascript" src="https://dumn.herokuapp.com/dumn.js"></script>
To use the API, you need to create a canvas
element with a unique ID. You will be generating all the graphs on your own canvas element.
An example:
<canvas id="myCanvas"></canvas>
In your script file, you can pass the following options to the API and generate a graph:
networkSize
: size of the graph you want to generate. Here the size refers to the number of nodes.nodeSize
: size of each node within your graph.canvasId
: id of thecanvas
element. In the example above, the id ismyCanvas
.color
: the graph will be generated in this color. The color can be either names (e.g.black
,red
) or HEX code (e.g.#F0F0F0
). If you enter an invalid color or not entering color at all, the graph will be generated in black by default.
After the options are all set, generate the graph by calling nnGenerator(options)
. An example usage:
// An example option
options = {"networkSize": 10, "nodeSize": 50, "canvasId": "myCanvas", "color": "black"}
nnGenerator(options)
To add edges to the graph,
edges
: the edges within the graph. For example, to include edges (1, 3) and (2, 3), the edges will be
edges = [
{ v1: 1, v2: 3 },
{ v1: 2, v2: 3 }
]
where v1
and v2
are the labels of nodes (see demo for example of node labelling).
In your own canvas,you will be able to drag the nodes around using mouse (see demo for an interactive use). Additionally, the generated graph can be directly saved as an image file.
To run demo locally, run the following commands:
$ npm install
$ node server.js
dumn-docs/ # The documentations.
pub/
pages/
... # The demo files
dumn.js # The main API
package.json # Dependencies
... # Other files