Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patrickfuller/jgraph
An embeddable webGL graph visualization library.
https://github.com/patrickfuller/jgraph
Last synced: 3 months ago
JSON representation
An embeddable webGL graph visualization library.
- Host: GitHub
- URL: https://github.com/patrickfuller/jgraph
- Owner: patrickfuller
- License: mit
- Created: 2013-02-07T17:29:19.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2018-06-10T08:50:44.000Z (over 6 years ago)
- Last Synced: 2024-05-22T12:05:45.439Z (8 months ago)
- Language: JavaScript
- Homepage: http://patrickfuller.github.io/jgraph
- Size: 1.68 MB
- Stars: 133
- Watchers: 12
- Forks: 31
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-starred - patrickfuller/jgraph - An embeddable webGL graph visualization library. (others)
README
jgraph
======
An embeddable webGL graph visualization library.
http://patrickfuller.github.io/jgraph/
Examples
========
* [IPython notebook](http://patrickfuller.github.io/jgraph/examples/ipython.html)
* [les misérables](http://patrickfuller.github.io/jgraph/examples/miserables.html)
* [github connections](http://patrickfuller.github.io/jgraph/examples/github.html)
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:
```python
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](http://patrickfuller.github.io/jgraph/examples/ipython.html) for more.
Javascript
==========
You can install through [npm](https://www.npmjs.com/):
```
npm install jgraph
```
Once installed, you can use with:
```javascript
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.
```javascript
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:
```javascript
{
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.
```javascript
{
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.