Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/codeout/inet-henge

Generate d3.js based Network Diagram from JSON data.
https://github.com/codeout/inet-henge

Last synced: 22 days ago
JSON representation

Generate d3.js based Network Diagram from JSON data.

Awesome Lists containing this project

README

        

# inet-henge.js

inet-henge.js generates d3.js based Auto Layout Network Diagram from JSON data.
inet-henge helps you draw it by calculating coordinates automatically, placing nodes and links in SVG format.

Each object is draggable and zoomable.

![stone-henge](https://c3.staticflickr.com/6/5480/11307043746_b3b36ccf34_h.jpg)

All you have to do are:

1. Define nodes identified by name
2. Define links by specifying both end nodes
3. Show in a browser. That's it.

JSON example:

```json
{
"nodes": [
{ "name": "A" },
{ "name": "B" }
],

"links": [
{ "source": "A", "target": "B" }
]
}
```

## Getting Started

```zsh
npm install inet-henge

# or

git clone https://github.com/codeout/inet-henge.git
```

Then host the root directory in your favorite web server.

```
ruby -run -e httpd . -p 8000
```

Now you can see `http://localhost:8000/example`.

```
python -m SimpleHTTPServer # python2
python -m http.server # python3

or

php -S 127.0.0.1:8000
```

are also available to start a web server.

## Demo

- [Shownet 2017 Network](https://codeout.github.io/inet-henge/shownet2017.html)
- [Shownet 2016 Network](https://codeout.github.io/inet-henge/shownet2016.html)

## Usage

In example [here](example/shownet.html), load related assets at first:

- d3.js v3
- cola.js
- :warning: **It doesn't support d3.js v4** :warning:
- inet-henge.js

```html







```

define a blank container:

```html

```

and render your network diagram:

```html

new Diagram("#diagram", "shownet.json").init("interface");

```

Object is also acceptable:

```html

const data = {
"nodes": [{ "name": "A" }, { "name": "B" }],
"links": [{ "source": "A", "target": "B" }]
};
new Diagram("#diagram", data).init("interface");