## 2017-04-26 Found a nice visualization library vis.js


<lively-script>
import boundEval from "src/client/bound-eval.js";
var code = this.parentElement.parentElement.querySelector("code").textContent
boundEval(code)
""
</lively-script>

```JS
import vis from "https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js" 
lively.loadCSSThroughDOM("visjs", "https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css")

var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 2, to: 5},
    {from: 3, to: 3}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var div = document.body.querySelector("#vis3content")
  var network = new vis.Network(div, data, options);
```
<div id="vis3content" style="width:400px; height:400px; border: 1px solid gray"></div>

Oh, this is funny. The code snippet is evaluted by a hidden script tag in the markdown, bringing the example to life.