Browse Source

Switched to 2-space indentation

css_transitions
josdejong 10 years ago
parent
commit
7e6810955d
84 changed files with 20071 additions and 20588 deletions
  1. +2
    -0
      HISTORY.md
  2. +120
    -120
      Jakefile.js
  3. +27
    -27
      README.md
  4. +21
    -21
      bower.json
  5. +51
    -51
      docs/css/prettify.css
  6. +39
    -39
      docs/css/style.css
  7. +551
    -551
      docs/dataset.html
  8. +136
    -136
      docs/dataview.html
  9. +814
    -814
      docs/graph.html
  10. +126
    -126
      docs/index.html
  11. +459
    -459
      docs/timeline.html
  12. +34
    -34
      examples/graph/01_basic_usage.html
  13. +84
    -84
      examples/graph/02_random_nodes.html
  14. +72
    -72
      examples/graph/03_images.html
  15. +57
    -57
      examples/graph/04_shapes.html
  16. +58
    -58
      examples/graph/05_social_network.html
  17. +141
    -141
      examples/graph/06_groups.html
  18. +44
    -44
      examples/graph/07_selections.html
  19. +87
    -87
      examples/graph/08_mobile_friendly.html
  20. +63
    -63
      examples/graph/09_sizing.html
  21. +36
    -36
      examples/graph/10_multiline_text.html
  22. +114
    -114
      examples/graph/11_custom_style.html
  23. +66
    -66
      examples/graph/12_scalable_images.html
  24. +52
    -52
      examples/graph/13_dashed_lines.html
  25. +10
    -10
      examples/graph/14_dot_language.html
  26. +172
    -172
      examples/graph/15_dot_language_playground.html
  27. +224
    -224
      examples/graph/16_dynamic_data.html
  28. +140
    -140
      examples/graph/17_network_info.html
  29. +60
    -60
      examples/graph/graphviz/graphviz_gallery.html
  30. +21
    -21
      examples/graph/index.html
  31. +32
    -32
      package.json
  32. +590
    -590
      src/DataSet.js
  33. +169
    -166
      src/DataView.js
  34. +43
    -43
      src/EventBus.js
  35. +98
    -98
      src/events.js
  36. +383
    -383
      src/graph/Edge.js
  37. +1174
    -1174
      src/graph/Graph.js
  38. +37
    -37
      src/graph/Groups.js
  39. +17
    -17
      src/graph/Images.js
  40. +375
    -375
      src/graph/Node.js
  41. +62
    -62
      src/graph/Popup.js
  42. +751
    -751
      src/graph/dotparser.js
  43. +219
    -219
      src/graph/shapes.js
  44. +38
    -38
      src/module/exports.js
  45. +173
    -173
      src/shim.js
  46. +110
    -110
      src/timeline/Controller.js
  47. +282
    -282
      src/timeline/Range.js
  48. +107
    -107
      src/timeline/Stack.js
  49. +283
    -283
      src/timeline/TimeStep.js
  50. +272
    -272
      src/timeline/Timeline.js
  51. +58
    -58
      src/timeline/component/Component.js
  52. +52
    -52
      src/timeline/component/ContentPanel.js
  53. +57
    -57
      src/timeline/component/CurrentTime.js
  54. +141
    -141
      src/timeline/component/CustomTime.js
  55. +61
    -61
      src/timeline/component/Group.js
  56. +334
    -334
      src/timeline/component/GroupSet.js
  57. +338
    -338
      src/timeline/component/ItemSet.js
  58. +52
    -52
      src/timeline/component/Panel.js
  59. +126
    -126
      src/timeline/component/RootPanel.js
  60. +358
    -358
      src/timeline/component/TimeAxis.js
  61. +3
    -3
      src/timeline/component/css/currenttime.css
  62. +4
    -4
      src/timeline/component/css/customtime.css
  63. +34
    -34
      src/timeline/component/css/groupset.css
  64. +44
    -44
      src/timeline/component/css/item.css
  65. +5
    -5
      src/timeline/component/css/itemset.css
  66. +7
    -7
      src/timeline/component/css/panel.css
  67. +21
    -21
      src/timeline/component/css/timeaxis.css
  68. +20
    -20
      src/timeline/component/item/Item.js
  69. +234
    -234
      src/timeline/component/item/ItemBox.js
  70. +167
    -167
      src/timeline/component/item/ItemPoint.js
  71. +169
    -169
      src/timeline/component/item/ItemRange.js
  72. +55
    -55
      src/timeline/component/item/ItemRangeOverflow.js
  73. +410
    -410
      src/util.js
  74. +60
    -60
      test/dataset.html
  75. +61
    -61
      test/dataset.js
  76. +16
    -16
      test/dataview.js
  77. +164
    -164
      test/dotparser.js
  78. +13
    -13
      test/eventbus.js
  79. +66
    -66
      test/timeline.html
  80. +59
    -59
      test/timeline_groups.html
  81. +22
    -22
      test/timestep.html
  82. +7
    -7
      tools/watch.js
  83. +7751
    -8272
      vis.js
  84. +6
    -7
      vis.min.js

+ 2
- 0
HISTORY.md View File

@ -1,9 +1,11 @@
vis.js history
http://visjs.org
## <not yet released>, version 0.3.0
- Implemented options `showCurrentTime` and `showCustomTime`. Thanks fi0dor.
- Implemented touch support for Timeline.
- Fixed broken Timeline options `min` and `max`.
- Fixed not being able to load vis.js in node.js.

+ 120
- 120
Jakefile.js View File

@ -18,7 +18,7 @@ var VIS_MIN = './vis.min.js';
*/
desc('Execute all tasks: build all libraries');
task('default', ['build', 'minify', 'test'], function () {
console.log('done');
console.log('done');
});
/**
@ -26,97 +26,97 @@ task('default', ['build', 'minify', 'test'], function () {
*/
desc('Build the visualization library vis.js');
task('build', {async: true}, function () {
// concatenate and stringify the css files
var result = concat({
src: [
'./src/timeline/component/css/timeline.css',
'./src/timeline/component/css/panel.css',
'./src/timeline/component/css/groupset.css',
'./src/timeline/component/css/itemset.css',
'./src/timeline/component/css/item.css',
'./src/timeline/component/css/timeaxis.css',
'./src/timeline/component/css/currenttime.css',
'./src/timeline/component/css/customtime.css'
],
header: '/* vis.js stylesheet */',
separator: '\n'
});
var cssText = JSON.stringify(result.code);
// concatenate the script files
concat({
dest: VIS_TMP,
src: [
'./src/module/imports.js',
'./src/shim.js',
'./src/util.js',
'./src/events.js',
'./src/EventBus.js',
'./src/DataSet.js',
'./src/DataView.js',
'./src/timeline/TimeStep.js',
'./src/timeline/Stack.js',
'./src/timeline/Range.js',
'./src/timeline/Controller.js',
'./src/timeline/component/Component.js',
'./src/timeline/component/Panel.js',
'./src/timeline/component/RootPanel.js',
'./src/timeline/component/TimeAxis.js',
'./src/timeline/component/CurrentTime.js',
'./src/timeline/component/CustomTime.js',
'./src/timeline/component/ItemSet.js',
'./src/timeline/component/item/*.js',
'./src/timeline/component/Group.js',
'./src/timeline/component/GroupSet.js',
'./src/timeline/Timeline.js',
'./src/graph/dotparser.js',
'./src/graph/shapes.js',
'./src/graph/Node.js',
'./src/graph/Edge.js',
'./src/graph/Popup.js',
'./src/graph/Groups.js',
'./src/graph/Images.js',
'./src/graph/Graph.js',
'./src/module/exports.js'
],
separator: '\n',
// Note: we insert the css as a string in the javascript code here
// the css will be injected on load of the javascript library
footer: '// inject css\n' +
'util.loadCss(' + cssText + ');\n'
});
// bundle the concatenated script and dependencies into one file
var b = browserify();
b.add(VIS_TMP);
b.bundle({
standalone: 'vis'
}, function (err, code) {
if(err) {
throw err;
}
// add header and footer
var lib = read('./src/module/header.js') + code;
// write bundled file
write(VIS, lib);
console.log('created ' + VIS);
// remove temporary file
fs.unlinkSync(VIS_TMP);
// update version number and stuff in the javascript files
replacePlaceholders(VIS);
complete();
});
// concatenate and stringify the css files
var result = concat({
src: [
'./src/timeline/component/css/timeline.css',
'./src/timeline/component/css/panel.css',
'./src/timeline/component/css/groupset.css',
'./src/timeline/component/css/itemset.css',
'./src/timeline/component/css/item.css',
'./src/timeline/component/css/timeaxis.css',
'./src/timeline/component/css/currenttime.css',
'./src/timeline/component/css/customtime.css'
],
header: '/* vis.js stylesheet */',
separator: '\n'
});
var cssText = JSON.stringify(result.code);
// concatenate the script files
concat({
dest: VIS_TMP,
src: [
'./src/module/imports.js',
'./src/shim.js',
'./src/util.js',
'./src/events.js',
'./src/EventBus.js',
'./src/DataSet.js',
'./src/DataView.js',
'./src/timeline/TimeStep.js',
'./src/timeline/Stack.js',
'./src/timeline/Range.js',
'./src/timeline/Controller.js',
'./src/timeline/component/Component.js',
'./src/timeline/component/Panel.js',
'./src/timeline/component/RootPanel.js',
'./src/timeline/component/TimeAxis.js',
'./src/timeline/component/CurrentTime.js',
'./src/timeline/component/CustomTime.js',
'./src/timeline/component/ItemSet.js',
'./src/timeline/component/item/*.js',
'./src/timeline/component/Group.js',
'./src/timeline/component/GroupSet.js',
'./src/timeline/Timeline.js',
'./src/graph/dotparser.js',
'./src/graph/shapes.js',
'./src/graph/Node.js',
'./src/graph/Edge.js',
'./src/graph/Popup.js',
'./src/graph/Groups.js',
'./src/graph/Images.js',
'./src/graph/Graph.js',
'./src/module/exports.js'
],
separator: '\n',
// Note: we insert the css as a string in the javascript code here
// the css will be injected on load of the javascript library
footer: '// inject css\n' +
'util.loadCss(' + cssText + ');\n'
});
// bundle the concatenated script and dependencies into one file
var b = browserify();
b.add(VIS_TMP);
b.bundle({
standalone: 'vis'
}, function (err, code) {
if(err) {
throw err;
}
// add header and footer
var lib = read('./src/module/header.js') + code;
// write bundled file
write(VIS, lib);
console.log('created ' + VIS);
// remove temporary file
fs.unlinkSync(VIS_TMP);
// update version number and stuff in the javascript files
replacePlaceholders(VIS);
complete();
});
});
/**
@ -124,17 +124,17 @@ task('build', {async: true}, function () {
*/
desc('Minify the visualization library vis.js');
task('minify', function () {
// minify javascript
minify({
src: VIS,
dest: VIS_MIN,
header: read('./src/module/header.js')
});
// minify javascript
minify({
src: VIS,
dest: VIS_MIN,
header: read('./src/module/header.js')
});
// update version number and stuff in the javascript files
replacePlaceholders(VIS_MIN);
// update version number and stuff in the javascript files
replacePlaceholders(VIS_MIN);
console.log('created ' + VIS_MIN);
console.log('created ' + VIS_MIN);
});
/**
@ -142,18 +142,18 @@ task('minify', function () {
*/
desc('Test the library');
task('test', ['build'], function () {
// TODO: use a testing suite for testing: nodeunit, mocha, tap, ...
var filelist = new jake.FileList();
filelist.include([
'./test/**/*.js'
]);
var files = filelist.toArray();
files.forEach(function (file) {
require('./' + file);
});
console.log('Executed ' + files.length + ' test files successfully');
// TODO: use a testing suite for testing: nodeunit, mocha, tap, ...
var filelist = new jake.FileList();
filelist.include([
'./test/**/*.js'
]);
var files = filelist.toArray();
files.forEach(function (file) {
require('./' + file);
});
console.log('Executed ' + files.length + ' test files successfully');
});
/**
@ -161,11 +161,11 @@ task('test', ['build'], function () {
* @param {String} filename
*/
var replacePlaceholders = function (filename) {
replace({
replacements: [
{pattern: '@@date', replacement: today()},
{pattern: '@@version', replacement: version()}
],
src: filename
});
replace({
replacements: [
{pattern: '@@date', replacement: today()},
{pattern: '@@version', replacement: version()}
],
src: filename
});
};

+ 27
- 27
README.md View File

@ -40,12 +40,12 @@ To use a component, include the javascript file of vis in your web page:
<!DOCTYPE HTML>
<html>
<head>
<script src="components/vis/vis.js"></script>
<script src="components/vis/vis.js"></script>
</head>
<body>
<script type="text/javascript">
// ... load a visualization
</script>
<script type="text/javascript">
// ... load a visualization
</script>
</body>
</html>
```
@ -54,12 +54,12 @@ or load vis.js using require.js:
```js
require.config({
paths: {
vis: 'path/to/vis',
}
paths: {
vis: 'path/to/vis',
}
});
require(['vis'], function (math) {
// ... load a visualization
// ... load a visualization
});
```
@ -85,30 +85,30 @@ of the project.
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline basic demo</title>
<script src="components/vis/vis.js"></script>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<title>Timeline basic demo</title>
<script src="components/vis/vis.js"></script>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

+ 21
- 21
bower.json View File

@ -1,23 +1,23 @@
{
"name": "vis",
"version": "0.3.0-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/",
"repository": {
"type": "git",
"url": "git://github.com/almende/vis.git"
},
"ignore": [
"node_modules",
"src",
"test",
"tools",
".idea",
"Jakefile.js",
"package.json",
".npmignore",
".gitignore"
],
"dependencies": {},
"devDependencies": {}
"name": "vis",
"version": "0.3.0-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/",
"repository": {
"type": "git",
"url": "git://github.com/almende/vis.git"
},
"ignore": [
"node_modules",
"src",
"test",
"tools",
".idea",
"Jakefile.js",
"package.json",
".npmignore",
".gitignore"
],
"dependencies": {},
"devDependencies": {}
}

+ 51
- 51
docs/css/prettify.css View File

@ -1,87 +1,87 @@
.com {
color: gray;
color: gray;
}
.lit {
color: red;
color: red;
}
.pun {
color: gray;
color: gray;
}
.pln {
color: #333333;
color: #333333;
}
pre.prettyprint {
border: 1px solid lightgray;
background-color: #fcfcfc;
padding: 5px;
border: 1px solid lightgray;
background-color: #fcfcfc;
padding: 5px;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
ol.linenums {
margin-top:0;
margin-bottom:0;
margin-top:0;
margin-bottom:0;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
list-style:none;
list-style:none;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background:#eee;
background:#eee;
}
.str,.atv {
color: green;
color: green;
}
.kwd,.tag {
color:#2B7CE9;
color:#2B7CE9;
}
.typ,.atn,.dec {
color: darkorange;
color: darkorange;
}
@media print {
.com {
color:#600;
font-style:italic;
}
.typ {
color:#404;
font-weight:700;
}
.lit {
color:#044;
}
.pun {
color:#440;
}
.pln {
color:#000;
}
.atn {
color:#404;
}
.str,.atv {
color:#060;
}
.kwd,.tag {
color:#006;
font-weight:700;
}
.com {
color:#600;
font-style:italic;
}
.typ {
color:#404;
font-weight:700;
}
.lit {
color:#044;
}
.pun {
color:#440;
}
.pln {
color:#000;
}
.atn {
color:#404;
}
.str,.atv {
color:#060;
}
.kwd,.tag {
color:#006;
font-weight:700;
}
}

+ 39
- 39
docs/css/style.css View File

@ -1,77 +1,77 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 700px;
max-width: 100%;
box-sizing: border-box;
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 700px;
max-width: 100%;
box-sizing: border-box;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
font-size: 140%;
}
a > img {
border: none;
border: none;
}
a {
color: #2B7CE9;
text-decoration: none;
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
color: red;
text-decoration: underline;
}
table {
border-collapse: collapse;
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 551
- 551
docs/dataset.html
File diff suppressed because it is too large
View File


+ 136
- 136
docs/dataview.html View File

@ -2,69 +2,69 @@
<html>
<head>
<title>vis.js | DataView documentation</title>
<title>vis.js | DataView documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>DataView documentation</h1>
<h1>DataView documentation</h1>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Getting_Data">Getting Data</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Getting_Data">Getting Data</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Overview">Overview</h2>
<h2 id="Overview">Overview</h2>
<p>
A DataView offers a filtered and/or formatted view on a
<a href="dataset.html">DataSet</a>.
One can subscribe on changes in a DataView, and easily get filtered or
formatted data without having to specify filters and field types all
the time.
</p>
<p>
A DataView offers a filtered and/or formatted view on a
<a href="dataset.html">DataSet</a>.
One can subscribe on changes in a DataView, and easily get filtered or
formatted data without having to specify filters and field types all
the time.
</p>
<h2 id="Example">Example</h2>
<h2 id="Example">Example</h2>
<p>
The following example shows how to use a DataView.
</p>
<p>
The following example shows how to use a DataView.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
data.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
// create a DataView
// the view will only contain items having a property group with value 1,
// and will only output fields id, text, and date.
var view = new vis.DataView(data, {
filter: function (item) {
return (item.group == 1);
},
fields: ['id', 'text', 'date']
filter: function (item) {
return (item.group == 1);
},
fields: ['id', 'text', 'date']
});
// subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
console.log('event', event, params);
console.log('event', event, params);
});
// update an item in the data set
@ -78,131 +78,131 @@ console.log('ids', ids); // will output [1, 2]
var items = view.get();
</pre>
<h2 id="Construction">Construction</h2>
<h2 id="Construction">Construction</h2>
<p>
A DataView can be constructed as:
</p>
<p>
A DataView can be constructed as:
</p>
<pre class="prettyprint lang-js">
var data = new vis.DataView(dataset, options)
</pre>
<p>
where:
</p>
<ul>
<li>
<code>dataset</code> is a DataSet or DataView.
</li>
<li>
<code>options</code> is an object which can
contain the following properties. Note that these properties
are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>convert</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="dataset.html#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;]</td>
<td>
An array with field names.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>filter</td>
<td>function</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
</tr>
</table>
</li>
</ul>
<h2 id="Getting_Data">Getting Data</h2>
<p>
Data of the DataView can be retrieved using the method <code>get</code>.
</p>
<p>
where:
</p>
<ul>
<li>
<code>dataset</code> is a DataSet or DataView.
</li>
<li>
<code>options</code> is an object which can
contain the following properties. Note that these properties
are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>convert</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="dataset.html#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;]</td>
<td>
An array with field names.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>filter</td>
<td>function</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
</tr>
</table>
</li>
</ul>
<h2 id="Getting_Data">Getting Data</h2>
<p>
Data of the DataView can be retrieved using the method <code>get</code>.
</p>
<pre class="prettyprint lang-js">
var items = view.get();
</pre>
<p>
Data of a DataView can be filtered and formatted again, in exactly the
same way as in a DataSet. See sections
<a href="dataset.html#Data_Filtering">Data Filtering</a> and
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more
information.
</p>
<p>
Data of a DataView can be filtered and formatted again, in exactly the
same way as in a DataSet. See sections
<a href="dataset.html#Data_Filtering">Data Filtering</a> and
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more
information.
</p>
<pre class="prettyprint lang-js">
var items = view.get({
fields: ['id', 'score'],
filter: function (item) {
return (item.score > 50);
}
fields: ['id', 'score'],
filter: function (item) {
return (item.score > 50);
}
});
</pre>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in the DataView. Subscription works exactly
the same as for DataSets. See the documentation on
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
for more information.
</p>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in the DataView. Subscription works exactly
the same as for DataSets. See the documentation on
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
for more information.
</p>
<pre class="prettyprint lang-js">
// create a DataSet and a view on the data set
var data = new vis.DataSet();
var view = new vis.DataView({
filter: function (item) {
return (item.group == 2);
}
filter: function (item) {
return (item.group == 2);
}
});
// subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
console.log('event:', event, 'params:', params, 'senderId:', senderId);
console.log('event:', event, 'params:', params, 'senderId:', senderId);
});
// add, update, and remove data in the DataSet...
@ -210,11 +210,11 @@ view.subscribe('*', function (event, params, senderId) {
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>
</body>

+ 814
- 814
docs/graph.html
File diff suppressed because it is too large
View File


+ 126
- 126
docs/index.html View File

@ -2,201 +2,201 @@
<html>
<head>
<title>vis.js | documentation</title>
<title>vis.js | documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>vis.js documentation</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data.
</p>
<p>
The library is developed by
<a href="http://almende.com" target="_blank">Almende B.V.</a>
</p>
<h2 id="Components">Components</h2>
<p>
Vis.js contains of the following components:
</p>
<ul>
<li>
<a href="dataset.html"><b>DataSet</b></a>.
A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
A DataSet can filter and order items, and convert fields of items.
</li>
<li>
<a href="dataview.html"><b>DataView</b></a>.
A filtered and/or formatted view on a DataSet.
</li>
<li>
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
</li>
<li>
<a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline. The timeline and the
items on the timeline can be interactively moved, zoomed, and
manipulated.
</li>
</ul>
<div style="text-align: center;">
<a href="img/vis_overview.png" target="_blank">
<img src="img/vis_overview.png" style="width: 250px; "/><br>
(click for a larger view)
</a>
</div>
<h2 id="Install">Install</h2>
<h3>npm</h3>
<h1>vis.js documentation</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data.
</p>
<p>
The library is developed by
<a href="http://almende.com" target="_blank">Almende B.V.</a>
</p>
<h2 id="Components">Components</h2>
<p>
Vis.js contains of the following components:
</p>
<ul>
<li>
<a href="dataset.html"><b>DataSet</b></a>.
A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
A DataSet can filter and order items, and convert fields of items.
</li>
<li>
<a href="dataview.html"><b>DataView</b></a>.
A filtered and/or formatted view on a DataSet.
</li>
<li>
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
</li>
<li>
<a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline. The timeline and the
items on the timeline can be interactively moved, zoomed, and
manipulated.
</li>
</ul>
<div style="text-align: center;">
<a href="img/vis_overview.png" target="_blank">
<img src="img/vis_overview.png" style="width: 250px; "/><br>
(click for a larger view)
</a>
</div>
<h2 id="Install">Install</h2>
<h3>npm</h3>
<pre class="prettyprint">
npm install vis
</pre>
<h3>bower</h3>
<h3>bower</h3>
<pre class="prettyprint">
bower install vis
</pre>
<h3>download</h3>
Download the library from the website:
<a href="http://visjs.org" target="_blank">http://visjs.org</a>.
<h3>download</h3>
Download the library from the website:
<a href="http://visjs.org" target="_blank">http://visjs.org</a>.
<h2 id="Load">Load</h2>
<h2 id="Load">Load</h2>
<p>
To use a component, include the javascript file of vis in your web page:
</p>
<p>
To use a component, include the javascript file of vis in your web page:
</p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
// ... load a visualization
// ... load a visualization
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
or load vis.js using require.js:
</p>
<p>
or load vis.js using require.js:
</p>
<pre class="prettyprint lang-js">
require.config({
paths: {
vis: 'path/to/vis',
}
paths: {
vis: 'path/to/vis',
}
});
require(['vis'], function (math) {
// ... load a visualization
// ... load a visualization
});
</pre>
<p>
A timeline can be instantiated as follows. Other components can be
created in a similar way.
</p>
<p>
A timeline can be instantiated as follows. Other components can be
created in a similar way.
</p>
<pre class="prettyprint lang-js">
var timeline = new vis.Timeline(container, data, options);
</pre>
<p>
Where <code>container</code> is an HTML element, <code>data</code> is
an Array with data or a DataSet, and <code>options</code> is an optional
object with configuration options for the component.
</p>
<p>
Where <code>container</code> is an HTML element, <code>data</code> is
an Array with data or a DataSet, and <code>options</code> is an optional
object with configuration options for the component.
</p>
<h2 id="Use">Use</h2>
<h2 id="Use">Use</h2>
<p>
<p>
A basic example on using a Timeline is shown below. More examples can be
found in the <a href="https://github.com/almende/vis/tree/master/examples"
target="_blank">examples directory</a> of the project.
</p>
target="_blank">examples directory</a> of the project.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="license">License</h2>
<h2 id="license">License</h2>
<p>
Copyright (C) 2010-2013 Almende B.V.
</p>
<p>
Copyright (C) 2010-2013 Almende B.V.
</p>
<p>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
</p>
<p>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
</p>
<p>
<a href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
</p>
<p>
<a href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
</p>
<p>
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
</p>
<p>
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
</p>
</div>
</body>

+ 459
- 459
docs/timeline.html
File diff suppressed because it is too large
View File


+ 34
- 34
examples/graph/01_basic_usage.html View File

@ -1,17 +1,17 @@
<!doctype html>
<html>
<head>
<title>Graph | Basic usage</title>
<title>Graph | Basic usage</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../vis.js"></script>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
@ -19,31 +19,31 @@
<div id="mygraph"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);
</script>
</body>

+ 84
- 84
examples/graph/02_random_nodes.html View File

@ -1,105 +1,105 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<title>Graph | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
connectionCount[i] = 0;
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
// add event listeners
vis.events.addListener(graph, 'select', function(params) {
document.getElementById('selection').innerHTML =
'Selection: ' + graph.getSelection();
});
}
</script>
// add event listeners
vis.events.addListener(graph, 'select', function(params) {
document.getElementById('selection').innerHTML =
'Selection: ' + graph.getSelection();
});
}
</script>
</head>
<body onload="draw();">
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>

+ 72
- 72
examples/graph/03_images.html View File

@ -1,78 +1,78 @@
<!doctype html>
<html>
<head>
<title>Graph | Images</title>
<style type="text/css">
body {
font: 10pt arial;
}