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.

• Host: GitHub
• URL: https://github.com/codeout/inet-henge
• Owner: codeout
• License: mit
• Created: 2016-06-14T12:04:06.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2024-08-27T05:14:14.000Z (3 months ago)
• Last Synced: 2024-09-27T16:17:46.683Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 4.63 MB
• Stars: 257
• Watchers: 28
• Forks: 38
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

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");