Browse Source

added few examples, added gephi parser (JSON), added JSON get for dataset

v3_develop
Alex de Mulder 10 years ago
parent
commit
cd131960dc
11 changed files with 19737 additions and 9354 deletions
  1. +9354
    -9346
      dist/vis.js
  2. +7
    -0
      docs/dataset.html
  3. +2
    -1
      examples/network/02_random_nodes.html
  4. +10212
    -0
      examples/network/29_neighbourhood_highlight.html
  5. +87
    -0
      examples/network/30_importing_from_gephi.html
  6. +1
    -0
      examples/network/data/WorldCup2014.json
  7. +10
    -2
      lib/DataSet.js
  8. +0
    -1
      lib/network/Groups.js
  9. +2
    -1
      lib/network/Node.js
  10. +59
    -0
      lib/network/gephiParser.js
  11. +3
    -3
      lib/util.js

+ 9354
- 9346
dist/vis.js
File diff suppressed because it is too large
View File


+ 7
- 0
docs/dataset.html View File

@ -691,6 +691,13 @@ DataSet.map(callback [, options]);
<td>Order the items by a field name or custom sort function.</td> <td>Order the items by a field name or custom sort function.</td>
</tr> </tr>
<tr>
<td>returnType</td>
<td>String</td>
<td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
</tr>
</table> </table>
<p> <p>

+ 2
- 1
examples/network/02_random_nodes.html View File

@ -31,7 +31,8 @@
for (var i = 0; i < nodeCount; i++) { for (var i = 0; i < nodeCount; i++) {
nodes.push({ nodes.push({
id: i, id: i,
label: String(i)
label: String(i),
radius:300
}); });
connectionCount[i] = 0; connectionCount[i] = 0;

+ 10212
- 0
examples/network/29_neighbourhood_highlight.html
File diff suppressed because it is too large
View File


+ 87
- 0
examples/network/30_importing_from_gephi.html View File

@ -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>

+ 1
- 0
examples/network/data/WorldCup2014.json
File diff suppressed because it is too large
View File


+ 10
- 2
lib/DataSet.js View File

@ -322,7 +322,8 @@ DataSet.prototype.get = function (args) {
// determine the return type // determine the return type
var returnType; var returnType;
if (options && options.returnType) { if (options && options.returnType) {
returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
var allowedValues = ["DataTable", "Array", "Object"];
returnType = allowedValues.indexOf(options.returnType) == -1 ? "Array" : options.returnType;
if (data && (returnType != util.getType(data))) { if (data && (returnType != util.getType(data))) {
throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' + throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
@ -401,12 +402,19 @@ DataSet.prototype.get = function (args) {
} }
else { else {
// copy the items to the provided data table // copy the items to the provided data table
for (i = 0, len = items.length; i < len; i++) {
for (i = 0; i < items.length; i++) {
me._appendRow(data, columns, items[i]); me._appendRow(data, columns, items[i]);
} }
} }
return data; return data;
} }
else if (returnType == "Object") {
var result = {};
for (i = 0; i < items.length; i++) {
result[items[i].id] = items[i];
}
return result;
}
else { else {
// return an array // return an array
if (id != undefined) { if (id != undefined) {

+ 0
- 1
lib/network/Groups.js View File

@ -53,7 +53,6 @@ Groups.prototype.clear = function () {
*/ */
Groups.prototype.get = function (groupname) { Groups.prototype.get = function (groupname) {
var group = this.groups[groupname]; var group = this.groups[groupname];
if (group == undefined) { if (group == undefined) {
// create new group // create new group
var index = this.defaultIndex % Groups.DEFAULT.length; var index = this.defaultIndex % Groups.DEFAULT.length;

+ 2
- 1
lib/network/Node.js View File

@ -171,7 +171,7 @@ Node.prototype.setProperties = function(properties, constants) {
} }
// copy group properties // copy group properties
if (this.group) {
if (this.group !== undefined) {
var groupObj = this.grouplist.get(this.group); var groupObj = this.grouplist.get(this.group);
for (var prop in groupObj) { for (var prop in groupObj) {
if (groupObj.hasOwnProperty(prop)) { if (groupObj.hasOwnProperty(prop)) {
@ -180,6 +180,7 @@ Node.prototype.setProperties = function(properties, constants) {
} }
} }
// individual shape properties // individual shape properties
if (properties.shape !== undefined) {this.shape = properties.shape;} if (properties.shape !== undefined) {this.shape = properties.shape;}
if (properties.image !== undefined) {this.image = properties.image;} if (properties.image !== undefined) {this.image = properties.image;}

+ 59
- 0
lib/network/gephiParser.js View File

@ -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;

+ 3
- 3
lib/util.js View File

@ -974,9 +974,9 @@ exports.RGBToHSV = function(red,green,blue) {
/** /**
* https://gist.github.com/mjijackson/5311256 * https://gist.github.com/mjijackson/5311256
* @param hue
* @param saturation
* @param value
* @param h
* @param s
* @param v
* @returns {{r: number, g: number, b: number}} * @returns {{r: number, g: number, b: number}}
* @constructor * @constructor
*/ */

Loading…
Cancel
Save