jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

worked with examples

flowchartTest
Alex de Mulder 9 years ago
parent
21b76a53ab
commit
9921fe750b
12 changed files with 8578 additions and 8513 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8364
    -8355
      dist/vis.js
  2. +0
    -85
      examples/network/categories/05_social_network.html
  3. +3
    -3
      examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html
  4. +0
    -0
      examples/network/categories/data/dot_language.html
  5. +0
    -0
      examples/network/categories/data/dynamic_data.html
  6. +13
    -40
      examples/network/categories/data/importing_from_gephi.html
  7. +86
    -0
      examples/network/categories/data/scaling_custom.html
  8. +13
    -21
      examples/network/categories/data/scaling_nodes_edges.html
  9. +85
    -0
      examples/network/categories/data/scaling_nodes_edges_labels.html
  10. +5
    -5
      lib/network/gephiParser.js
  11. +4
    -0
      lib/network/modules/components/Node.js
  12. +5
    -4
      lib/util.js

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


+ 0
- 85
examples/network/categories/05_social_network.html View File

@ -1,85 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Social Network</title>
<style>
body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background: #F3F3F3;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people
nodes = [
{id: 1, label: 'Algie', image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
{id: 2, label: 'Alston', image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
{id: 3, label: 'Barney', image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
{id: 4, label: 'Coley', image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
{id: 5, label: 'Grant', image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
{id: 6, label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
{id: 7, label: 'Lee', image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
{id: 8, label: 'Merlin', image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
{id: 9, label: 'Mick', image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
{id: 10, label: 'Tod', image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
];
// create connections
var color = '#BFBFBF';
edges = [
{from: 2, to: 8, value: 3, label: 3, color: color},
{from: 2, to: 9, value: 5, label: 5, color: color},
{from: 2, to: 10, value: 1, label: 1, color: color},
{from: 4, to: 6, value: 8, label: 8, color: color},
{from: 5, to: 7, value: 2, label: 2, color: color},
{from: 4, to: 5, value: 1, label: 1, color: color},
{from: 9, to: 10, value: 2, label: 2, color: color},
{from: 2, to: 3, value: 6, label: 6, color: color},
{from: 3, to: 9, value: 4, label: 4, color: color},
{from: 5, to: 3, value: 1, label: 1, color: color},
{from: 2, to: 7, value: 4, label: 4, color: color}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {stabilization: false}
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Create a social network showing the amount of interaction between people.
</p>
<div id="mynetwork"></div>
<p>
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
</p>
<div id="info"></div>
</body>
</html>

examples/network/categories/15_dot_language_playground.html → examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html View File

@ -3,8 +3,8 @@
<head> <head>
<title>Network | DOT language playground</title> <title>Network | DOT language playground</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body, html { body, html {
@ -48,7 +48,7 @@
display: none; display: none;
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body onload="drawExample('example1')"> <body onload="drawExample('example1')">

examples/network/categories/14_dot_language.html → examples/network/categories/data/dot_language.html View File


examples/network/categories/16_dynamic_data.html → examples/network/categories/data/dynamic_data.html View File


examples/network/categories/30_importing_from_gephi.html → examples/network/categories/data/importing_from_gephi.html View File

@ -4,8 +4,8 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF8"> <meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Dynamic Data - Importing from Gephi (JSON)</title> <title>Dynamic Data - Importing from Gephi (JSON)</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
@ -49,7 +49,7 @@
color: red; color: red;
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
@ -68,7 +68,7 @@
</div> </div>
<p> <p>
<label><input type="checkbox" id="allowedToMove"/> Allow to move after import.</label><br>
<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 <label><input type="checkbox" id="parseColor"/> Parse the color instead of
copy (adds borders, highlights etc.)</label> copy (adds borders, highlights etc.)</label>
</p> </p>
@ -84,15 +84,15 @@
var nodes = new vis.DataSet(); var nodes = new vis.DataSet();
var edges = new vis.DataSet(); var edges = new vis.DataSet();
var gephiImported; var gephiImported;
var allowedToMoveCheckbox = document.getElementById('allowedToMove');
allowedToMoveCheckbox.onchange = redrawAll;
var fixedCheckbox = document.getElementById('fixed');
fixedCheckbox.onchange = redrawAll;
var parseColorCheckbox = document.getElementById('parseColor'); var parseColorCheckbox = document.getElementById('parseColor');
parseColorCheckbox.onchange = redrawAll; parseColorCheckbox.onchange = redrawAll;
var nodeContent = document.getElementById('nodeContent'); var nodeContent = document.getElementById('nodeContent');
loadJSON('./data/WorldCup2014.json', redrawAll);
loadJSON('../../data/WorldCup2014.json', redrawAll);
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var data = { var data = {
@ -108,16 +108,13 @@
}, },
edges: { edges: {
width: 0.15, width: 0.15,
color: {
inherit: 'from'
},
smooth: { smooth: {
dynamic: false,
type: 'continuous' type: 'continuous'
} }
}, },
interaction: { interaction: {
tooltipDelay: 200
tooltipDelay: 200,
hideEdgesOnDrag: true
}, },
physics: { physics: {
stabilization: false, stabilization: false,
@ -126,9 +123,6 @@
springConstant: 0.002, springConstant: 0.002,
springLength: 150 springLength: 150
} }
},
rendering: {
hideEdgesOnDrag: true
} }
}; };
@ -148,10 +142,11 @@
nodes.clear(); nodes.clear();
edges.clear(); edges.clear();
var allowedToMove = allowedToMoveCheckbox.checked;
var fixed = fixedCheckbox.checked;
var parseColor = parseColorCheckbox.checked; var parseColor = parseColorCheckbox.checked;
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, { var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
allowedToMove: allowedToMove,
fixed: fixed,
parseColor: parseColor parseColor: parseColor
}); });
@ -160,32 +155,10 @@
edges.add(parsed.edges); edges.add(parsed.edges);
var data = nodes.get(2); // get the data from node 2 var data = nodes.get(2); // get the data from node 2
nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
network.fit(); // zoom to fit network.fit(); // zoom to fit
} }
// from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, null, 2);
}
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
function loadJSON(path, success, error) { function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();

+ 86
- 0
examples/network/categories/data/scaling_custom.html View File

@ -0,0 +1,86 @@
<!doctype html>
<html>
<head>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3},
{from: 2, to: 9, value: 5},
{from: 2, to: 10,value: 1},
{from: 4, to: 6, value: 8},
{from: 5, to: 7, value: 2},
{from: 4, to: 5, value: 1},
{from: 9, to: 10,value: 2},
{from: 2, to: 3, value: 6},
{from: 3, to: 9, value: 4},
{from: 5, to: 3, value: 1},
{from: 2, to: 7, value: 4}
];
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
scaling: {
customScalingFunction: function (min,max,total,value) {
return value/total;
},
min:5,
max:150
}
}
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
</p>
<div id="mynetwork"></div>
</body>
</html>

examples/network/categories/09_scaling.html → examples/network/categories/data/scaling_nodes_edges.html View File

@ -14,8 +14,8 @@
} }
</style> </style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
@ -25,18 +25,17 @@
function draw() { function draw() {
// create people. // create people.
// value corresponds with the age of the person // value corresponds with the age of the person
var DIR = 'img/soft-scraps-icons/';
nodes = [ nodes = [
{id: 1, value: 2, shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
{id: 2, value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
{id: 3, value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
{id: 4, value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
{id: 5, value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
{id: 6, value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
{id: 7, value: 6, shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
{id: 8, value: 5, shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
{id: 9, value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
{id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
]; ];
// create connections between people // create connections between people
@ -64,19 +63,12 @@
var options = { var options = {
nodes: { nodes: {
shape: 'dot', shape: 'dot',
scaling: {
min: 16, // px
max: 64 // px
}
},
edges: {
//color: 'gray'
} }
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
</script> </script>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body onload="draw()"> <body onload="draw()">
<p> <p>

+ 85
- 0
examples/network/categories/data/scaling_nodes_edges_labels.html View File

@ -0,0 +1,85 @@
<!doctype html>
<html>
<head>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'},
{from: 2, to: 9, value: 5, title: '5 emails per week'},
{from: 2, to: 10,value: 1, title: '1 emails per week'},
{from: 4, to: 6, value: 8, title: '8 emails per week'},
{from: 5, to: 7, value: 2, title: '2 emails per week'},
{from: 4, to: 5, value: 1, title: '1 emails per week'},
{from: 9, to: 10,value: 2, title: '2 emails per week'},
{from: 2, to: 3, value: 6, title: '6 emails per week'},
{from: 3, to: 9, value: 4, title: '4 emails per week'},
{from: 5, to: 3, value: 1, title: '1 emails per week'},
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
scaling:{
label: {
min:8,
max:20
}
}
}
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over edges to get a popup with more information.
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 5
- 5
lib/network/gephiParser.js View File

@ -12,10 +12,10 @@ function parseGephi(gephiJSON, optionsObj) {
} }
}; };
if (options !== undefined) {
options.nodes['fixed'] = optionsObj.fixed !== undefined ? options.fixed : true;
options.nodes['parseColor'] = optionsObj.parseColor !== undefined ? options.parseColor : false;
options.edges['inheritColor'] = optionsObj.inheritColor !== undefined ? options.inheritColor : false;
if (optionsObj !== undefined) {
if (optionsObj.fixed !== undefined) {options.nodes.fixed = optionsObj.fixed}
if (optionsObj.parseColor !== undefined) {options.nodes.parseColor = optionsObj.parseColor}
if (optionsObj.inheritColor !== undefined) {options.edges.inheritColor = optionsObj.inheritColor}
} }
var gEdges = gephiJSON.edges; var gEdges = gephiJSON.edges;
@ -48,7 +48,7 @@ function parseGephi(gephiJSON, optionsObj) {
node['color'] = gNode.color; node['color'] = gNode.color;
} }
else { else {
node['color'] = gNode.color !== undefined ? {background:gNode.color, border:gNode.color} : undefined;
node['color'] = gNode.color !== undefined ? {background:gNode.color, border:gNode.color, highlight: {background:gNode.color, border:gNode.color}, hover:{background:gNode.color, border:gNode.color}} : undefined;
} }
node['size'] = gNode.size; node['size'] = gNode.size;
node['fixed'] = options.nodes.fixed && gNode.x !== undefined && gNode.y !== undefined; node['fixed'] = options.nodes.fixed && gNode.x !== undefined && gNode.y !== undefined;

+ 4
- 0
lib/network/modules/components/Node.js View File

@ -199,6 +199,10 @@ class Node {
if (newOptions.font !== undefined) { if (newOptions.font !== undefined) {
Label.parseOptions(parentOptions.font, newOptions); Label.parseOptions(parentOptions.font, newOptions);
} }
if (newOptions.scaling !== undefined) {
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
}
} }
updateLabelModule() { updateLabelModule() {

+ 5
- 4
lib/util.js View File

@ -943,11 +943,10 @@ exports.parseColor = function(color) {
} }
if (exports.isValidHex(color) === true) { if (exports.isValidHex(color) === true) {
var hsv = exports.hexToHSV(color); var hsv = exports.hexToHSV(color);
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
var darkerColorHex = exports.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.8,v:Math.min(1,hsv.v * 1.02)};
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.s * 1.25),v:hsv.v*0.8};
var darkerColorHex = exports.HSVToHex(darkerColorHSV.h ,darkerColorHSV.s ,darkerColorHSV.v);
var lighterColorHex = exports.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v); var lighterColorHex = exports.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
c = { c = {
background: color, background: color,
border:darkerColorHex, border:darkerColorHex,
@ -1009,6 +1008,8 @@ exports.parseColor = function(color) {
return c; return c;
}; };
/** /**
* http://www.javascripter.net/faq/rgb2hsv.htm * http://www.javascripter.net/faq/rgb2hsv.htm
* *

Write Preview
Loading…
Cancel
Save