Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tgdwyer/webcola

Javascript constraint-based graph layout
https://github.com/tgdwyer/webcola

Last synced: about 1 month ago
JSON representation

Javascript constraint-based graph layout

Awesome Lists containing this project

README

        

WebCola [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
=======

JavaScript constraint based layout for high-quality graph visualization and exploration
using D3.js and other web-based graphics libraries.



Graph with simple groups


Graph with alignment constraints

[Homepage with code and more examples](http://marvl.infotech.monash.edu/webcola)

Note: While D3 adaptor supports both D3 v3 and D3 v4, WebCoLa's interface is styled like D3 v3. Follow the setup in our homepage for more details.

Installation
------------

#### Browser:
```html

```

The minified version can also be accessed from [jsDelivr](https://cdn.jsdelivr.net/gh/tgdwyer/WebCola/WebCola/cola.min.js).

#### Npm:

npm install webcola --save

You can also install it through npm by first adding it to `package.json`:

"dependencies": {
"webcola": "latest"
}
Then by running `npm install`.

#### Bower:

bower install webcola --save

If you use TypeScript, you can get complete TypeScript definitions by installing [tsd 0.6](https://github.com/DefinitelyTyped/tsd) and running `tsd link`.

Building
--------

*Linux/Mac/Windows Command Line:*

- install [node.js](http://nodejs.org)

- from the WebCola directory:

npm install

- build, minify and test:

npm run build
npm run test

This creates the `cola.js` and `cola.min.js` files in the `dist` directory and runs tests.

*Visual Studio:*

- get the [typescript plugin](http://www.typescriptlang.org/#Download)
- open webcola.sln

Running
-------

*Linux/Mac/Windows Command Line:*

Install the Node.js http-server module:

npm install -g http-server

After installing http-server, we can serve out the example content in the WebCola directory.

npm run website
http-server website

The default configuration of http-server will serve the exampes on [http://localhost:8080](http://localhost:8080).