Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codeout/inet-henge
Generate d3.js based Network Diagram from JSON data.
https://github.com/codeout/inet-henge
Last synced: 2 months 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 (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-03-11T06:30:16.000Z (4 months ago)
- Last Synced: 2024-04-11T08:21:29.613Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.35 MB
- Stars: 251
- Watchers: 28
- Forks: 38
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-network-automation - inet-henge - Generate d3.js based Network Diagram from JSON data. (Library / NETCONF)
- awesome-stars - inet-henge - Generate d3.js based Network Diagram from JSON data. (JavaScript)
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.
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");