flock-vis

flock

In browser network graphs representing the links between nodes

How to install

npm install
npm run-script publish

The generated file is at public/js/flock.js and public/js/flock.min.js.

How to use

<script>
flock.options.container_ele = '#view';  //div id for hosting the graph
flock.options.filter_ele = '#query';    //input field id for filtering
flock.options.colors.links = '999999'   //link color
flock.onSelect = function(node, parents, children){     //when a node is selected
    htmlStr = node.id + " is selected";
    console.log(children);
    console.log(parents);
    document.getElementById('detail-contents').innerHTML = htmlStr;
}
data = {"nodes": [{"id": "node1"}, {"id": "node2"}, {"id": "node2"}, {"id": "node4"}], 
        "links": [{"source": 0, "target": 1, "value": "permitted"}, 
                  {"source": 0, "target": 3, "value": "violated"}, 
                  {"source": 2, "target": 3, "value": "permitted"}]};
flock.load(data);
</script>

Demo

Demo html at public/demo/pools.html. Please use Safari to open it to avoid cross origin restrition (as it loads local pools.json).

Screenshots

• Main screen with highlighting and mouse over effect

• Focus view when click a node to highlight a node and its connections

• Filter with node highlighting and auto-completion