RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/network/data/dotLanguage/graphvizGallery/unix.gv.txt ADDED

@@ -0,0 +1,55 @@
+/* courtesy Ian Darwin and Geoff Collyer, Softquad Inc. */
+digraph unix {
+	size="6,6";
+	node [color=lightblue, style=filled];
+	"5th Edition" -> "6th Edition";
+	"5th Edition" -> "PWB 1.0";
+	"6th Edition" -> "LSX";
+	"6th Edition" -> "1 BSD";
+	"6th Edition" -> "Mini Unix";
+	"6th Edition" -> "Wollongong";
+	"6th Edition" -> "Interdata";
+	"Interdata" -> "Unix/TS 3.0";
+	"Interdata" -> "PWB 2.0";
+	"Interdata" -> "7th Edition";
+	"7th Edition" -> "8th Edition";
+	"7th Edition" -> "32V";
+	"7th Edition" -> "V7M";
+	"7th Edition" -> "Ultrix-11";
+	"7th Edition" -> "Xenix";
+	"7th Edition" -> "UniPlus+";
+	"V7M" -> "Ultrix-11";
+	"8th Edition" -> "9th Edition";
+	"1 BSD" -> "2 BSD";
+	"2 BSD" -> "2.8 BSD";
+	"2.8 BSD" -> "Ultrix-11";
+	"2.8 BSD" -> "2.9 BSD";
+	"32V" -> "3 BSD";
+	"3 BSD" -> "4 BSD";
+	"4 BSD" -> "4.1 BSD";
+	"4.1 BSD" -> "4.2 BSD";
+	"4.1 BSD" -> "2.8 BSD";
+	"4.1 BSD" -> "8th Edition";
+	"4.2 BSD" -> "4.3 BSD";
+	"4.2 BSD" -> "Ultrix-32";
+	"PWB 1.0" -> "PWB 1.2";
+	"PWB 1.0" -> "USG 1.0";
+	"PWB 1.2" -> "PWB 2.0";
+	"USG 1.0" -> "CB Unix 1";
+	"USG 1.0" -> "USG 2.0";
+	"CB Unix 1" -> "CB Unix 2";
+	"CB Unix 2" -> "CB Unix 3";
+	"CB Unix 3" -> "Unix/TS++";
+	"CB Unix 3" -> "PDP-11 Sys V";
+	"USG 2.0" -> "USG 3.0";
+	"USG 3.0" -> "Unix/TS 3.0";
+	"PWB 2.0" -> "Unix/TS 3.0";
+	"Unix/TS 1.0" -> "Unix/TS 3.0";
+	"Unix/TS 3.0" -> "TS 4.0";
+	"Unix/TS++" -> "TS 4.0";
+	"CB Unix 3" -> "TS 4.0";
+	"TS 4.0" -> "System V.0";
+	"System V.0" -> "System V.2";
+	"System V.2" -> "System V.3";
+}

data/examples_for_vis/network/data/dotLanguage/graphvizGallery/world.gv.txt ADDED

@@ -0,0 +1,67 @@
+digraph world {
+size="7,7";
+	{rank=same; S8 S24 S1 S35 S30;}
+	{rank=same; T8 T24 T1 T35 T30;}
+	{rank=same; 43 37 36 10 2;}
+	{rank=same; 25 9 38 40 13 17 12 18;}
+	{rank=same; 26 42 11 3 33 19 39 14 16;}
+	{rank=same; 4 31 34 21 41 28 20;}
+	{rank=same; 27 5 22 32 29 15;}
+	{rank=same; 6 23;}
+	{rank=same; 7;}
+	S8 -> 9;
+	S24 -> 25;
+	S24 -> 27;
+	S1 -> 2;
+	S1 -> 10;
+	S35 -> 43;
+	S35 -> 36;
+	S30 -> 31;
+	S30 -> 33;
+	9 -> 42;
+	9 -> T1;
+	25 -> T1;
+	25 -> 26;
+	27 -> T24;
+	2 -> {3 ; 16 ; 17 ; T1 ; 18}
+	10 -> { 11 ; 14 ; T1 ; 13; 12;}
+	31 -> T1;
+	31 -> 32;
+	33 -> T30;
+	33 -> 34;
+	42 -> 4;
+	26 -> 4;
+	3 -> 4;
+	16 -> 15;
+	17 -> 19;
+	18 -> 29;
+	11 -> 4;
+	14 -> 15;
+	37 -> {39 ; 41 ; 38 ; 40;}
+	13 -> 19;
+	12 -> 29;
+	43 -> 38;
+	43 -> 40;
+	36 -> 19;
+	32 -> 23;
+	34 -> 29;
+	39 -> 15;
+	41 -> 29;
+	38 -> 4;
+	40 -> 19;
+	4 -> 5;
+	19 -> {21 ; 20 ; 28;}
+	5 -> {6 ; T35 ; 23;}
+	21 -> 22;
+	20 -> 15;
+	28 -> 29;
+	6 -> 7;
+	15 -> T1;
+	22 -> T35;
+	22 -> 23;
+	29 -> T30;
+	7 -> T8;
+	23 -> T24;
+	23 -> T1;
+}

data/examples_for_vis/network/data/dynamicData.html ADDED

@@ -0,0 +1,266 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | DataSet</title>
+    <style type="text/css">
+        html, body {
+            font: 11pt arial;
+        }
+        h1 {
+            font-size: 150%;
+            margin: 5px 0;
+        }
+        h2 {
+            font-size: 100%;
+            margin: 5px 0;
+        }
+        table.view {
+            width: 100%;
+        }
+        table td {
+            vertical-align: top;
+        }
+        table table {
+            background-color: #f5f5f5;
+            border: 1px solid #e5e5e5;
+        }
+        table table td {
+            vertical-align: middle;
+        }
+        input[type=text], pre {
+            border: 1px solid lightgray;
+        }
+        pre {
+            margin: 0;
+            padding: 5px;
+            font-size: 10pt;
+        }
+        #network {
+            width: 100%;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+    </style>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+    <script type="text/javascript">
+        var nodes, edges, network;
+        // convenience method to stringify a JSON object
+        function toJSON(obj) {
+            return JSON.stringify(obj, null, 4);
+        }
+        function addNode() {
+            try {
+                nodes.add({
+                    id: document.getElementById('node-id').value,
+                    label: document.getElementById('node-label').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
+        }
+        function updateNode() {
+            try {
+                nodes.update({
+                    id: document.getElementById('node-id').value,
+                    label: document.getElementById('node-label').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
+        }
+        function removeNode() {
+            try {
+                nodes.remove({id: document.getElementById('node-id').value});
+            }
+            catch (err) {
+                alert(err);
+            }
+        }
+        function addEdge() {
+            try {
+                edges.add({
+                    id: document.getElementById('edge-id').value,
+                    from: document.getElementById('edge-from').value,
+                    to: document.getElementById('edge-to').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
+        }
+        function updateEdge() {
+            try {
+                edges.update({
+                    id: document.getElementById('edge-id').value,
+                    from: document.getElementById('edge-from').value,
+                    to: document.getElementById('edge-to').value
+                });
+            }
+            catch (err) {
+                alert(err);
+            }
+        }
+        function removeEdge() {
+            try {
+                edges.remove({id: document.getElementById('edge-id').value});
+            }
+            catch (err) {
+                alert(err);
+            }
+        }
+        function draw() {
+            // create an array with nodes
+            nodes = new vis.DataSet();
+            nodes.on('*', function () {
+                document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
+            });
+            nodes.add([
+                {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
+            edges = new vis.DataSet();
+            edges.on('*', function () {
+                document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
+            });
+            edges.add([
+                {id: '1', from: '1', to: '2'},
+                {id: '2', from: '1', to: '3'},
+                {id: '3', from: '2', to: '4'},
+                {id: '4', from: '2', to: '5'}
+            ]);
+            // create a network
+            var container = document.getElementById('network');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {};
+            network = new vis.Network(container, data, options);
+        }
+    </script>
+</head>
+<body onload="draw();">
+<p>
+    This example demonstrates dynamically adding, updating and removing nodes
+    and edges using a DataSet.
+</p>
+<h1>Adjust</h1>
+<table>
+    <tr>
+        <td>
+            <h2>Node</h2>
+            <table>
+                <tr>
+                    <td></td>
+                    <td><label for="node-id">Id</label></td>
+                    <td><input id="node-id" type="text" value="6"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><label for="node-label">Label</label></td>
+                    <td><input id="node-label" type="text" value="Node 6"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>Action</td>
+                    <td>
+                        <button id="node-add" onclick="addNode();">Add</button>
+                        <button id="node-update" onclick="updateNode();">Update</button>
+                        <button id="node-remove" onclick="removeNode();">Remove</button>
+                    </td>
+                </tr>
+            </table>
+        </td>
+        <td>
+            <h2>Edge</h2>
+            <table>
+                <tr>
+                    <td></td>
+                    <td><label for="edge-id">Id</label></td>
+                    <td><input id="edge-id" type="text" value="5"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><label for="edge-from">From</label></td>
+                    <td><input id="edge-from" type="text" value="3"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><label for="edge-to">To</label></td>
+                    <td><input id="edge-to" type="text" value="4"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>Action</td>
+                    <td>
+                        <button id="edge-add" onclick="addEdge();">Add</button>
+                        <button id="edge-update" onclick="updateEdge();">Update</button>
+                        <button id="edge-remove" onclick="removeEdge();">Remove</button>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>
+<h1>View</h1>
+<table class="view">
+    <colgroup>
+        <col width="25%">
+        <col width="25%">
+        <col width="50%">
+    </colgroup>
+    <tr>
+        <td>
+            <h2>Nodes</h2>
+            <pre id="nodes"></pre>
+        </td>
+        <td>
+            <h2>Edges</h2>
+            <pre id="edges"></pre>
+        </td>
+        <td>
+            <h2>Network</h2>
+            <div id="network"></div>
+        </td>
+    </tr>
+</table>
+</body>
+</html>

data/examples_for_vis/network/data/importingFromGephi.html ADDED

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <title>Dynamic Data - Importing from Gephi (JSON)</title>
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link type="text/css" rel="stylesheet" href="../../../vendor/assets/stylesheets/vis-network.min.css">
+  <style type="text/css">
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+    div.nodeContent {
+      position: relative;
+      border: 1px solid lightgray;
+      width: 480px;
+      height: 780px;
+      margin-top: -802px;
+      margin-left: 810px;
+      padding: 10px;
+    }
+    pre {
+      padding: 5px;
+      margin: 5px;
+    }
+    .string {
+      color: green;
+    }
+    .number {
+      color: darkorange;
+    }
+    .boolean {
+      color: blue;
+    }
+    .null {
+      color: magenta;
+    }
+    .key {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+  This example shows how to import a JSON file exported by Gephi. The two
+  options available for the import are
+  available through the checkboxes. You can download the Gephi JSON exporter
+  here:
+  <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
+  All of Gephi's attributes are also contained within the node elements. This
+  means you can access all of this data through the DataSet.
+  <br/>
+</div>
+<p>
+  <label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
+  <label><input type="checkbox" id="parseColor"/> Parse the color instead of
+    copy (adds borders, highlights etc.)</label>
+</p>
+<div id="mynetwork"></div>
+<div class="nodeContent"><h4>Node Content:</h4>
+  <pre id="nodeContent"></pre>
+</div>
+<script type="text/javascript">
+  var network;
+  var nodes = new vis.DataSet();
+  var edges = new vis.DataSet();
+  var gephiImported;
+  var fixedCheckbox = document.getElementById('fixed');
+  fixedCheckbox.onchange = redrawAll;
+  var parseColorCheckbox = document.getElementById('parseColor');
+  parseColorCheckbox.onchange = redrawAll;
+  var nodeContent = document.getElementById('nodeContent');
+  loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    nodes: {
+      shape: 'dot',
+      font: {
+        face: 'Tahoma'
+      }
+    },
+    edges: {
+      width: 0.15,
+      smooth: {
+        type: 'continuous'
+      }
+    },
+    interaction: {
+      tooltipDelay: 200,
+      hideEdgesOnDrag: true
+    },
+    physics: {
+      stabilization: false,
+      barnesHut: {
+        gravitationalConstant: -10000,
+        springConstant: 0.002,
+        springLength: 150
+      }
+    }
+  };
+  network = new vis.Network(container, data, options);
+  network.on('click', function (params) {
+    if (params.nodes.length > 0) {
+      var data = nodes.get(params.nodes[0]); // get the data from selected node
+      nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
+    }
+  })
+  /**
+   * This function fills the DataSets. These DataSets will update the network.
+   */
+  function redrawAll(gephiJSON) {
+    if (gephiJSON.nodes === undefined) {
+      gephiJSON = gephiImported;
+    }
+    else {
+      gephiImported = gephiJSON;
+    }
+    nodes.clear();
+    edges.clear();
+    var fixed = fixedCheckbox.checked;
+    var parseColor = parseColorCheckbox.checked;
+    var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
+      fixed: fixed,
+      parseColor: parseColor
+    });
+    // add the parsed data to the DataSets.
+    nodes.add(parsed.nodes);
+    edges.add(parsed.edges);
+    var data = nodes.get(2); // get the data from node 2 as example
+    nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
+    network.fit(); // zoom to fit
+  }
+</script>
+</body>
+</html>