@ -0,0 +1,87 @@ | |||
<!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.css"> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 800px; | |||
height: 800px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h2>Dynamic Data - Neighbourhood Highlight</h2> | |||
<div style="width:700px; 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 20ms, the rest of the time is the redrawing of the network (9200 edges..). | |||
</div> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
var network; | |||
var nodes = new vis.DataSet(); | |||
var edges = new vis.DataSet(); | |||
function redrawAll() { | |||
nodes.clear(); | |||
edges.clear(); | |||
network = null; | |||
// create an array with nodes | |||
nodes.add(nodesData); | |||
edges.add(edgesData); | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes: { | |||
shape: 'dot', | |||
radiusMin: 10, | |||
radiusMax: 30, | |||
fontSize: 12, | |||
fontFace: "Tahoma" | |||
}, | |||
edges: { | |||
width: 0.15, | |||
inheritColor: "from" | |||
}, | |||
tooltip: { | |||
delay: 200, | |||
fontSize: 12, | |||
color: { | |||
background: "#fff" | |||
} | |||
}, | |||
smoothCurves: {dynamic:false, type: "continuous"}, | |||
stabilize: false, | |||
physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0, springConstant: 0}}, | |||
hideEdgesOnDrag: true | |||
}; | |||
network = new vis.Network(container, data, options); | |||
} | |||
redrawAll() | |||
</script> | |||
</body></html> |
@ -0,0 +1,59 @@ | |||
function parseGephi(gephiJSON, options) { | |||
var edges = []; | |||
var nodes = []; | |||
this.options = { | |||
edges: { | |||
inheritColor: 'from' | |||
}, | |||
nodes: { | |||
allowedToMove: false, | |||
parseColor: false | |||
} | |||
}; | |||
if (options !== undefined) { | |||
this.options.edges['inheritColor'] = options.inheritColor | 'from'; | |||
this.options.nodes['allowedToMove'] = options.allowedToMove | false; | |||
this.options.nodes['parseColor'] = options.parseColor | false; | |||
} | |||
var gEdges = gephiJSON.edges; | |||
var gNodes = gephiJSON.nodes; | |||
for (var i = 0; i < gEdges.length; i++) { | |||
var edge = {}; | |||
edge['id'] = gEdges.id; | |||
edge['from'] = gEdges.source; | |||
edge['to'] = gEdges.target; | |||
edge['attributes'] = gEdges.attributes; | |||
edge['value'] = gEdges.attributes !== undefined ? gEdges.attributes.Weight : undefined; | |||
edge['width'] = gEdges.size; | |||
edge['color'] = gEdges.color; | |||
edge['inheritColor'] = edge['color'] !== undefined ? false : this.options.inheritColor; | |||
edges.push(edge); | |||
} | |||
for (var i = 0; i < gNodes.length; i++) { | |||
var node = {}; | |||
node['id'] = gNodes.id; | |||
node['attributes'] = gNodes.attributes; | |||
node['x'] = gNodes.x; | |||
node['y'] = gNodes.y; | |||
node['label'] = gNodes.label; | |||
if (this.options.parseColor == true) { | |||
node['color'] = gNodes.color; | |||
} | |||
else { | |||
node['color'] = gNodes.color !== undefined ? {background:gNodes.color, border:gNodes.color} : undefined; | |||
} | |||
node['radius'] = gNodes.size; | |||
node['allowedToMoveX'] = this.options.allowedToMove; | |||
node['allowedToMoveY'] = this.options.allowedToMove; | |||
node['shape'] = 'dot' | |||
nodes.push(node); | |||
} | |||
return {nodes:nodes, edges:edges}; | |||
} | |||
exports.parseGephi = parseGephi; |