<commit_before># inet-henge.js

Generate d3.js based Network Diagram from JSON data.

## Getting Started

To be updated

* Requirements: [cola.js](http://marvl.infotech.monash.edu/webcola/)

## Demo

[Shownet 2016 Network](https://inet-henge.herokuapp.com/)

## Usage

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

* d3.js
* cola.js
* inet-henge.js

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <script src="../vendor/cola.3.1.3.min.js"></script>
    <script src="../index.js"></script>
  </head>
```

define a blank container:


```html
  <body>
    <div id="diagram"></div>
  </body>
```

and render your network diagram:

```html
  <script>
   new Diagram('#diagram', 'shownet.json').init('interface');
  </script>
</html>
```

inet-henge.js renders your network diagram as SVG within ```<div id="diagram"></div>```. In this example the diagram also displays metadata labelled ```'loopback'``` and ```'interface'``` which defined in JSON data.

![Shownet2016 example](example/images/shownet.png)

### Node Group

Nodes can be grouped when a regular expression for node name is specified to determine which node belongs to which group.

When the first three characters describe POP name, you can group nodes by doing this:

``` javascript
var diagram = new Diagram('#diagram', 'data.json', {pop: /^.{3}/})
```

### JSON Data

Minimal json looks like:

```json
{
  "nodes": [
    { "name": "A" },
    { "name": "B" }
  ],<commit_msg>Fix document<commit_after># inet-henge.js

Generate d3.js based Network Diagram from JSON data.

## Getting Started

To be updated

* Requirements: [cola.js](http://marvl.infotech.monash.edu/webcola/)

## Demo

[Shownet 2016 Network](https://inet-henge.herokuapp.com/)

## Usage

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

* d3.js
* cola.js
* inet-henge.js

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <script src="../vendor/cola.3.1.3.min.js"></script>
    <script src="../index.js"></script>
  </head>
```

define a blank container:


```html
  <body>
    <div id="diagram"></div>
  </body>
```

and render your network diagram:

```html
  <script>
   new Diagram('#diagram', 'shownet.json').init('interface');
  </script>
</html>
```

inet-henge.js renders your network diagram as SVG within ```<div id="diagram"></div>```. In this example the diagram also displays metadata labelled ```'interface'``` which defined in JSON data.

![Shownet2016 example](example/images/shownet.png)

### Node Group

Nodes can be grouped when a regular expression for node name is specified to determine which node belongs to which group.

When the first three characters describe POP name, you can group nodes by doing this:

``` javascript
var diagram = new Diagram('#diagram', 'data.json', {pop: /^.{3}/})
```

### JSON Data

Minimal json looks like:

```json
{
  "nodes": [
    { "name": "A" },
    { "name": "B" }
  ],
{'fraction_non_alphanumeric': 0.178927680798005, 'fraction_numerical': 0.013092269326683292, 'mean_word_length': 3.8474320241691844, 'pattern_counts': {'":': 6, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '434660', 'n_tokens_mistral': 1160, 'n_tokens_neox': 1091, 'n_words': 313}