Skip to content

patrickfuller/jgraph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jgraph

An embeddable webGL graph visualization library. http://patrickfuller.github.io/jgraph/

Examples

IPython

The IPython notebook is an open-source tool poised to replace MATLAB in many applications. As a scientist of sorts, I'm all about it. Therefore, I made handles to use jgraph with the notebook. Install through pip:

pip install jgraph

Open a new notebook and test the setup by typing:

import jgraph
jgraph.draw([(1, 2), (2, 3), (3, 4), (4, 1), (4, 5), (5, 2)])

into a notebook cell. You should get a paddlewheel graph as an output. You can use this in conjunction with other code for educational purposes (try generating a red-black tree!). There are three commands and some optional parameters to check out. Read the docstrings and check out the associated example for more.

Javascript

You can install through npm:

npm install jgraph

Once installed, you can use with:

jgraph.create('my-selector');
jgraph.draw(myGraph);

where 'my-selector' is where you want to place jgraph, and myGraph is a javascript object. See below for more on the object structure, or just check out the included example. The jgraph.create() method takes a few optional parameters, specifying the sizes and colors of nodes, as well as force-directed optimization.

options = {
    directed: true, // Toggles edge arrows
    nodeSize: 2.0, // Default node size
    edgeSize: 0.25, // Edge connection diameter
    arrowSize: 1.0, // If drawn, edge arrow size
    defaultNodeColor: 0xaaaaaa, // Color for nodes without a "color" property
    defaultEdgeColor: 0x777777, // Color for edges without a "color" property
    shader: "toon", // three.js shader to use, can be "toon", "basic", "phong", or "lambert"
    runOptimization: true // Runs a force-directed-layout algorithm on the graph
};

Graph Data Format

jgraph takes input graph data structures as plain objects. Here's the most boring graph in the world:

{
    nodes: {
        jane: { },
        bob: { },
        mike: { },
        sally: { }
    },
    edges: [
        { source: "jane", target: "bob" },
        { source: "bob", target: "mike" },
        { source: "mike", target: "sally" }
    ]
}

Nodes require no information outside of their keys. However, there are useful optional parameters that can be specified.

{
    color: 0xffffff, // Color for this node
    size: 1.0, // Scaling factor for this node's size
    location: [0.0, 0.0, 0.0] // Starting location of node. Useful for pre-rendering.
}

By default, the algorithm runs a force-directed layout on the graph. When enabled, the "location" field is optional. However, for larger graphs, you will want to disable this feature and pre-render the locations. Use the associated Python library (jgraph.generate) to do so.

About

An embeddable webGL graph visualization library.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published