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

Merge remote-tracking branch 'origin/v4' into v4

flowchartTest
jos 10 years ago
parent
176742b33f 9921fe750b
commit
1e03f99a25
12 changed files with 8578 additions and 8513 deletions
Split 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>
<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">
body, html {
@ -48,7 +48,7 @@
display: none;
}
</style>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head>
<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>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<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">
#mynetwork {
@ -49,7 +49,7 @@
color: red;
}
</style>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
@ -68,7 +68,7 @@
</div>
<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
copy (adds borders, highlights etc.)</label>
</p>
@ -84,15 +84,15 @@
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var gephiImported;
var allowedToMoveCheckbox = document.getElementById('allowedToMove');
allowedToMoveCheckbox.onchange = redrawAll;
var fixedCheckbox = document.getElementById('fixed');
fixedCheckbox.onchange = redrawAll;
var parseColorCheckbox = document.getElementById('parseColor');
parseColorCheckbox.onchange = redrawAll;
var nodeContent = document.getElementById('nodeContent');
loadJSON('./data/WorldCup2014.json', redrawAll);
loadJSON('../../data/WorldCup2014.json', redrawAll);
var container = document.getElementById('mynetwork');
var data = {
@ -108,16 +108,13 @@
},
edges: {
width: 0.15,
color: {
inherit: 'from'
},
smooth: {
dynamic: false,
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200
tooltipDelay: 200,
hideEdgesOnDrag: true
},
physics: {
stabilization: false,
@ -126,9 +123,6 @@
springConstant: 0.002,
springLength: 150
}
},
rendering: {
hideEdgesOnDrag: true
}
};
@ -148,10 +142,11 @@
nodes.clear();
edges.clear();
var allowedToMove = allowedToMoveCheckbox.checked;
var fixed = fixedCheckbox.checked;
var parseColor = parseColorCheckbox.checked;
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
allowedToMove: allowedToMove,
fixed: fixed,
parseColor: parseColor
});
@ -160,32 +155,10 @@
edges.add(parsed.edges);
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
}
// 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) {
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>
<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">
var nodes = null;
@ -25,18 +25,17 @@
function draw() {
// create people.
// value corresponds with the age of the person
var DIR = 'img/soft-scraps-icons/';
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
@ -64,19 +63,12 @@
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 16, // px
max: 64 // px
}
},
edges: {
//color: 'gray'
}
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<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;
@ -48,7 +48,7 @@ function parseGephi(gephiJSON, optionsObj) {
node['color'] = gNode.color;
}
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['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) {
Label.parseOptions(parentOptions.font, newOptions);
}
if (newOptions.scaling !== undefined) {
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
}
}
updateLabelModule() {

+ 5
- 4
lib/util.js View File

@ -943,11 +943,10 @@ exports.parseColor = function(color) {
}
if (exports.isValidHex(color) === true) {
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);
c = {
background: color,
border:darkerColorHex,
@ -1009,6 +1008,8 @@ exports.parseColor = function(color) {
return c;
};
/**
* http://www.javascripter.net/faq/rgb2hsv.htm
*

Write Preview
Loading…
Cancel
Save