patrickfuller/jgraph

An embeddable webGL graph visualization library.

jgraph

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

Examples

• IPython notebook
• les misérables
• github connections

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.

jgraph's Issues

Multiple edges between nodes

Do you have plans to implement multiple edges between nodes?
Right now new edge will overwrite previous.
And this this looks like one edge.
mesh = new THREE.Mesh(self.cylinderGeometry, material);
Looks like we can bend cylinder

Edge properties

From Uros Platise:

I have one Q related to properties: would it be somehow possible to change individually arrow widths between nodes, in my case to represent the 'channel bandwidth' and colors, to depict some other properties of the channel (as missed slots, effective rates, etc.)

Render multiple jgraph views on single page

Is it possible to render multiple jgraph views on one page? For example:

jgraph.create('.graph-left');
$.getJSON('graphs/lesmis.json', function (graph) {
    jgraph.draw(graph);
});

jgraph.create('.graph-right');
$.getJSON('graphs/lesmis.json', function (graph) {
    jgraph.draw(graph);
});

When I run this, the .graph-right div shows a jgraph, but .graph-left does not.

Thanks!

Save graph

Is there an easy way to save a graph while in a notebook? I can't seem to find a method or way in the ipython interface

how to add text to nodes and edges?

I'm working on a project about social network, so I'm wondering is there any way to add text to the nodes and edges?

Real-time updating

From Uros Platise:

This I am curious: in the JS case would it possible to update connections and locations in time? i.e. that JS keeps updating latest changes without 'refreshing' the JS view but while surfing with the camera. My vision is to run on-going simulations and basically I could watch the progress.

library Name is confusing

Hi i looked over your implmentation of graph vizualisation. good job so far

One point , the names you use is very confusing.
Cause you have a package named igraph so a js lib names igraph.
there is also a library in C with python bindings named Igraph
The igraph library for complex network research @ http://igraph.sourceforge.net/‎
It s a great tool that should not be confused with your project .

I ve also made implementation of graph visualisation using three.js as the renderer and only used the Canvas renderer so far .

We also use massivelly the igraph library for graph manipulation before sending the data to the renderer.
we compute our own layout and apply some community detection algorythms on the server side before sending the data to the client

you can see a demo a demo running over a synonyms graph in french , english an mandarin @ http://naviprox.net/tmuse/Wordnet_V?q=level
Use the links at the bottom to switch to the translations graphs or other language.

We also planed to use it with notebook ( which is to me one of the best tool available since years ) i used a forked version of the ipython notebok to include the js libs we wrote. i will take look at your way of embedding the javascript which seems better than i did .

Once again it s a good start, I stay tuned at your project
Ynnk.

Force Directed Layout Restricted to 2D Plane

Is there a way to run the force directed graph layout on a graph but restrict the layout to 2D, say in the x-y plane?

i.e. just the standard layout technique found in other graph plotting packages.

Thanks!

jgraph is not showing on Google Colab

Everything worked on Juypter notebook. But when I tried to run jgraph on Google Colab to share the graph with others, it didn't render.

Incremental addNode() calls

It would be great if you can add incremental addNode function.
Like https://cdn.rawgit.com/frewsxcv/graphosaurus/HEAD/examples/incremental/index.html

Cannot acces to the json from local install

i cloned your repository and just launched chromium-browser index.html from ./examples

Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. file:///home/yk/github/igraph/example/miserables.json XMLHttpRequest cannot load file:///home/yk/github/igraph/example/miserables.json. Origin null is not allowed by Access-Control-Allow-Origin.

Package doesn't build from repo

Running:

pip install git+https://github.com/patrickfuller/jgraph.git

to install from the repo fails in the setup.py:

Collecting git+https://github.com/patrickfuller/jgraph.git
  Cloning https://github.com/patrickfuller/jgraph.git to /private/var/folders/l8/qg6m44156_l6bzv_cbkk7bf00000gn/T/pip-req-build-eu4tacit
    Complete output from command python setup.py egg_info:
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/private/var/folders/l8/qg6m44156_l6bzv_cbkk7bf00000gn/T/pip-req-build-eu4tacit/setup.py", line 2, in <module>
        from python import __version__
      File "/private/var/folders/l8/qg6m44156_l6bzv_cbkk7bf00000gn/T/pip-req-build-eu4tacit/python/__init__.py", line 1, in <module>
        from .notebook import draw, generate, to_json
      File "/private/var/folders/l8/qg6m44156_l6bzv_cbkk7bf00000gn/T/pip-req-build-eu4tacit/python/notebook.py", line 7, in <module>
        from jgraph import force_directed_layout, json_formatter
    ModuleNotFoundError: No module named 'jgraph'

Node name

Hello, how do I make the name Node? As in this example:
http://patrickfuller.github.io/jgraph/examples/github.html

jgraph graphs do not render in Jupiter lab?

I run the example notebook in Jupiter notebook and everything works.

I tried to do the same in jupyter lab but the graphs are not rendered.

Any suggestion please?