diff options
Diffstat (limited to 'www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html')
| -rw-r--r-- | www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html | 162 |
1 files changed, 0 insertions, 162 deletions
diff --git a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html b/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html deleted file mode 100644 index 8e05d482..00000000 --- a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html +++ /dev/null @@ -1,162 +0,0 @@ -<!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>Network | Static smooth curves - World Cup Network</title> - - <script type="text/javascript" src="../../../dist/vis.js"></script> - <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> - - <script src="../datasources/WorldCup2014.js"></script> - - <style type="text/css"> - #mynetwork { - width: 800px; - height: 800px; - border: 1px solid lightgray; - } - </style> - <script src="../../googleAnalytics.js"></script> -</head> - -<body> - -<h2>Dynamic Data - Neighbourhood Highlight</h2> -<div style="width:800px; font-size:14px;"> - This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes. - In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not - they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..). - <br /><br /> -</div> - -<div id="mynetwork"></div> - -<script type="text/javascript"> - var network; - var allNodes; - var highlightActive = false; - - var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js - var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js - - function redrawAll() { - var container = document.getElementById('mynetwork'); - var options = { - nodes: { - shape: 'dot', - scaling: { - min: 10, - max: 30, - label: { - min: 8, - max: 30, - drawThreshold: 12, - maxVisible: 20 - } - }, - font: { - size: 12, - face: 'Tahoma' - } - }, - edges: { - width: 0.15, - color: {inherit: 'from'}, - smooth: { - type: 'continuous' - } - }, - physics: false, - interaction: { - tooltipDelay: 200, - hideEdgesOnDrag: true - } - }; - var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js - - - network = new vis.Network(container, data, options); - - // get a JSON object - allNodes = nodesDataset.get({returnType:"Object"}); - - network.on("click",neighbourhoodHighlight); - } - - function neighbourhoodHighlight(params) { - // if something is selected: - if (params.nodes.length > 0) { - highlightActive = true; - var i,j; - var selectedNode = params.nodes[0]; - var degrees = 2; - - // mark all nodes as hard to read. - for (var nodeId in allNodes) { - allNodes[nodeId].color = 'rgba(200,200,200,0.5)'; - if (allNodes[nodeId].hiddenLabel === undefined) { - allNodes[nodeId].hiddenLabel = allNodes[nodeId].label; - allNodes[nodeId].label = undefined; - } - } - var connectedNodes = network.getConnectedNodes(selectedNode); - var allConnectedNodes = []; - - // get the second degree nodes - for (i = 1; i < degrees; i++) { - for (j = 0; j < connectedNodes.length; j++) { - allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j])); - } - } - - // all second degree nodes get a different color and their label back - for (i = 0; i < allConnectedNodes.length; i++) { - allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)'; - if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) { - allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel; - allNodes[allConnectedNodes[i]].hiddenLabel = undefined; - } - } - - // all first degree nodes get their own color and their label back - for (i = 0; i < connectedNodes.length; i++) { - allNodes[connectedNodes[i]].color = undefined; - if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) { - allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel; - allNodes[connectedNodes[i]].hiddenLabel = undefined; - } - } - - // the main node gets its own color and its label back. - allNodes[selectedNode].color = undefined; - if (allNodes[selectedNode].hiddenLabel !== undefined) { - allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel; - allNodes[selectedNode].hiddenLabel = undefined; - } - } - else if (highlightActive === true) { - // reset all nodes - for (var nodeId in allNodes) { - allNodes[nodeId].color = undefined; - if (allNodes[nodeId].hiddenLabel !== undefined) { - allNodes[nodeId].label = allNodes[nodeId].hiddenLabel; - allNodes[nodeId].hiddenLabel = undefined; - } - } - highlightActive = false - } - - // transform the object into an array - var updateArray = []; - for (nodeId in allNodes) { - if (allNodes.hasOwnProperty(nodeId)) { - updateArray.push(allNodes[nodeId]); - } - } - nodesDataset.update(updateArray); - } - - redrawAll() - -</script> - -</body></html> |
