Changes for v22.0.0.OS

This commit is contained in:
Thilina Hasantha
2018-04-28 03:04:36 +02:00
parent d105ee3512
commit 8ebf28fbcb
471 changed files with 160244 additions and 293 deletions

View File

@@ -0,0 +1,52 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
In these examples however, we will focus on what's new in Graph2d!
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graph Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most the same data as the first example, except we plot the data as bars! The
dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
<br /><br />
The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
This example uses the default center alignment.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center'}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,112 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups functionality within Graph2d. This works in the same way as it does in Timeline,
We have however simplified the constructor to accept groups as well to shorten the code. These groups are the
method used in Graph2d to define individual graphs. These groups can be given an individual class as well as all the
styling options you can supply to Graph2d! This example, as well as the ones that follow will showcase a few different usages
of these options. <br /> <br />
This example also introduces the automatically generated legend. The icons are automatically generated and the label is the
content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'.
In this example, the setting <code>defaultGroup</code> is used to rename the default group to 'ungrouped'.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: true,
start: '2014-06-10',
end: '2014-07-04'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,126 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Right Axis Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.custom-style1 {
fill: #0df200;
fill-opacity:0;
stroke-width:2px;
stroke: #0df200;
}
.custom-style2 {
fill: #f23303;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0004;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Right Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 50, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 85, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
legend: {right: {position: 'top-left'}},
yAxisOrientation: 'right', // right, left
dataAxis: {icons: true},
start: '2014-06-10',
end: '2014-07-04',
moveable: false
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,137 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Both Axis Example</title>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../dist/vis.js"></script>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
stroke-width:2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.custom-style3.vis-fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
</head>
<body>
<h2>Graph2d | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,101 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Interpolation</title>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
The Graph2d makes use of <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of
the curves. The options are <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
<br /><br />
For both the <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
if there are very many points. The <code>uniform</code> parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the
linear interpolation is the fastest method. For more on the Catmull-Rom method, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: false,
interpolation: {
parametrization: 'centripetal'
}
}});
groups.add({
id: 1,
content: names[1],
options: {
drawPoints: false,
interpolation: {
parametrization: 'chordal'
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false,
interpolation: {
parametrization: 'uniform'
}
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: { style: 'circle' },
interpolation: false
}});
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
for (var i = 0; i < names.length; i++) {
dataset.add( [
{x: '2014-06-12', y: 0 , group: i},
{x: '2014-06-13', y: 40, group: i},
{x: '2014-06-14', y: 10, group: i},
{x: '2014-06-15', y: 15, group: i},
{x: '2014-06-15', y: 30, group: i},
{x: '2014-06-17', y: 10, group: i},
{x: '2014-06-18', y: 15, group: i},
{x: '2014-06-19', y: 52, group: i},
{x: '2014-06-20', y: 10, group: i},
{x: '2014-06-21', y: 20, group: i}
]);
}
var options = {
drawPoints: false,
dataAxis: {visible: false},
legend: true,
start: '2014-06-11',
end: '2014-06-22'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scrolling and Sorting</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2d seperately from the height of the frame. If the <code>graphHeight</code>
is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
<br /><br />
You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. However, doing so does reduce the optimization
of the drawing so if you have a lot of points, keep <code>sort</code> turned on for the best results.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: 100},
{x: '2014-06-12', y: 250},
{x: '2014-06-13', y: 300},
{x: '2014-06-14', y: 100},
{x: '2014-06-15', y: 150},
{x: '2014-06-16', y: 300},
{x: '2014-06-11', y: 400},
{x: '2014-06-12', y: 450},
{x: '2014-06-13', y: 400},
{x: '2014-06-14', y: 500},
{x: '2014-06-15', y: 420},
{x: '2014-06-16', y: 600},
{x: '2014-06-11', y: 810},
{x: '2014-06-12', y: 825},
{x: '2014-06-13', y: 830},
{x: '2014-06-14', y: 810},
{x: '2014-06-15', y: 815},
{x: '2014-06-16', y: 900}
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
sort: false,
defaultGroup: 'doodle',
graphHeight: '1500px',
height: '500px',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,150 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width:150px;
display:inline-block;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw.
You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more
than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000">
<input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span><input id="interpolation" value="linear">
<input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
<br />
<span class="label">Points style:</span><input id="points" value="none">
<input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
</p>
<div id="visualization"></div>
<script>
var points = 'none';
var interpolation = 'linear';
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = 'circle';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "circle") {
points = 'square';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "square") {
points = 'none';
pointsOptions = {drawPoints: false};
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = 'centripetal';
interpolationOptions = {interpolation: {parametrization: interpolation}};
}
else if (interpolation == "centripetal") {
interpolation = 'chordal';
interpolationOptions = {interpolation: {parametrization: interpolation}};
}
else if (interpolation == "chordal") {
interpolation = 'uniform';
interpolationOptions = {interpolation: {parametrization: interpolation}};
}
else if (interpolation == "uniform") {
interpolation = 'linear';
interpolationOptions = {interpolation: false};
}
interpolationField.value = interpolation;
graph2d.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var dataset = new vis.DataSet({
type: {start: 'ISODate', end: 'ISODate' }
});
var startPoint = now;
var endPoint = now + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
setTimeout(generateData,10);
}
function generateData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
newData.push({id: i, x: start + 3600000 * i, y: yval});
}
span.innerHTML = 'Loading data into Graph2d...';
setTimeout(function() {loadDataIntoVis(newData);},10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = 'Done!';
}
document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
document.getElementById('togglePoints').onclick = togglePoints;
var container = document.getElementById('visualization');
var options = {
sampling: true,
drawPoints: {enabled:false, size:3},
interpolation: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,363 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.custom-style3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.vis-graph-group0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis-graph-group1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis-graph-group2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis-graph-group3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis-graph-group4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis-graph-group5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis-graph-group6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis-graph-group7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis-graph-group8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis-graph-group9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis-fill {
fill-opacity:0.1;
stroke: none;
}
.vis-bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis-point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis-legend-background {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis-outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis-icon-fill {
fill-opacity:0.3;
stroke: none;
}
div.description-container {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.icon-container {
float:left;
}
div.legend-element-container {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legend-element-container.hidden {
background-color: #d3e6ff;
}
svg.legend-icon {
width:30px;
height:30px;
}
div.external-legend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
</div>
<br />
<div id="Legend" class="external-legend"></div>
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legend-element-container';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "icon-container";
descriptionDiv.className = "description-container";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legend-icon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
}
populateExternalLegend()
</script>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graphs Side by Side Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graphs Side by Side Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the <a href="./11_barsSideBySideGroups.html">next example</a>.
<br /><br />
Handle overlap: <select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide">sideBySide</option>
<option value="stack">stack</option>
</select><br/>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: -12},
{x: '2014-06-14', y: 24},
{x: '2014-06-15', y: 5},
{x: '2014-06-16', y: 12}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
stack:false,
barChart: {width:50, align:'center', sideBySide:false}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
graph2d.setOptions(options);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,88 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graphs Side by Side Example with Groups</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown here.
<br /><br />
Handle overlap: <select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide" selected="selected">sideBySide</option>
<option value="stack">stack</option>
</select>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0"})
groups.add({id: 1, content: "group1"})
groups.add({id: 2, content: "group2"})
var items = [
{x: '2014-06-11', y: 10, group:0},
{x: '2014-06-12', y: 25, group:0},
{x: '2014-06-13', y: 30, group:0},
{x: '2014-06-14', y: 10, group:0},
{x: '2014-06-15', y: 15, group:0},
{x: '2014-06-16', y: 30, group:0},
{x: '2014-06-11', y: 12, group:1},
{x: '2014-06-12', y: 15, group:1},
{x: '2014-06-13', y: 34, group:1},
{x: '2014-06-14', y: 24, group:1},
{x: '2014-06-15', y: 5, group:1},
{x: '2014-06-16', y: 12, group:1},
{x: '2014-06-11', y: 22, group:2},
{x: '2014-06-12', y: 14, group:2},
{x: '2014-06-13', y: 24, group:2},
{x: '2014-06-14', y: 21, group:2},
{x: '2014-06-15', y: 30, group:2},
{x: '2014-06-16', y: 18, group:2}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
stack:false,
barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
graph2d.setOptions(options);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,92 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Custom axis range</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
<pre class="prettyprint lang-js">
var options = {
dataAxis: {
left: {
range: {min:-5, max:30}
},
right: {
range: {min:-5}
}
}
};
</pre>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0"})
groups.add({id: 1, content: "group1"})
groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
var items = [
{x: '2014-06-11', y: 10, group:0},
{x: '2014-06-12', y: 25, group:0},
{x: '2014-06-13', y: 30, group:0},
{x: '2014-06-14', y: 10, group:0},
{x: '2014-06-15', y: 15, group:0},
{x: '2014-06-16', y: 30, group:0},
{x: '2014-06-11', y: 12, group:1},
{x: '2014-06-12', y: 15, group:1},
{x: '2014-06-13', y: 34, group:1},
{x: '2014-06-14', y: 24, group:1},
{x: '2014-06-15', y: 5, group:1},
{x: '2014-06-16', y: 12, group:1},
{x: '2014-06-11', y: 22, group:2},
{x: '2014-06-12', y: 14, group:2},
{x: '2014-06-13', y: 24, group:2},
{x: '2014-06-14', y: 21, group:2},
{x: '2014-06-15', y: 30, group:2},
{x: '2014-06-16', y: 18, group:2}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
drawPoints: true,
dataAxis: {
left: {
range: {min:-5, max:30}
},
right: {
range: {min:-5}
},
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Localization</title>
<style type="text/css">
body, html, select {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Localization</h2>
<p>
To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="nl">nl</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
graph2d.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>

View File

@@ -0,0 +1,145 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Toggle Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
div.graphs {
width:300px;
display:inline-block;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
We then use a setOptions like so:
<pre class="prettyprint lang-js">
graph2d1.setOptions({
groups:{
visibility:{
0:true, // group id:0 visible
1:false, // group id:1 hidden
2:false, // group id:2 hidden
3:false, // group id:3 hidden
"__ungrouped__":false // default group hidden
}
}
})
</pre>
</div>
<br />
<div class="graphs" id="visualization1"></div>
<div class="graphs" id="visualization2"></div>
<div class="graphs" id="visualization3"></div>
<div class="graphs" id="visualization4"></div>
<div class="graphs" id="visualization5"></div>
<div class="graphs" id="visualization6"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: false,
graphHeight:200,
start: '2014-06-10',
end: '2014-07-04',
showMajorLabels:false,
showMinorLabels:false
};
var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
</script>
</body>
</html>

View File

@@ -0,0 +1,122 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Streaming data</title>
<style type="text/css">
body, html, select {
font: 10pt sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Streaming data</h2>
<p style="max-width: 700px;">
This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
</p>
<p>
<label for="strategy">Strategy:</label>
<select id="strategy">
<option value="continuous" selected>Continuous (CPU intensive)</option>
<option value="discrete">Discrete</option>
<option value="static">Static</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById('strategy');
// create a graph2d with an (currently empty) dataset
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
var options = {
start: vis.moment().add(-30, 'seconds'), // changed so its faster
end: vis.moment(),
dataAxis: {
left: {
range: {
min:-10, max: 10
}
}
},
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
// a function to generate data points
function y(x) {
return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
}
function renderStep() {
// move the window (you can think of different strategies).
var now = vis.moment();
var range = graph2d.getWindow();
var interval = range.end - range.start;
switch (strategy.value) {
case 'continuous':
// continuously move the window
graph2d.setWindow(now - interval, now, {animation: false});
requestAnimationFrame(renderStep);
break;
case 'discrete':
graph2d.setWindow(now - interval, now, {animation: false});
setTimeout(renderStep, DELAY);
break;
default: // 'static'
// move the window 90% to the left when now is larger than the end of the window
if (now > range.end) {
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
}
setTimeout(renderStep, DELAY);
break;
}
}
renderStep();
/**
* Add a new datapoint to the graph
*/
function addDataPoint() {
// add a new data point to the dataset
var now = vis.moment();
dataset.add({
x: now,
y: y(now / 1000)
});
// remove all data points which are no longer visible
var range = graph2d.getWindow();
var interval = range.end - range.start;
var oldIds = dataset.getIds({
filter: function (item) {
return item.x < range.start - interval;
}
});
dataset.remove(oldIds);
setTimeout(addDataPoint, DELAY);
}
addDataPoint();
</script>
</body>
</html>

View File

@@ -0,0 +1,201 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Axis Titles and Styling</title>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../dist/vis.js"></script>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.custom-style3.vis-fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
</head>
<body>
<h2>Graph2d | Axis Titles and Styling</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
<table>
<tr>
<td>
This example shows setting a title for the left and right axis. Optionally the example allows the user
to show icons and labels on the left and right axis.
</td>
<td>
<table>
<tr>
<td><input type="button" onclick="showIcons(true)" value="Show Icons" /></td>
<td><input type="button" onclick="showIcons(false)" value="Hide Icons" /></td>
</tr>
<tr>
<td><input type="button" onclick="showTitle('left', true)" value="Show Left Title" /></td>
<td><input type="button" onclick="showTitle('left', false)" value="Hide Left Title" /></td>
</tr>
<tr>
<td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
<td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
</tr>
<tr>
<td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
<td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
showMinorLabels: false,
right: {
title: {
text: 'Title (right axis)'
}
}
},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
function showIcons(show) {
graph2d.setOptions({dataAxis: {icons: show}});
}
function showTitle(axis, show) {
var title;
if(show == true) {
title = {text: "Title (" + axis + " axis)"};
}
else {
title = undefined;
}
if(axis == 'left') {
graph2d.setOptions({dataAxis: {left: {title: title}}});
}
else {
graph2d.setOptions({dataAxis: {right: {title: title}}});
}
}
var colors=['red','green','blue','black','yellow','purple','pink'];
function styleTitle(axis) {
var title;
title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
if(axis == 'left') {
graph2d.setOptions({dataAxis: {left: {title: title}}});
}
else {
graph2d.setOptions({dataAxis: {right: {title: title}}});
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,257 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Dynamic Styling</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>Graph2d | Dynamic Styling Example</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to programmatically change the styling of a group. While this can also
be done in CSS, this must be statically defined, and the programmatic interface allows the
user to define the look of the graph at runtime.
</div>
<br/>
<table>
<col width="600">
<col width="220">
<tr>
<td style="padding-right: 20px; border-right: 1px solid;">
<div id="visualization"></div>
</td>
<td style="padding-left: 5px;">
<table style="font-size: 12px;">
<col width="150">
<col width="50">
<tr>
<td>Line Color</td>
<td>
<select id="color" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Line Style</td>
<td>
<select id="line" onchange="updateStyle()">
<option value="stroke-dasharray:1 0;" selected="selected">line</option>
<option value="stroke-dasharray:10 10;">dash</option>
<option value="stroke-dasharray:2 2;">dot</option>
<option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
</select>
</td>
</tr>
<tr>
<td>Line thickness</td>
<td>
<select id="thickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr>
<td>Fill Position</td>
<td>
<select id="fill" onchange="updateStyle()">
<option value="">none</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="zero" selected="selected">zero</option>
</select>
</td>
</tr>
<tr>
<td>Fill Color</td>
<td>
<select id="fillcolor" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Fill Opacity</td>
<td>
<select id="fillopacity" onchange="updateStyle()">
<option value="fill-opacity:0.1;">0.1</option>
<option value="fill-opacity:0.2;">0.2</option>
<option value="fill-opacity:0.3;">0.3</option>
<option value="fill-opacity:0.4;">0.4</option>
<option value="fill-opacity:0.5;">0.5</option>
<option value="fill-opacity:0.6;" selected="selected">0.6</option>
<option value="fill-opacity:0.7;">0.7</option>
<option value="fill-opacity:0.8;">0.8</option>
<option value="fill-opacity:0.9;">0.9</option>
<option value="fill-opacity:1;">1</option>
</select>
</td>
</tr>
<tr>
<td>Points Shape</td>
<td>
<select id="points" onchange="updateStyle()">
<option value="">none</option>
<option value="circle">circle</option>
<option value="square" selected="selected">square</option>
</select>
</td>
</tr>
<tr>
<td>Points Size</td>
<td>
<select id="pointsize" onchange="updateStyle()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>Points Color</td>
<td>
<select id="pointcolor" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Point Line Thickness</td>
<td>
<select id="pointthickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
<tr>
</tr>
<td>Points Fill Color</td>
<td>
<select id="pointfill" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10, group: 0},
{x: '2014-06-12', y: 25, group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: -10, group: 0},
{x: '2014-06-15', y: 15, group: 0},
{x: '2014-06-16', y: 30, group: 0}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
dataAxis: {
showMinorLabels: false,
icons: true
}
};
var groupData = {
id: 0,
content: "Group Name",
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'zero' // top, bottom
}
}
};
var groups = new vis.DataSet();
groups.add(groupData);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
updateStyle();
function updateStyle() {
groupData.style = "";
groupData.style += document.getElementById("color").value;
groupData.style += document.getElementById("line").value;
groupData.style += document.getElementById("thickness").value;
groupData.options.drawPoints = {};
groupData.options.drawPoints.styles = "";
groupData.options.drawPoints.style = document.getElementById("points").value;
groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
if (groupData.options.drawPoints.style == "") {
groupData.options.drawPoints = false;
}
groupData.options.shaded = {};
groupData.options.shaded.style = "";
groupData.options.shaded.style += document.getElementById("fillcolor").value;
groupData.options.shaded.style += document.getElementById("fillopacity").value;
groupData.options.shaded.orientation = document.getElementById("fill").value;
if (groupData.options.shaded.orientation == "") {
groupData.options.shaded = false;
}
var groups = new vis.DataSet();
groups.add(groupData);
graph2d.setGroups(groups);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scatterplot</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Scatterplot</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the
<code>style: 'points'</code> option for making a scatterplot!
</div>
<pre class="prettyprint lang-js">
var options = {
sort: false,
sampling:false,
style:'points'
};
</pre>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [];
for (var i = 0; i < 100; i++) {
items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)});
}
var dataset = new vis.DataSet(items);
var options = {
sort: false,
sampling:false,
style:'points',
dataAxis: {
left: {
range: {
min: 300, max: 800
}
}
},
drawPoints: {
enabled: true,
size: 6,
style: 'circle' // square, circle
},
defaultGroup: 'Scatterplot',
height: '600px'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,135 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.red {
fill:red;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Label Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled.
<br /><br />
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var label1 = {
content: "Label 1 (with offset)",
xOffset: 20,
yOffset: 20
}
var label2 = {
content: "Label 2",
className: "red"
}
var label3 = {
content: "Label 3"
}
var items = [
{group: 1, x: '2014-06-11', y: 10, label: label1},
{group: 1, x: '2014-06-12', y: 25, label: label2},
{group: 1, x: '2014-06-13', y: 30},
{group: 1, x: '2014-06-14', y: 10},
{group: 1, x: '2014-06-15', y: 15, label: label3},
{group: 1, x: '2014-06-16', y: 30},
{group: 2, x: '2014-06-17', y: 10, label:label1},
{group: 2, x: '2014-06-18', y: 25, label:label2},
{group: 2, x: '2014-06-19', y: 30},
{group: 2, x: '2014-06-20', y: 10},
{group: 2, x: '2014-06-21', y: 15, label: label3},
{group: 2, x: '2014-06-22', y: 30},
{group: 3, x: '2014-06-23', y: 10, label:label1},
{group: 3, x: '2014-06-24', y: 25, label:label2},
{group: 3, x: '2014-06-25', y: 30},
{group: 3, x: '2014-06-26', y: 10},
{group: 3, x: '2014-06-27', y: 15, label: label3},
{group: 3, x: '2014-06-28', y: 30}
];
var groups = new vis.DataSet();
groups.add(
{
id: 1,
content: "Only draw items with labels. Make the data point bigger and a square.",
options: {
drawPoints: function group1Renderer(item, group, grap2d) {
if (item.label == null) {
return false;
}
return {
style: 'square',
size: 15
};
}
}
}
);
groups.add(
{
id: 2,
content: "Draw according to the Graph2d callback, but make it every datapoint square one.",
options: {
drawPoints: {
style: 'square'
}
}
}
);
groups.add(
{
id: 3,
content: "I want to render datapoints with no labels. Screw the graph2d options. Except the style/size should be according to the graph2d option.",
options: {
drawPoints: function(item, group, grap2d) {
return item.label == null;
}
}
}
);
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-29',
style: 'bar',
drawPoints: {
onRender: function(item, group, grap2d) {
return item.label != null;
},
style: 'circle'
}
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Shading Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Shading Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the shading functionality within Graph2d.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['top', 'bottom', 'zero', 'none', 'group', 'none'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
shaded: {
orientation: 'top'
}
}});
groups.add({
id: 1,
content: names[1],
options: {
shaded: {
orientation: 'bottom'
}
}});
groups.add({
id: 2,
content: names[2],
options: {
shaded: {
orientation: 'zero'
}
}});
groups.add({
id: 3,
options: {
excludeFromLegend: true
}
});
groups.add({
id: 4,
content: names[4],
options: {
shaded: {
orientation: 'group',
groupId: '3'
}
}
});
groups.add({
id: 5,
content: names[5]
});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 0, group: 0},
{x: '2014-06-12', y: 15, group: 0},
{x: '2014-06-13', y: -15, group: 0},
{x: '2014-06-14', y: 0, group: 0},
{x: '2014-06-15', y: 0, group: 1},
{x: '2014-06-16', y: 15, group: 1},
{x: '2014-06-17', y: -15, group: 1},
{x: '2014-06-18', y: 0, group: 1},
{x: '2014-06-19', y: 0, group: 2},
{x: '2014-06-20', y: 15, group: 2},
{x: '2014-06-21', y: -15, group: 2},
{x: '2014-06-22', y: 0, group: 2},
{x: '2014-06-23', y: -2, group: 3},
{x: '2014-06-24', y: 13, group: 3},
{x: '2014-06-25', y: -17, group: 3},
{x: '2014-06-26', y: -2, group: 3},
{x: '2014-06-23', y: 2, group: 4},
{x: '2014-06-24', y: 17, group: 4},
{x: '2014-06-25', y: -13, group: 4},
{x: '2014-06-26', y: 2, group: 4},
{x: '2014-06-27', y: 0, group: 5},
{x: '2014-06-28', y: 15, group: 5},
{x: '2014-06-29', y: -15, group: 5},
{x: '2014-06-30', y: 0, group: 5}
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
start: '2014-06-07',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graph With End Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how you can plot a bar chart and supply an end value to have it fill.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11 00:00:00', end: '2014-06-13 00:00:00', y: 10 },
{x: '2014-06-13 00:00:00', end: '2014-06-14 00:00:00', y: 15 },
{x: '2014-06-15 00:00:00', end: '2014-06-16 00:00:00', y: 14 },
{x: '2014-06-16 00:00:00', end: '2014-06-17 00:00:00', y: 17 },
{x: '2014-06-17 00:00:00', end: '2014-06-18 00:00:00', y: 20 },
{x: '2014-06-18 00:00:00', end: '2014-06-25 00:00:00', y: 25 },
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,87 @@
html, body {
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;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
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;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
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;
}

View File

@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// Instantiate our graph object.
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,110 @@
<!doctype html>
<html>
<head>
<title>Graph 3D camera position</title>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// callback function, called when the camera position has changed
function onCameraPositionChange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
// set the camera position
function setCameraPosition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
horizontal: horizontal,
vertical: vertical,
distance: distance
};
graph.setCameraPosition(pos);
// retrieve the camera position again, to get the applied values
onCameraPositionChange();
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add([
{x:x,y:y,z:value,t:0,style:value}
]);
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.on('cameraPositionChange', onCameraPositionChange);
}
</script>
</head>
<body onload="drawVisualization()">
<h1>Graph 3d camera position</h1>
<table>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setCameraPosition();"></td>
</tr>
</table>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = [];
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
var valueRange = (value > 67) ? '67-100' :
(value < 33) ? '0-33' :
'33-67';
data.push({x:x,y:y,z:value,filter:valueRange,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: 'values'
};
// Create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<title>Graph 3D animation demo</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 25;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!doctype html>
<html>
<head>
<title>Graph 3D line demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'line',
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!doctype html>
<html>
<head>
<title>Graph 3D animation moving dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// a dot in the center
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-color',
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: 'color value',
cameraPosition: {
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,72 @@
<!doctype html>
<html>
<head>
<title>Graph 3D cloud with colored dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function onclick(point) {
console.log(point);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var style = (i%2==0) ? sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)) : "#00ffff";
data.add({x:x,y:y,z:z,style:style});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-color',
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: 'distance',
onclick: onclick,
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<title>Graph 3D cloud with sized dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
data.add({x:x,y:y,z:z,style:range});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-size',
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:'value',
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
},
dotSizeMinFraction: 0.5,
dotSizeMaxFraction: 2.5
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 10; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add([
{x:x,y:y,z:value}
]);
}
}
// specify options
var options = {
width: '100%',
height: '100%',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onresize="graph.redraw();" onload="drawVisualization()">
<div id="mygraph"></div>
</body>
</html>

View File

@@ -0,0 +1,121 @@
<!doctype html>
<html>
<head>
<title>Graph 3D styles</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var showPerspective = document.getElementById('perspective').checked;
var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = [];
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.push({x:x, y:y, z: z, style:value});
}
else {
data.push({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
xBarWidth: xBarWidth,
yBarWidth: yBarWidth,
showPerspective: showPerspective,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
document.getElementById('perspective').onchange = drawVisualization;
document.getElementById('xBarWidth').onchange = drawVisualization;
document.getElementById('yBarWidth').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<p>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
</p>
<p>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<p>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,132 @@
<!doctype html>
<html>
<head>
<title>Graph 3D tooltips</title>
<style>
body {font: 10pt arial;}
div#info {
width : 600px;
text-align: center;
margin-top: 2em;
font-size : 1.2em;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = new vis.DataSet();
var extra_content = [
'Arbitrary information',
'You can access data from the point source object',
'Tooltip example content',
];
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]});
}
else {
data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
showPerspective: true,
showLegend: true,
showGrid: true,
showShadow: false,
// Option tooltip can be true, false, or a function returning a string with HTML contents
tooltip: function (point) {
// parameter point contains properties x, y, z, and data
// data is the original object passed to the point constructor
return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
},
// Tooltip default styling can be overridden
tooltipStyle: {
content: {
background : 'rgba(255, 255, 255, 0.7)',
padding : '10px',
borderRadius : '10px'
},
line: {
borderLeft : '1px dotted rgba(0, 0, 0, 0.5)'
},
dot: {
border : '5px solid rgba(0, 0, 0, 0.5)'
}
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<div id="mygraph"></div>
<div id="info">Hover the mouse cursor over the graph to see tooltips.</div>
</body>
</html>

View File

@@ -0,0 +1,116 @@
<!doctype html>
<html>
<head>
<title>Graph 3D Axis Ticks</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10) * 1000;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) {
// parameter point contains properties x, y, z
return 'value: <b>' + point.z + '</b>';
},
xValueLabel: function(value) {
return vis.moment().add(value, 'days').format('DD MMM');
},
yValueLabel: function(value) {
return value * 10 + '%';
},
zValueLabel: function(value) {
return value / 1000 + 'K';
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

View File

@@ -0,0 +1,87 @@
html, body {
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;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
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;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
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;
}

View File

@@ -0,0 +1,120 @@
/**
* Convert data in CSV (comma separated value) format to a javascript array.
*
* Values are separated by a comma, or by a custom one character delimeter.
* Rows are separated by a new-line character.
*
* Leading and trailing spaces and tabs are ignored.
* Values may optionally be enclosed by double quotes.
* Values containing a special character (comma's, double-quotes, or new-lines)
* must be enclosed by double-quotes.
* Embedded double-quotes must be represented by a pair of consecutive
* double-quotes.
*
* Example usage:
* var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
* var array = csv2array(csv);
*
* Author: Jos de Jong, 2010
*
* @param {string} data The data in CSV format.
* @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
* The Delimeter must be a single character.
* @return {Array} array A two dimensional array containing the data
* @throw {String} error The method throws an error when there is an
* error in the provided data.
*/
function csv2array(data, delimeter) {
// Retrieve the delimeter
if (delimeter == undefined)
delimeter = ',';
if (delimeter && delimeter.length > 1)
delimeter = ',';
// initialize variables
var newline = '\n';
var eof = '';
var i = 0;
var c = data.charAt(i);
var row = 0;
var col = 0;
var array = new Array();
while (c != eof) {
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i); // read next char
}
// get value
var value = "";
if (c == '\"') {
// value enclosed by double-quotes
c = data.charAt(++i);
do {
if (c != '\"') {
// read a regular character and go to the next character
value += c;
c = data.charAt(++i);
}
if (c == '\"') {
// check for escaped double-quote
var cnext = data.charAt(i+1);
if (cnext == '\"') {
// this is an escaped double-quote.
// Add a double-quote to the value, and move two characters ahead.
value += '\"';
i += 2;
c = data.charAt(i);
}
}
}
while (c != eof && c != '\"');
if (c == eof) {
throw "Unexpected end of data, double-quote expected";
}
c = data.charAt(++i);
}
else {
// value without quotes
while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
value += c;
c = data.charAt(++i);
}
}
// add the value to the array
if (array.length <= row)
array.push(new Array());
array[row].push(value);
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i);
}
// go to the next row or column
if (c == delimeter) {
// to the next column
col++;
}
else if (c == newline) {
// to the next row
col = 0;
row++;
}
else if (c != eof) {
// unexpected character
throw "Delimiter expected after character " + i;
}
// go to the next character
c = data.charAt(++i);
}
return array;
}

View File

@@ -0,0 +1,80 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Convert CSV to Google Datatable</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="csv2array.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function loaded() {
}
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(loaded);
// Called when the Visualization API is loaded.
function convert() {
var csv = document.getElementById("csv").value;
var datatable = "";
// parse the csv content
var csvArray = csv2array(csv);
// Create and populate a data table.
datatable += "data = new google.visualization.DataTable();\n";
// read the header row
for (var col = 0; col < csvArray[0].length; col++) {
datatable += "data.addColumn('number', '" + csvArray[0][col] + "');\n";
}
// read all data
for (var row = 1; row < csvArray.length; row++) {
datatable += "data.addRow([";
for (var col = 0; col < csvArray[row].length; col++) {
if (col != 0)
datatable += ", ";
datatable += csvArray[row][col];
}
datatable += "]);\n";
}
document.getElementById("datatable").value = datatable;
alert(csvArray.length + " rows converted");
}
</script>
</head>
<body>
<div id="graph"></div>
<div id="info"></div>
<b>CSV</b><br>
<textarea id="csv" style="width: 400px; height: 300px;"></textarea>
<br>
<br>
<input type="button" value="Convert" onclick="convert();">
<br>
<br>
<b>Google DataTable</b><br>
<textarea id="datatable" style="width: 400px; height: 300px;"></textarea>
</body>
</html>

View File

@@ -0,0 +1,173 @@
<html>
<head>
<title>Graph3d documentation</title>
<link rel='stylesheet' href='default.css' type='text/css'>
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-php">
&lt;?php
/*
This datasource returns a response in the form of a google query response
USAGE
All parameters are optional
datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
DOCUMENTATION
http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
EXAMPLE OF A RESPONSE FILE
Note that the reqId in the response must correspond with the reqId from the
request.
________________________________________________________________________________
google.visualization.Query.setResponse({
version:'0.6',
reqId:'0',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'value',
type:'number'}
],
rows:[
{c:[{v:0}, {v:0}, {v:10.0}]},
{c:[{v:1}, {v:0}, {v:12.0}]},
{c:[{v:2}, {v:0}, {v:13.0}]},
{c:[{v:0}, {v:1}, {v:11.0}]},
{c:[{v:1}, {v:1}, {v:14.0}]},
{c:[{v:2}, {v:1}, {v:11.0}]}
]
}
});
________________________________________________________________________________
*/
/**
* A custom function
*/
function custom($x, $y) {
$d = sqrt(pow($x/100, 2) + pow($y/100, 2));
return 50 * exp(-5 * $d / 10) * sin($d*5)
}
// retrieve parameters
$default_stepnum = 25;
$xmin = isset($_REQUEST['xmin']) ? (float)$_REQUEST['xmin'] : -100;
$xmax = isset($_REQUEST['xmax']) ? (float)$_REQUEST['xmax'] : 100;
$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
$ymin = isset($_REQUEST['ymin']) ? (float)$_REQUEST['ymin'] : -100;
$ymax = isset($_REQUEST['ymax']) ? (float)$_REQUEST['ymax'] : 100;
$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
// in the reply we must fill in the request id that came with the request
$reqId = getReqId();
// check for a maximum number of datapoints (for safety)
if ($xstepnum * $ystepnum &gt; 10000) {
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'error',
errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
});";
exit;
}
// output the header part of the response
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'',
type:'number'}
],
rows:[";
// output the actual values
$first = true;
$xstep = ($xmax - $xmin) / $xstepnum;
$ystep = ($ymax - $ymin) / $ystepnum;
for ($x = $xmin; $x &lt; $xmax; $x+=$xstep) {
for ($y = $ymin; $y &lt; $ymax; $y+=$ystep) {
$value = custom($x,$y);
if (!$first) {
echo ",\n";
}
else {
echo "\n";
}
echo " {c:[{v:$x}, {v:$y}, {v:$value}]}";
$first = false;
}
}
// output the end part of the response
echo "
]
}
});
";
/**
* Retrieve the request id from the get/post data
* @return {number} $reqId The request id, or 0 if not found
*/
function getReqId() {
$reqId = 0;
foreach ($_REQUEST as $req) {
if (substr($req, 0,6) == "reqId:") {
$reqId = substr($req, 6);
}
}
return $reqId;
}
?&gt;
</pre>
</body>
</html>

View File

@@ -0,0 +1,155 @@
<?php
/*
This datasource returns a response in the form of a google query response
USAGE
All parameters are optional
datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
DOCUMENTATION
http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
EXAMPLE OF A RESPONSE FILE
Note that the reqId in the response must correspond with the reqId from the
request.
________________________________________________________________________________
google.visualization.Query.setResponse({
version:'0.6',
reqId:'0',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'value',
type:'number'}
],
rows:[
{c:[{v:0}, {v:0}, {v:10.0}]},
{c:[{v:1}, {v:0}, {v:12.0}]},
{c:[{v:2}, {v:0}, {v:13.0}]},
{c:[{v:0}, {v:1}, {v:11.0}]},
{c:[{v:1}, {v:1}, {v:14.0}]},
{c:[{v:2}, {v:1}, {v:11.0}]}
]
}
});
________________________________________________________________________________
*/
/**
* A custom function
*/
function custom($x, $y) {
$d = sqrt(pow($x/100, 2) + pow($y/100, 2));
return 50 * exp(-5 * $d / 10) * sin($d*5);
}
// retrieve parameters
$default_stepnum = 25;
$xmin = isset($_REQUEST['xmin']) ? (float)$_REQUEST['xmin'] : -100;
$xmax = isset($_REQUEST['xmax']) ? (float)$_REQUEST['xmax'] : 100;
$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
$ymin = isset($_REQUEST['ymin']) ? (float)$_REQUEST['ymin'] : -100;
$ymax = isset($_REQUEST['ymax']) ? (float)$_REQUEST['ymax'] : 100;
$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
// in the reply we must fill in the request id that came with the request
$reqId = getReqId();
// check for a maximum number of datapoints (for safety)
if ($xstepnum * $ystepnum > 10000) {
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'error',
errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
});";
exit;
}
// output the header part of the response
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'',
type:'number'}
],
rows:[";
// output the actual values
$first = true;
$xstep = ($xmax - $xmin) / $xstepnum;
$ystep = ($ymax - $ymin) / $ystepnum;
for ($x = $xmin; $x < $xmax; $x+=$xstep) {
for ($y = $ymin; $y < $ymax; $y+=$ystep) {
$value = custom($x,$y);
if (!$first) {
echo ",\n";
}
else {
echo "\n";
}
echo " {c:[{v:$x}, {v:$y}, {v:$value}]}";
$first = false;
}
}
// output the end part of the response
echo "
]
}
});
";
/**
* Retrieve the request id from the get/post data
* @return {number} $reqId The request id, or 0 if not found
*/
function getReqId() {
$reqId = 0;
foreach ($_REQUEST as $req) {
if (substr($req, 0,6) == "reqId:") {
$reqId = substr($req, 6);
}
}
return $reqId;
}
?>

View File

@@ -0,0 +1,196 @@
<!doctype html>
<html>
<head>
<title>Graph 3D - Playground</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<script type="text/javascript" src="playground.js"></script>
<script type="text/javascript" src="csv2array.js"></script>
<link rel='stylesheet' href='playground.css' type='text/css'>
<script type="text/javascript">
// Called when the Visualization API is loaded.
function drawVisualization() {
// TODO
}
</script>
</head>
<body onload="load();">
<h1>Graph 3D - Playground</h1>
<table style="width:100%;">
<col width="50%">
<col width="50%">
<tr>
<td>
<h2>Data</h2>
<p>
Graph 3D expects a data table with first three to five columns:
colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
<code>style</code>, <code>filter</code> (optional).
</p>
<table>
<tr>
<td style="white-space: nowrap">
<input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
</td>
<td>
<div id="csv">
<textarea id="csvTextarea"></textarea>
<p>
<a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
<a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
<a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
<a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
<a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
<a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
</p>
</div>
</td>
</tr>
<!-- TODO: add JSON examples -->
</table>
<br>
</td>
<td rowspan=2>
<h2>Graph</h2>
<p>
<input type="button" value="Draw graph" onclick="draw();" id="draw">
</p>
<div id="graph"></div>
</td>
</tr>
<tr>
<td>
<h2>Options</h2>
<table>
<tr>
<th>Option</th>
<th>Value</th>
</tr>
<tr>
<td>width</td>
<td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
</tr>
<tr>
<td>height</td>
<td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
</tr>
<tr>
<td>style</td>
<td>
<select id="style">
<option value="bar" >bar
<option value="bar-color" >bar-color
<option value="bar-size" >bar-size
<option value="dot" >dot
<option value="dot-color" >dot-color
<option value="dot-size" >dot-size
<option value="dot-line" >dot-line
<option value="line" >line
<option value="grid" >grid
<option value="surface" selected>surface
</select>
</tr>
<tr>
<td>showAnimationControls</td>
<td><input type="checkbox" id="showAnimationControls" checked /></td>
</tr>
<tr>
<td>showGrid</td>
<td><input type="checkbox" id="showGrid" checked /></td>
</tr>
<tr>
<td>showXAxis</td>
<td><input type="checkbox" id="showXAxis" checked /></td>
</tr>
<tr>
<td>showYAxis</td>
<td><input type="checkbox" id="showYAxis" checked /></td>
</tr>
<tr>
<td>showZAxis</td>
<td><input type="checkbox" id="showZAxis" checked /></td>
</tr>
<tr>
<td>showPerspective</td>
<td><input type="checkbox" id="showPerspective" checked /></td>
</tr>
<tr>
<td>showLegend</td>
<td><input type="checkbox" id="showLegend" checked /></td>
</tr>
<tr>
<td>showShadow</td>
<td><input type="checkbox" id="showShadow" /></td>
</tr>
<tr>
<td>keepAspectRatio</td>
<td><input type="checkbox" id="keepAspectRatio" checked /></td>
</tr>
<tr>
<td>verticalRatio</td>
<td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
</tr>
<tr>
<td>animationInterval</td>
<td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
</tr>
<tr>
<td>animationPreload</td>
<td><input type="checkbox" id="animationPreload" /></td>
</tr>
<tr>
<td>animationAutoStart</td>
<td><input type="checkbox" id="animationAutoStart" /></td>
</tr>
<tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
<tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
<tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
<tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
<tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
<tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
<tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
<tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
<tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
<tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
<tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
<tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
<tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
<tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
<tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
<tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
<tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
<tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
<tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
<tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
</table>
</td>
</tr>
</table>
</body>

View File

@@ -0,0 +1,91 @@
body
{
font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
h1
{
font-size: 180%;
font-weight: bold;
margin: 1em 0 1em 0;
}
h2
{
font-size: 140%;
padding: 5px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3
{
font-size: 100%;
}
hr
{
border: none 0;
border-top: 1px solid #a0c0f0;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
table
{
border-collapse: collapse;
}
th, td
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
vertical-align: top;
/*border: 1px solid #888;*/
padding: 3px;
}
th
{
font-weight: bold;
}
textarea {
width: 500px;
height: 200px;
border: 1px solid #888;
}
input[type=text] {
border: 1px solid #888;
}
#datasourceText, #googlespreadsheetText {
width: 500px;
}
.info {
color: gray;
}
a {
color: gray;
}
a:hover {
color: red;
}
#graph {
width: 100%;
height: 600px;
}

View File

@@ -0,0 +1,550 @@
var query = null;
function load() {
selectDataType();
loadCsvExample();
loadJsonExample();
loadJavascriptExample();
loadGooglespreadsheetExample();
loadDatasourceExample();
draw();
}
/**
* Upate the UI based on the currently selected datatype
*/
function selectDataType() {
}
function round(value, decimals) {
return parseFloat(value.toFixed(decimals));
}
function loadCsvExample() {
var csv = "";
// headers
csv += '"x", "y", "value"\n';
// create some nice looking data with sin/cos
var steps = 30;
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n';
}
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "surface";
document.getElementById("verticalRatio").value = "0.5";
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "value";
document.getElementById("filterLabel").value = "";
document.getElementById("legendLabel").value = "";
drawCsv();
}
function loadCsvAnimationExample() {
var csv = "";
// headers
csv += '"x", "y", "value", "time"\n';
// create some nice looking data with sin/cos
var steps = 20;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + ', ' + t + '\n';
}
}
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "surface";
document.getElementById("verticalRatio").value = "0.5";
document.getElementById("animationInterval").value = 100;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "value";
document.getElementById("filterLabel").value = "time";
document.getElementById("legendLabel").value = "";
drawCsv();
}
function loadCsvLineExample() {
var csv = "";
// headers
csv += '"sin(t)", "cos(t)", "t"\n';
// create some nice looking data with sin/cos
var steps = 100;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "line";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = false;
document.getElementById("xLabel").value = "sin(t)";
document.getElementById("yLabel").value = "cos(t)";
document.getElementById("zLabel").value = "t";
document.getElementById("filterLabel").value = "";
document.getElementById("legendLabel").value = "";
drawCsv();
}
function loadCsvMovingDotsExample() {
var csv = "";
// headers
csv += '"x", "y", "z", "color value", "time"\n';
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// a dot in the center
var x = 0;
var y = 0;
var z = 0;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
//data.addRow([sin(tdot), cos(tdot), sin(tdot), value, tgroup]);
//data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]);
var x = sin(tdot);
var y = cos(tdot);
var z = sin(tdot);
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
var x = sin(tdot);
var y = -cos(tdot);
var z = sin(tdot + tmax*1/2);
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
}
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "dot-color";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("animationInterval").value = "35";
document.getElementById("animationAutoStart").checked = true;
document.getElementById("showPerspective").checked = true;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "z";
document.getElementById("filterLabel").value = "time";
document.getElementById("legendLabel").value = "color value";
drawCsv();
}
function loadCsvColoredDotsExample() {
var csv = "";
// headers
csv += '"x", "y", "z", "distance"\n';
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 200;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(dist, 2)+ '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "dot-color";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = true;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "value";
document.getElementById("legendLabel").value = "distance"
document.getElementById("filterLabel").value = "";
drawCsv();
}
function loadCsvSizedDotsExample() {
var csv = "";
// headers
csv += '"x", "y", "z", "range"\n';
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 200;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(range, 2)+ '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "dot-size";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = true;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "z";
document.getElementById("legendLabel").value = "range";
document.getElementById("filterLabel").value = "";
drawCsv();
}
function loadJsonExample() {
}
function loadJavascriptExample() {
}
function loadJavascriptFunctionExample() {
}
function loadGooglespreadsheetExample() {
}
function loadDatasourceExample() {
}
/**
* Retrieve teh currently selected datatype
* @return {string} datatype
*/
function getDataType() {
return "csv";
}
/**
* Retrieve the datatable from the entered contents of the csv text
* @param {boolean} [skipValue] | if true, the 4th element is a filter value
* @return {vis.DataSet}
*/
function getDataCsv() {
var csv = document.getElementById("csvTextarea").value;
// parse the csv content
var csvArray = csv2array(csv);
var data = new vis.DataSet();
var skipValue = false;
if (document.getElementById("filterLabel").value != "" && document.getElementById("legendLabel").value == "") {
skipValue = true;
}
// read all data
for (var row = 1; row < csvArray.length; row++) {
if (csvArray[row].length == 4 && skipValue == false) {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
style:parseFloat(csvArray[row][3])});
}
else if (csvArray[row].length == 4 && skipValue == true) {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
filter:parseFloat(csvArray[row][3])});
}
else if (csvArray[row].length == 5) {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
style:parseFloat(csvArray[row][3]),
filter:parseFloat(csvArray[row][4])});
}
else {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
style:parseFloat(csvArray[row][2])});
}
}
return data;
}
/**
* remove leading and trailing spaces
*/
function trim(text) {
while (text.length && text.charAt(0) == ' ')
text = text.substr(1);
while (text.length && text.charAt(text.length-1) == ' ')
text = text.substr(0, text.length-1);
return text;
}
/**
* Retrieve the datatable from the entered contents of the javascript text
* @return {vis.DataSet}
*/
function getDataJson() {
var json = document.getElementById("jsonTextarea").value;
var data = new google.visualization.DataTable(json);
return data;
}
/**
* Retrieve the datatable from the entered contents of the javascript text
* @return {vis.DataSet}
*/
function getDataJavascript() {
var js = document.getElementById("javascriptTextarea").value;
eval(js);
return data;
}
/**
* Retrieve the datatable from the entered contents of the datasource text
* @return {vis.DataSet}
*/
function getDataDatasource() {
}
/**
* Retrieve a JSON object with all options
*/
function getOptions() {
var options = {
width: document.getElementById("width").value,
height: document.getElementById("height").value,
style: document.getElementById("style").value,
showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
showGrid: (document.getElementById("showGrid").checked != false),
showXAxis: (document.getElementById("showXAxis").checked != false),
showYAxis: (document.getElementById("showYAxis").checked != false),
showZAxis: (document.getElementById("showZAxis").checked != false),
showPerspective: (document.getElementById("showPerspective").checked != false),
showLegend: (document.getElementById("showLegend").checked != false),
showShadow: (document.getElementById("showShadow").checked != false),
keepAspectRatio: (document.getElementById("keepAspectRatio").checked != false),
verticalRatio: Number(document.getElementById("verticalRatio").value) || undefined,
animationInterval: Number(document.getElementById("animationInterval").value) || undefined,
xLabel: document.getElementById("xLabel").value,
yLabel: document.getElementById("yLabel").value,
zLabel: document.getElementById("zLabel").value,
filterLabel: document.getElementById("filterLabel").value,
legendLabel: document.getElementById("legendLabel").value,
animationPreload: (document.getElementById("animationPreload").checked != false),
animationAutoStart:(document.getElementById("animationAutoStart").checked != false),
xCenter: document.getElementById("xCenter").value,
yCenter: document.getElementById("yCenter").value,
xMin: Number(document.getElementById("xMin").value) || undefined,
xMax: Number(document.getElementById("xMax").value) || undefined,
xStep: Number(document.getElementById("xStep").value) || undefined,
yMin: Number(document.getElementById("yMin").value) || undefined,
yMax: Number(document.getElementById("yMax").value) || undefined,
yStep: Number(document.getElementById("yStep").value) || undefined,
zMin: Number(document.getElementById("zMin").value) || undefined,
zMax: Number(document.getElementById("zMax").value) || undefined,
zStep: Number(document.getElementById("zStep").value) || undefined,
valueMin: Number(document.getElementById("valueMin").value) || undefined,
valueMax: Number(document.getElementById("valueMax").value) || undefined,
xBarWidth: Number(document.getElementById("xBarWidth").value) || undefined,
yBarWidth: Number(document.getElementById("yBarWidth").value) || undefined
};
return options;
}
/**
* Redraw the graph with the entered data and options
*/
function draw() {
return drawCsv();
}
function drawCsv() {
// retrieve data and options
var data = getDataCsv();
var options = getOptions();
// Creat a graph
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
function drawJson() {
// retrieve data and options
var data = getDataJson();
var options = getOptions();
// Creat a graph
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
function drawJavascript() {
// retrieve data and options
var data = getDataJavascript();
var options = getOptions();
// Creat a graph
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
function drawGooglespreadsheet() {
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// retrieve the data from the query response
data = response.getDataTable();
// specify options
options = getOptions();
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
url = document.getElementById("googlespreadsheetText").value;
document.getElementById("draw").disabled = "disabled";
// send the request
query && query.abort();
query = new google.visualization.Query(url);
query.send(drawGraph);
}
function drawDatasource() {
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// retrieve the data from the query response
data = response.getDataTable();
// specify options
options = getOptions();
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
};
url = document.getElementById("datasourceText").value;
document.getElementById("draw").disabled = "disabled";
// if the entered url is a google spreadsheet url, replace the part
// "/ccc?" with "/tq?" in order to retrieve a neat data query result
if (url.indexOf("/ccc?")) {
url.replace("/ccc?", "/tq?");
}
// send the request
query && query.abort();
query = new google.visualization.Query(url);
query.send(drawGraph);
}

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])

View File

@@ -0,0 +1 @@
PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])

View File

@@ -0,0 +1,3 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])

View File

@@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
["yaml","yml"])

View File

@@ -0,0 +1 @@
.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{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}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}

View File

@@ -0,0 +1,33 @@
window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
(function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push(" ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
"htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
" "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
PR_TAG:"tag",PR_TYPE:S}})()

View File

@@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 3, to: 3}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,140 @@
<!doctype html>
<html>
<head>
<title>Network | Dynamic Data</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
h4 {
margin-bottom:3px;
}
</style>
</head>
<p>
You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
</p>
<h4>DataSet (change the data while it's loaded and initialzed):</h4>
<input type="button" onclick="addNode()" value="add node dynamically"> <br />
<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
<h4>setOptions (change the global options):</h4>
<input type="button" onclick="changeOptions()" value="change the global options"><br />
<h4>setData (reinitialize the data): </h4>
<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
<h4>Cleanly destroy the network and restart it:</h4>
<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
<div id="mynetwork"></div>
<script type="text/javascript">
var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
function startNetwork() {
// this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
nodeIds = [2, 3, 4, 5];
shadowState = false;
// create an array with nodes
nodesArray = [
{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'}
];
nodes = new vis.DataSet(nodesArray);
// create an array with edges
edgesArray = [
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
];
edges = new vis.DataSet(edgesArray);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
function addNode() {
var newId = (Math.random() * 1e7).toString(32);
nodes.add({id:newId, label:"I'm new!"});
nodeIds.push(newId);
}
function changeNode1() {
var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
nodes.update([{id:1, color:{background:newColor}}]);
}
function removeRandomNode() {
var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
nodes.remove({id:randomNodeId});
var index = nodeIds.indexOf(randomNodeId);
nodeIds.splice(index,1);
}
function changeOptions() {
shadowState = !shadowState;
network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
}
function resetAllNodes() {
nodes.clear();
edges.clear();
nodes.add(nodesArray);
edges.add(edgesArray);
}
function resetAllNodesStabilize() {
resetAllNodes();
network.stabilize();
}
function setTheData() {
nodes = new vis.DataSet(nodesArray);
edges = new vis.DataSet(edgesArray);
network.setData({nodes:nodes, edges:edges})
}
function resetAll() {
if (network !== null) {
network.destroy();
network = null;
}
startNetwork();
}
startNetwork();
</script>
</body>
</html>

View File

@@ -0,0 +1,23 @@
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled color=#FF00FF fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}

View File

@@ -0,0 +1,19 @@
digraph topology
{
node[shape=circle fontsize=12]
edge[length=170 fontsize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}

View File

@@ -0,0 +1,15 @@
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}

View File

@@ -0,0 +1,197 @@
<!doctype html>
<html>
<head>
<title>Network | DOT edge styles</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw, #reset {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1>DOT edge styles</h1>
<div>
<p>
Example of edge styles support
</p>
<ul>
<li> label: text displayed on the edge</li>
<li> color: edge color</li>
<li> style: edge style is solid(default), dashed or dotted</li>
</ul>
</div>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<button id="reset" title="Reset the DOT graph">Reset</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
var dotDefault = "digraph {\n" +
" Parent -> C1[label=\"default\"]; // Default style is solid \n" +
" Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
" Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
" Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
"}";
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('#reset').click(reset);
$(window).resize(resize);
$(window).load(draw);
$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
function reset() {
$('#data').val(dotDefault);
draw();
}
window.onload = function() {
reset();
}
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<html>
<head>
<title>Network | DOT Language</title>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var dot = 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var data = vis.network.convertDot(dot);
var network = new vis.Network(container, data);
</script>
</body>
</html>

View File

@@ -0,0 +1,216 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1>DOT language playground</h1>
<p>
Play around with the DOT language in the textarea below, or select one of the following examples:
</p>
<p style="margin-left: 30px;">
<a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
<a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
<a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
<a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
<a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
</p>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url)
.done(function(dotData) {
$('#data').val(dotData);
draw();
})
.fail(function () {
$('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
resize();
});
});
$(window).resize(resize);
$(window).load(draw);
$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,20 @@
digraph finite_state_machine {
rankdir=LR;
size="8,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
node [shape = circle];
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}

View File

@@ -0,0 +1 @@
digraph G {Hello->World}

View File

@@ -0,0 +1,15 @@
graph G {
run -- intr;
intr -- runbl;
runbl -- run;
run -- kernel;
kernel -- zombie;
kernel -- sleep;
kernel -- runmem;
sleep -- swap;
swap -- runswap;
runswap -- new;
runswap -- runmem;
new -- runmem;
sleep -- runmem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View File

@@ -0,0 +1,512 @@
/*
This is a graphviz-produced layout of the "family tree" of a fraternity and sorority.
Each member in the graph was assigned a "big brother" from one organization and a "big sister" from the other. Blue icons represent Brothers from the fraternity, Pink represents Sisters from the sorority (Purple members are in both organizations - like honoraries.)
Charter members (who can have no parent nodes) are outlined.
...
dot -Tgif -Goverlap=false -o siblings.gif siblings.dot
We're experimenting with different ways of coloring and graphing, but found this the easiest for now. When we have more people in, we might look at different shades depending on generation number -- earlier people would get lighter colors, more recent members darker. Thumbnail images would be an interesting alteration as well.
from Japheth Cleaver
*/
digraph sdsu {
size="36,36";
node [color=grey, style=filled];
node [fontname="Verdana", size="30,30"];
graph [ fontname = "Arial",
fontsize = 36,
style = "bold",
label = "\nKappa Kappa Psi/Tau Beta Sigma\nSan Diego State University\nEta Mu and Zeta Xi Family Tree\n\nto date: November 30th, 2008\n",
ssize = "30,60" ];
"Lori Brede" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=10"];
"Michael Griffith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=24"];
"Amie Holston" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=30"];
"Michael Griffith" -> "Lori Brede"
"Amie Holston" -> "Lori Brede"
"Casey Carter" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=11"];
"Laura De'Armond" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=14"];
"Laura De'Armond" -> "Casey Carter"
"Japheth Cleaver" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=12"];
"Chuk Gawlik" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=22"];
"Stacy Snyder" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=309"];
"Chuk Gawlik" -> "Japheth Cleaver"
"Stacy Snyder" -> "Japheth Cleaver"
"Jillian Clifton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=13"];
"David Guthrie" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=25"];
"David Guthrie" -> "Jillian Clifton"
"Japheth Cleaver" -> "Jillian Clifton"
"Tony Sacco" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=55"];
"Heather Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=59"];
"Tony Sacco" -> "Laura De'Armond"
"Heather Smith" -> "Laura De'Armond"
"Kevin Decker" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=15"];
"Alex Hansen" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=26"];
"Wanda Livelsberger" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=53"];
"Alex Hansen" -> "Kevin Decker"
"Wanda Livelsberger" -> "Kevin Decker"
"Patrick Doerr" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=16"];
"Deanna Jagow" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=23"];
"Alex Hansen" -> "Patrick Doerr"
"Deanna Jagow" -> "Patrick Doerr"
"Lori Asaro" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=178"];
"Mark Pearson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=169"];
"Lori Ball" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=167"];
"Mark Pearson" -> "Lori Asaro"
"Lori Ball" -> "Lori Asaro"
"Ryan Farris" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=18"];
"Rob Reiner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=51"];
"Cindy Teel" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=62"];
"Rob Reiner" -> "Ryan Farris"
"Cindy Teel" -> "Ryan Farris"
"Ginger Palmer" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=180"];
"Mark Newton-John" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=46"];
"Mark Newton-John" -> "Ginger Palmer"
"Matthew FitzGerald" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=19"];
"Mervin Maniago" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=41"];
"Mervin Maniago" -> "Matthew FitzGerald"
"Amie Holston" -> "Matthew FitzGerald"
"Tani Miller" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=195"];
"Mark Pearson" -> "Tani Miller"
"Vienna McMurtry" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=196"];
"Robert Walwick" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=153"];
"Robert Walwick" -> "Vienna McMurtry"
"Ginger Palmer" -> "Vienna McMurtry"
"Chuck Foster" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=20"];
"Karen Saye" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=56"];
"Kevin Decker" -> "Chuck Foster"
"Karen Saye" -> "Chuck Foster"
"Gary Frampton" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=201"];
"Ginger Palmer" -> "Gary Frampton"
"Pat Norris" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=207"];
"Sean Tipps" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=204"];
"Teresa Long" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=194"];
"Sean Tipps" -> "Pat Norris"
"Teresa Long" -> "Pat Norris"
"Marc Martin-ez" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=208"];
"Mark Pearson" -> "Marc Martin-ez"
"Tani Miller" -> "Marc Martin-ez"
"Kristen Villone" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=209"];
"Kelly Erickson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=199"];
"Anna Pedroza" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=197"];
"Kelly Erickson" -> "Kristen Villone"
"Anna Pedroza" -> "Kristen Villone"
"Geoff Frank" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=21"];
"Chris Livelsberger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=40"];
"Amy Price" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=57"];
"Chris Livelsberger" -> "Geoff Frank"
"Amy Price" -> "Geoff Frank"
"Tracy Murray" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=210"];
"John FitzGibbon" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=92"];
"Judy Dulcich" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=177"];
"John FitzGibbon" -> "Tracy Murray"
"Judy Dulcich" -> "Tracy Murray"
"Ian McIntosh" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=215"];
"Barbara Tollison" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=172"];
"Robert Walwick" -> "Ian McIntosh"
"Barbara Tollison" -> "Ian McIntosh"
"Jayson Smith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=58"];
"Jayson Smith" -> "Chuk Gawlik"
"Heather Smith" -> "Chuk Gawlik"
"Kelly McKinney" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=222"];
"Mark Nadeau" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=183"];
"Mark Nadeau" -> "Kelly McKinney"
"Judy Dulcich" -> "Kelly McKinney"
"Chris Livelsberger" -> "Deanna Jagow"
"Amy Price" -> "Deanna Jagow"
"Renee Thompson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=231"];
"J. Angeles" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=3"];
"Kelley Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=223"];
"J. Angeles" -> "Renee Thompson"
"Kelley Smith" -> "Renee Thompson"
"Steven Smith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=233"];
"John FitzGibbon" -> "Steven Smith"
"Charlene Andrews" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=234"];
"Diane Reoch" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=227"];
"Diane Reoch" -> "Charlene Andrews"
"Tonya Alexander" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=238"];
"Gail Vasquez" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=225"];
"Gail Vasquez" -> "Tonya Alexander"
"Spencer Caldwell" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=239"];
"Becky Bernal" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=218"];
"Becky Bernal" -> "Spencer Caldwell"
"Chuk Gawlik" -> "Michael Griffith"
"Wanda Livelsberger" -> "Michael Griffith"
"Russell Grant" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=242"];
"Steven Smith" -> "Russell Grant"
"Tiffany Worthington" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=66"];
"Chuck Foster" -> "David Guthrie"
"Tiffany Worthington" -> "David Guthrie"
"Jerry Maya" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=250"];
"John FitzGibbon" -> "Jerry Maya"
"Melissa Schwartz" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=252"];
"Russell Grant" -> "Melissa Schwartz"
"Delphy Shaulis" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=255"];
"Renee Thompson" -> "Delphy Shaulis"
"Martin Naiman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=45"];
"Janean Angeles" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=86"];
"Martin Naiman" -> "Alex Hansen"
"Janean Angeles" -> "Alex Hansen"
"Leslie Harlow" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=265"];
"Dennis McColl" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=251"];
"Denise Luna" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=236"];
"Dennis McColl" -> "Leslie Harlow"
"Denise Luna" -> "Leslie Harlow"
"Jonathan Yudman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=267"];
"April Ortiz-cloninger" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=258"];
"April Ortiz-cloninger" -> "Jonathan Yudman"
"Michael Elgo" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=268"];
"Carol Kropp" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=254"];
"Spencer Caldwell" -> "Michael Elgo"
"Carol Kropp" -> "Michael Elgo"
"Denmark Vea" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=269"];
"Marc Martin-ez" -> "Denmark Vea"
"Kelley Smith" -> "Denmark Vea"
"Kathleen Hansen" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=27"];
"Martin Naiman" -> "Kathleen Hansen"
"Heather Smith" -> "Kathleen Hansen"
"Laura Stegner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=274"];
"April Ortiz-cloninger" -> "Laura Stegner"
"Kathy Jones" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=28"];
"J. Angeles" -> "Kathy Jones"
"Eric Gates" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=282"];
"Erick Sugimura" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=280"];
"Erick Sugimura" -> "Eric Gates"
"Laura Stegner" -> "Eric Gates"
"Jennifer Stoewe" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=288"];
"Eric Gates" -> "Jennifer Stoewe"
"Karen Helbling" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=29"];
"Regan Ashker" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=5"];
"Kevin Decker" -> "Karen Helbling"
"Regan Ashker" -> "Karen Helbling"
"Scott Wood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=295"];
"Eric Gates" -> "Scott Wood"
"Greg Flood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=200"];
"Greg Flood" -> "J. Angeles"
"Ginger Palmer" -> "J. Angeles"
"Lynn Reeves" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=48"];
"Chuk Gawlik" -> "Amie Holston"
"Lynn Reeves" -> "Amie Holston"
"Susan Colwell" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=302"];
"Michael Elgo" -> "Susan Colwell"
"Christopher Jouan" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=306"];
"Kevin Owens" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=245"];
"Kevin Owens" -> "Christopher Jouan"
"Kristianna Reynante" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=308"];
"Michael Elgo" -> "Kristianna Reynante"
"Janean Angeles" -> "Kristianna Reynante"
"Amy Berner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=300"];
"Amy Berner" -> "Stacy Snyder"
"Deanna Johnson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=31"];
"Alex Hansen" -> "Deanna Johnson"
"Laura De'Armond" -> "Deanna Johnson"
"Johnny Richardson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=310"];
"Russell Grant" -> "Johnny Richardson"
"Nathan Fellhauer" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=313"];
"James Rowland" [color=thistle, URL="http://sdsu.kkytbs.net/members/profile.html?who=52"];
"James Rowland" -> "Nathan Fellhauer"
"Kristianna Reynante" -> "Nathan Fellhauer"
"Brian Raneses" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=314"];
"Sean McHenry" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=42"];
"Sean McHenry" -> "Brian Raneses"
"Penny Lewis" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=315"];
"Martin Naiman" -> "Penny Lewis"
"Becky Graham" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=316"];
"Kristen Elgo" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=7"];
"Kristen Elgo" -> "Becky Graham"
"Steven Gross" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=318"];
"Rob Reiner" -> "Steven Gross"
"Stacy Snyder" -> "Steven Gross"
"Sedona Reynolds" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=32"];
"Mark Newton-John" -> "Sedona Reynolds"
"Cindy Teel" -> "Sedona Reynolds"
"Klair Mayerchak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=320"];
"Nathan Fellhauer" -> "Klair Mayerchak"
"Becky Graham" -> "Klair Mayerchak"
"Shari VerBerkmoes" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=321"];
"Sean McHenry" -> "Shari VerBerkmoes"
"Janean Angeles" -> "Shari VerBerkmoes"
"Anson Summers" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=326"];
"James Rowland" -> "Anson Summers"
"Dusty Jolliff" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=33"];
"Rob Reiner" -> "Dusty Jolliff"
"Stacy Snyder" -> "Dusty Jolliff"
"Jennifer Garman" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=331"];
"James Rowland" -> "Jennifer Garman"
"Kelly Greenhill" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=333"];
"Rob Reiner" -> "Kelly Greenhill"
"Kristen Elgo" -> "Kelly Greenhill"
"Lucinda Farless" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=334"];
"J. Angeles" -> "Lucinda Farless"
"Susan Colwell" -> "Lucinda Farless"
"Alfredo Cardenas" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=335"];
"Chuk Gawlik" -> "Alfredo Cardenas"
"Kathleen Hansen" -> "Alfredo Cardenas"
"Jennifer Jouan" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=34"];
"Andrea Owens" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=276"];
"Andrea Owens" -> "Jennifer Jouan"
"Tamara Scrivner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=345"];
"Joseph Butler" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=69"];
"Sarah Maltese" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=83"];
"Joseph Butler" -> "Tamara Scrivner"
"Sarah Maltese" -> "Tamara Scrivner"
"Bradley Stouse" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=346"];
"Ryan Underwood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=74"];
"Ryan Underwood" -> "Bradley Stouse"
"Cindy Teel" -> "Bradley Stouse"
"Casondra Brimmage" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=347"];
"Kristopher Lininger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=85"];
"Ilana Melcher" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=73"];
"Kristopher Lininger" -> "Casondra Brimmage"
"Ilana Melcher" -> "Casondra Brimmage"
"Cassiopeia Guthrie" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=348"];
"Jeremy Frazier" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=79"];
"Christine Mount" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=76"];
"Jeremy Frazier" -> "Cassiopeia Guthrie"
"Christine Mount" -> "Cassiopeia Guthrie"
"Kathleen Moran" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=349"];
"Matthew FitzGerald" -> "Kathleen Moran"
"Lori Brede" -> "Kathleen Moran"
"Tiffany Kalland" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=35"];
"Tony Sacco" -> "Tiffany Kalland"
"Karen Helbling" -> "Tiffany Kalland"
"Kristen Anderson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=350"];
"Jennie Bogart" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=78"];
"David Guthrie" -> "Kristen Anderson"
"Jennie Bogart" -> "Kristen Anderson"
"Laura Simonette" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=351"];
"Jon Weisel" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=89"];
"Jon Weisel" -> "Laura Simonette"
"Japheth Cleaver" -> "Laura Simonette"
"Nathan Williams" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=352"];
"David Guthrie" -> "Nathan Williams"
"Karen Helbling" -> "Nathan Williams"
"Rebecca Hippert" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=353"];
"Ryan Underwood" -> "Rebecca Hippert"
"Tiffany Kalland" -> "Rebecca Hippert"
"Samuel Wallace" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=354"];
"Joseph Butler" -> "Samuel Wallace"
"Deanna Jagow" -> "Samuel Wallace"
"Scott Gardner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=355"];
"Jeremy Frazier" -> "Scott Gardner"
"Christine Mount" -> "Scott Gardner"
"Alberto Ayon" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=356"];
"Bradley Stouse" -> "Alberto Ayon"
"Jennie Bogart" -> "Alberto Ayon"
"Susannah Clayton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=357"];
"Nathan Williams" -> "Susannah Clayton"
"Karen Helbling" -> "Susannah Clayton"
"Lisa Gochnauer" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=358"];
"Scott Gardner" -> "Lisa Gochnauer"
"Casondra Brimmage" -> "Lisa Gochnauer"
"Jamie Jackson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=359"];
"Samuel Wallace" -> "Jamie Jackson"
"Tamara Scrivner" -> "Jamie Jackson"
"Christina Kelly" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=36"];
"Matthew FitzGerald" -> "Christina Kelly"
"Lori Brede" -> "Christina Kelly"
"Gara Thornton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=360"];
"Mark Newton-John" -> "Gara Thornton"
"Laura Simonette" -> "Gara Thornton"
"Robert Winebarger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=361"];
"Robin Ellison" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=90"];
"Scott Gardner" -> "Robert Winebarger"
"Robin Ellison" -> "Robert Winebarger"
"Jeremy Kirchner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=37"];
"Rob Reiner" -> "Jeremy Kirchner"
"Sandy Konar" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=38"];
"Jennifer Brandon" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=9"];
"Jennifer Brandon" -> "Sandy Konar"
"Dan Kuhlman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=39"];
"Rob Reiner" -> "Dan Kuhlman"
"Dusty Jolliff" -> "Dan Kuhlman"
"Lindsay Arehart" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=4"];
"Martin Naiman" -> "Lindsay Arehart"
"Jennifer Brandon" -> "Lindsay Arehart"
"J. Angeles" -> "Mervin Maniago"
"Kathy Jones" -> "Mervin Maniago"
"Jarrod Monroe" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=43"];
"Jamie Fratacci" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=44"];
"Mark Newton-John" -> "Jarrod Monroe"
"Jamie Fratacci" -> "Jarrod Monroe"
"Chuk Gawlik" -> "Jamie Fratacci"
"Tiffany Worthington" -> "Jamie Fratacci"
"Russell Grant" -> "Martin Naiman"
"Tonya Alexander" -> "Martin Naiman"
"Edward Givens" [color=lightblue, outline=bold, style=bold, URL="http://sdsu.kkytbs.net/members/profile.html?who=106"];
"Edward Givens" -> "Mark Newton-John"
"Veronica Nickel" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=47"];
"Regan Ashker" -> "Veronica Nickel"
"Wanda Livelsberger" -> "Lynn Reeves"
"Bryan Ransom" [color=thistle, URL="http://sdsu.kkytbs.net/members/profile.html?who=49"];
"Jayson Smith" -> "Bryan Ransom"
"Tony Sacco" -> "Regan Ashker"
"Dusty Jolliff" -> "Regan Ashker"
"Jennifer Stout" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=50"];
"Matthew FitzGerald" -> "Jennifer Stout"
"Deanna Jagow" -> "Jennifer Stout"
"Sean McHenry" -> "James Rowland"
"James Rowland" -> "Wanda Livelsberger"
"Janean Angeles" -> "Wanda Livelsberger"
"Melissa Roy" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=54"];
"Mervin Maniago" -> "Melissa Roy"
"Christina Kelly" -> "Melissa Roy"
"Dennis McColl" -> "Tony Sacco"
"April Ortiz-cloninger" -> "Tony Sacco"
"Tony Sacco" -> "Karen Saye"
"Tony Sacco" -> "Amy Price"
"Kathleen Hansen" -> "Amy Price"
"James Rowland" -> "Jayson Smith"
"Brian Raneses" -> "Heather Smith"
"Kristen Elgo" -> "Heather Smith"
"Josh Atwood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=6"];
"David Guthrie" -> "Josh Atwood"
"Lori Brede" -> "Josh Atwood"
"Katie Browne" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=60"];
"Patrick Doerr" -> "Katie Browne"
"Jamie Fratacci" -> "Katie Browne"
"Kristin Tang" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=61"];
"James Rowland" -> "Kristin Tang"
"Heather Smith" -> "Kristin Tang"
"Mervin Maniago" -> "Cindy Teel"
"Veronica Nickel" -> "Cindy Teel"
"Mike Tulumello" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=63"];
"Matthew FitzGerald" -> "Mike Tulumello"
"Katie Browne" -> "Mike Tulumello"
"Veronica Villanueva" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=64"];
"Ryan Farris" -> "Veronica Villanueva"
"Sedona Reynolds" -> "Veronica Villanueva"
"Mervin Maniago" -> "Tiffany Worthington"
"Jennifer Jouan" -> "Tiffany Worthington"
"Scott Wright" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=67"];
"James Rowland" -> "Scott Wright"
"Kristen Elgo" -> "Scott Wright"
"Jeremy Browne" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=68"];
"Matthew FitzGerald" -> "Jeremy Browne"
"Japheth Cleaver" -> "Jeremy Browne"
"James Fogelman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=688"];
"Alberto Ayon" -> "James Fogelman"
"Susannah Clayton" -> "James Fogelman"
"Sandra Chase" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=689"];
"David Guthrie" -> "Sandra Chase"
"Japheth Cleaver" -> "Sandra Chase"
"Patrick Doerr" -> "Joseph Butler"
"Deanna Jagow" -> "Joseph Butler"
"Laura Fisher" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=690"];
"Nathan Williams" -> "Laura Fisher"
"Casondra Brimmage" -> "Laura Fisher"
"Katie Kozma" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=691"];
"Scott Wright" -> "Katie Kozma"
"Robin Ellison" -> "Katie Kozma"
"Rachel Perkins" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=692"];
"Joseph Butler" -> "Rachel Perkins"
"Cassiopeia Guthrie" -> "Rachel Perkins"
"Sarah Titilah" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=693"];
"Robert Winebarger" -> "Sarah Titilah"
"Karen Helbling" -> "Sarah Titilah"
"Ashley Rehart" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=694"];
"Laura Fisher" -> "Ashley Rehart"
"Cara Yancey" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=695"];
"Katie Kozma" -> "Cara Yancey"
"Ashley Presley" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=698"];
"Cara Yancey" -> "Ashley Presley"
"Leila Wilhelm" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=699"];
"Robin Ellison" -> "Leila Wilhelm"
"Sean McHenry" -> "Kristen Elgo"
"Stacy Snyder" -> "Kristen Elgo"
"Greg Moody" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=70"];
"Ryan Farris" -> "Greg Moody"
"Jennifer Stout" -> "Greg Moody"
"Lisa Fleck" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=700"];
"Rachel Perkins" -> "Lisa Fleck"
"Christine Coyne" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=701"];
"Rachel Perkins" -> "Christine Coyne"
"Jennifer Cooley" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=702"];
"Laura Fisher" -> "Jennifer Cooley"
"Elizabeth Larios" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=703"];
"Ashley Rehart" -> "Elizabeth Larios"
"Cate Threlkeld" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=707"];
"Katie Kozma" -> "Cate Threlkeld"
"Erika Tapia" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=71"];
"Patrick Doerr" -> "Erika Tapia"
"Melissa Roy" -> "Erika Tapia"
"Robbyn Rozelle" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=72"];
"Jarrod Monroe" -> "Robbyn Rozelle"
"Tiffany Kalland" -> "Robbyn Rozelle"
"Ryan Farris" -> "Ilana Melcher"
"Veronica Villanueva" -> "Ilana Melcher"
"Greg Moody" -> "Ryan Underwood"
"Katie Browne" -> "Ryan Underwood"
"Cameron Brown" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=75"];
"Joseph Butler" -> "Cameron Brown"
"Tiffany Kalland" -> "Cameron Brown"
"Ryan Underwood" -> "Christine Mount"
"Lori Brede" -> "Christine Mount"
"Janay Rabe" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=77"];
"Greg Moody" -> "Janay Rabe"
"Cindy Teel" -> "Janay Rabe"
"Jeremy Browne" -> "Jennie Bogart"
"Tiffany Kalland" -> "Jennie Bogart"
"Ryan Farris" -> "Jeremy Frazier"
"Ilana Melcher" -> "Jeremy Frazier"
"Crystal Bozak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=8"];
"Patrick Doerr" -> "Crystal Bozak"
"Katie Browne" -> "Crystal Bozak"
"Kameka Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=80"];
"Matthew FitzGerald" -> "Kameka Smith"
"Ilana Melcher" -> "Kameka Smith"
"Kyra Sacco" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=81"];
"Joseph Butler" -> "Kyra Sacco"
"Robbyn Rozelle" -> "Kyra Sacco"
"Samuel Behar" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=82"];
"Ryan Underwood" -> "Samuel Behar"
"Lori Brede" -> "Samuel Behar"
"Patrick Doerr" -> "Sarah Maltese"
"Deanna Jagow" -> "Sarah Maltese"
"David Bronson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=84"];
"Kristin Alongi-Hutchins" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=87"];
"Tony Sacco" -> "David Bronson"
"Kristin Alongi-Hutchins" -> "David Bronson"
"Cameron Brown" -> "Kristopher Lininger"
"Kameka Smith" -> "Kristopher Lininger"
"Rakan Abu-Rahma" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=852"];
"Christine Coyne" -> "Rakan Abu-Rahma"
"Jennifer Berry" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=270"];
"Jennifer Berry" -> "Janean Angeles"
"Penny Lewis" -> "Kristin Alongi-Hutchins"
"Melissa Bebak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=88"];
"Greg Moody" -> "Melissa Bebak"
"Sarah Maltese" -> "Melissa Bebak"
"Scott Wright" -> "Jennifer Brandon"
"Japheth Cleaver" -> "Jennifer Brandon"
"Samuel Behar" -> "Robin Ellison"
"Kyra Sacco" -> "Robin Ellison"
"Teresa Simms" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=91"];
"Joseph Butler" -> "Teresa Simms"
"Janay Rabe" -> "Teresa Simms"
"Robert Schmidtke" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=188"];
"Jean Newman" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=166"];
"Robert Schmidtke" -> "John FitzGibbon"
"Jean Newman" -> "John FitzGibbon"
"Brittany DePew" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=928"];
"Elizabeth Larios" -> "Brittany DePew"
"Kathleen Halberg" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=929"];
"Ashley Rehart" -> "Kathleen Halberg"
"Terrance Hirsch" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=96"];
"J. Angeles" -> "Terrance Hirsch"
"Susan Colwell" -> "Terrance Hirsch"
"Monique Arellano" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=972"];
"Ashley Presley" -> "Monique Arellano"
"Anthony Henderson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=973"];
"Jennifer Cooley" -> "Anthony Henderson"
"Amethyst Tagle" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=974"];
"Cate Threlkeld" -> "Amethyst Tagle"
"Mallory Williams" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=975"];
"Lisa Fleck" -> "Mallory Williams"
}

View File

@@ -0,0 +1,377 @@
digraph G {
size="7,10"
page="8.5,11"
center=""
node[width=.25,height=.375,fontsize=9]
fcfpr1_1_2t_17 -> 341411;
fcfpr1_1t_1 -> 341411;
rdlfpr2_0_rdlt_4 -> 341411;
fpfpr1_0_1t_1 -> 341411;
fpfpr1_1_2t_11 -> 341411;
rtafpr1_1_2t_28 -> 341411;
rtafpr1_1_3t_6 -> 341411;
rdlfpr1_1t_1 -> 358866;
rtafpr1_1_3t_6 -> 358866;
tmfpr1_1_3t_5 -> 358930;
fcfpr1_1_3t_9 -> 358930;
pcfpr1_1_3t_7 -> 358930;
fpfpr1_1_3g_1 -> 358930;
fpfpr1_1_3t_1 -> 358930;
aufpr1_1_3t_1 -> 358930;
rtafpr1_0_3g_1 -> 358930;
rtafpr1_1_3t_6 -> 358930;
msgfpr1_1_1g_12 -> 371943;
rtafpr1_1_1g_8 -> 371943;
rtafpr1_1_1t_35 -> 371943;
rtafpr1_1_1t_45 -> 371943;
rtafpr1_1_3t_6 -> 371943;
tlfpr2_0_rdlg_2 -> 374300;
fcfpr1_1_3t_8 -> 374300;
fcfpr1_1_3t_9 -> 374300;
rtafpr1_1_3t_6 -> 374300;
fcfpr1_0_5g_1 -> 371942;
fcfpr1_1_1t_19 -> 371942;
fcfpr1_1_3t_9 -> 371942;
fcfpr1_1_3t_9 -> 374700;
tymsgfpr1_1_3t_3 -> 374700;
fpfpr1_1_3t_1 -> 374700;
rtafpr1_1_3t_7 -> 374700;
fcfpr1_1_3g_2 -> 374741;
fcfpr1_1_3t_9 -> 374741;
fpfpr1_1_3t_1 -> 374741;
rtafpr1_1_3t_7 -> 374741;
fcfpr1_1_1t_18 -> 374886;
fcfpr1_1_3t_9 -> 374886;
fpfpr1_1_3t_1 -> 374886;
rtafpr1_1_3t_7 -> 374886;
fcfpr1_1_3t_9 -> 375039;
fpfpr1_1_3t_1 -> 375039;
fcfpr1_1_3t_42 -> 375507;
fcfpr1_1_3t_9 -> 375507;
rdlfpr2_0_rdlt_158 -> 375507;
rtafpr1_1_3t_7 -> 375507;
rtafpr1_1_3t_71 -> 375507;
dbfpr1_1_3t_2 -> 375507;
fcfpr1_1_3t_9 -> 375508;
rdlfpr1_1g_13 -> 375508;
rtafpr1_1_3t_7 -> 375508;
rtafpr2_1_rdlg_1 -> 375508;
dbfpr1_1_3t_2 -> 375508;
fcfpr1_1_3t_9 -> 375519;
fpfpr1_1_3g_1 -> 375519;
fpfpr1_1_3t_1 -> 375519;
fcfpr1_1_3t_9 -> 377380;
rdlfpr1_1g_16 -> 377380;
rdlfpr1_1t_100 -> 377380;
fcfpr1_0_2g_1 -> 377719;
fcfpr1_1_3t_10 -> 377719;
fcfpr1_1_3t_7 -> 377719;
fcfpr1_1_3t_9 -> 377719;
rdlfpr2_0_rdlg_12 -> 377719;
rdlfpr2_0_rdlt_108 -> 377719;
rdlfpr2_0_rdlt_27 -> 377719;
rdlfpr2_0_rdlt_30 -> 377719;
fcfpr1_1_3t_9 -> 377763;
fcfpr1_1_3t_9 -> 379848;
fpfpr1_1_3t_1 -> 379848;
fcfpr1_1_3t_9 -> 380571;
fcfpr1_1_3t_9 -> 380604;
fpfpr1_1_3t_1 -> 380604;
fcfpr1_1_3t_9 -> 381211;
fpfpr1_1_3t_1 -> 381211;
fcfpr1_1_3t_9 -> 381835;
fcfpr1_1_3t_9 -> 381897;
fcfpr1_1_3t_9 -> 381901;
fpfpr1_1_3t_1 -> 381901;
fcfpr1_1_3t_9 -> 382103;
rtafpr1_1_3t_7 -> 382103;
fcfpr1_1_3t_9 -> 382161;
fcfpr1_1_3t_9 -> 383174;
fpfpr1_1_3t_1 -> 383174;
rtafpr1_1_3t_7 -> 383174;
fpfpr1_1_3g_1 -> 352010;
fpfpr1_1_3t_1 -> 352010;
fpfpr1_1_3t_1 -> 382409;
fpfpr1_1_3t_1 -> 382827;
fpfpr1_1_3t_1 -> 382928;
rtafpr1_1_3t_7 -> 382928;
tlfpr1_1_1t_5 -> 358224;
tymsgfpr1_1_1t_23 -> 358224;
tymsgfpr1_1_3t_3 -> 358224;
rcfpr0_0_1t_9 -> 358224;
rcfpr1_1_1t_5 -> 358224;
odfpr0_0_1t_8 -> 358224;
odfpr1_1_1t_6 -> 358224;
ecdsgfpr1_1_1t_4 -> 358224;
tymsgfpr1_1_1t_18 -> 358900;
tymsgfpr1_1_3t_3 -> 358900;
rcfpr1_1_1t_100 -> 358900;
rcfpr1_1_1t_22 -> 358900;
rcfpr1_1_1t_37 -> 358900;
odfpr1_1_1t_21 -> 358900;
tymsgfpr1_1_3t_3 -> 372568;
rcfpr1_1_1t_30 -> 372568;
odfpr1_1_1t_31 -> 372568;
tlfpr1_1_1t_20 -> 375557;
tymsgfpr1_1_1t_24 -> 375557;
tymsgfpr1_1_3t_3 -> 375557;
rcfpr1_1_1t_11 -> 375557;
odfpr1_1_1t_9 -> 375557;
ecdsgfpr1_1_1t_19 -> 375557;
rtafpr1_1_1g_14 -> 376956;
rtafpr1_1_1t_64 -> 376956;
rtafpr1_1_2t_18 -> 376956;
rtafpr1_1_3t_30 -> 376956;
rtafpr1_1_3t_7 -> 376956;
rtafpr1_1_3t_7 -> 379339;
rtafpr1_1_1t_14 -> 379422;
rtafpr1_1_1t_20 -> 379422;
rtafpr1_1_3t_7 -> 379422;
rtafpr1_1_3t_7 -> 383039;
fcfpr1_1_1t_18 -> 359471;
fcfpr2_0_1t_1 -> 359471;
fcfpr2_0_1t_2 -> 359471;
ccsfpr2_0_1t_99 -> 359471;
fcfpr1_1_3t_42 -> 384096;
rtafpr1_1_3t_71 -> 384096;
tlfpr1_0_4g_4 -> 354290;
rcfpr0_0_1t_9 -> 354290;
odfpr0_0_1t_8 -> 354290;
pagfpr1_1_1t_23 -> 354290;
rcfpr1_1_1t_5 -> 379864;
rcfpr1_1_1t_100 -> 382574;
rcfpr1_1_1t_22 -> 382574;
rcfpr1_1_1t_37 -> 382574;
rcfpr1_1_1t_30 -> 370706;
rcfpr1_1_1t_30 -> 377908;
rcfpr1_1_1t_30 -> 377924;
rcfpr1_1_1t_30 -> 377971;
rcfpr1_1_1t_30 -> 377980;
odfpr1_1_1t_31 -> 377980;
rcfpr1_1_1t_30 -> 378362;
rcfpr1_1_1t_30 -> 378656;
rcfpr1_1_1t_30 -> 378666;
rcfpr1_1_1t_30 -> 379169;
odfpr1_1_1t_31 -> 379169;
rcfpr1_1_1t_110 -> 379341;
rcfpr1_1_1t_30 -> 379341;
rcfpr1_1_1t_62 -> 379341;
odfpr1_1_1t_31 -> 379341;
rcfpr1_1_1t_30 -> 379972;
rcfpr1_1_1t_30 -> 380298;
rcfpr1_1_1t_30 -> 380448;
rcfpr1_1_1t_30 -> 380475;
odfpr1_1_1t_31 -> 380475;
rcfpr1_1_1t_30 -> 380526;
odfpr1_1_1t_31 -> 357430;
rcfpr1_1_1t_11 -> 379968;
odfpr1_1_1t_9 -> 379968;
ccsfpr2_0_1t_99 -> 359100;
ccsfpr2_0_1t_99 -> 376529;
ccsfpr2_0_1t_99 -> 377801;
ccsfpr2_0_1t_99 -> 379126;
ccsfpr2_0_1t_99 -> 379212;
ccsfpr2_0_1t_99 -> 380285;
ccsfpr2_0_1t_99 -> 380963;
ccsfpr2_0_1t_99 -> 384909;
tlfpr1_0_4g_4 -> 358471;
odfpr0_0_1t_7 -> 358471;
odfpr1_0_1t_36 -> 358471;
odfpr1_0_3t_18 -> 358471;
odfpr1_0_3t_21 -> 358471;
tlfpr1_0_4g_4 -> 375024;
tlfpr1_0_4g_4 -> 375027;
rcfpr1_1_1t_110 -> 381710;
rcfpr1_1_1t_62 -> 381710;
rcfpr1_1_1t_110 -> 381775;
rcfpr1_1_1t_62 -> 381775;
rcfpr1_1_1t_110 -> 382436;
fcfpr1_1_3t_34 -> 382528;
rcfpr1_1_1t_110 -> 382528;
rtafpr1_1_3t_48 -> 382528;
rcfpr1_1_1t_110 -> 382566;
rcfpr1_1_1t_110 -> 382572;
odfpr0_0_1t_7 -> 353506;
rcfpr1_0_1t_35 -> 370509;
odfpr0_0_1t_7 -> 370509;
odfpr0_0_1t_7 -> 370510;
odfpr1_0_1t_38 -> 370510;
tlfpr1_0_4g_5 -> 354546;
rcfpr1_1_1t_61 -> 354546;
odfpr1_0_3t_18 -> 354546;
odfpr1_0_3t_20 -> 354546;
odfpr1_0_3t_18 -> 354757;
odfpr1_0_3t_20 -> 354757;
odfpr1_0_3t_18 -> 354766;
odfpr1_0_3t_20 -> 354766;
odfpr1_0_3t_18 -> 354771;
odfpr1_0_3t_20 -> 354771;
odfpr1_0_3t_18 -> 354785;
odfpr1_0_3t_23 -> 354785;
odfpr1_0_3t_24 -> 354785;
odfpr1_0_3t_18 -> 354878;
odfpr1_0_3t_23 -> 354878;
odfpr1_0_3t_24 -> 354878;
odfpr1_0_3t_18 -> 355080;
odfpr1_0_3t_23 -> 355080;
odfpr1_0_3t_24 -> 355080;
odfpr1_0_3t_18 -> 355288;
odfpr1_0_3t_23 -> 355288;
odfpr1_0_3t_24 -> 355288;
odfpr2_0_03t_13 -> 355288;
odfpr1_0_3t_18 -> 355800;
odfpr1_0_3t_21 -> 355800;
odfpr1_0_3t_18 -> 356116;
odfpr1_0_3t_21 -> 356116;
odfpr1_0_3t_18 -> 356741;
odfpr1_0_3t_21 -> 356741;
odfpr1_0_3t_18 -> 357340;
odfpr1_0_3t_21 -> 357340;
odfpr1_0_3t_18 -> 357538;
odfpr1_0_3t_21 -> 357538;
odfpr1_0_3t_18 -> 357769;
odfpr1_0_3t_21 -> 357769;
odfpr1_0_3t_18 -> 357793;
odfpr1_0_3t_21 -> 357793;
odfpr1_0_3t_18 -> 358155;
odfpr1_0_3t_21 -> 358155;
odfpr1_0_3t_18 -> 358157;
odfpr1_0_3t_21 -> 358157;
odfpr1_0_3t_18 -> 358159;
odfpr1_0_3t_21 -> 358159;
odfpr1_0_3t_18 -> 358584;
odfpr1_0_3t_21 -> 358584;
odfpr1_0_3t_18 -> 360104;
odfpr1_0_3t_21 -> 360104;
odfpr1_0_3t_18 -> 360144;
odfpr1_0_3t_21 -> 360144;
odfpr1_0_3t_18 -> 360672;
odfpr1_0_3t_21 -> 360672;
odfpr1_0_3t_5 -> 360672;
odfpr1_0_3t_18 -> 360839;
odfpr1_0_3t_21 -> 360839;
odfpr1_0_3t_18 -> 371187;
tlfpr1_0_3g_5 -> 373300;
odfpr1_0_3t_12 -> 373300;
odfpr1_0_3t_18 -> 373300;
odfpr1_0_3t_18 -> 375134;
odfpr1_0_5t_18 -> 375134;
rcfpr0_0_1t_10 -> 375319;
odfpr1_0_3t_18 -> 375319;
odfpr1_0_3t_36 -> 375319;
odfpr1_0_5t_17 -> 375319;
odfpr1_0_5t_19 -> 375319;
odfpr1_0_3t_18 -> 375499;
odfpr1_0_3t_18 -> 377220;
odfpr1_0_5t_21 -> 377220;
tlfpr1_0_3g_7 -> 377562;
tlfpr1_1_1t_3 -> 377562;
odfpr1_0_3t_18 -> 377562;
odfpr1_0_3t_36 -> 377562;
odfpr1_0_5t_20 -> 377562;
odfpr1_0_3t_18 -> 378108;
odfpr1_0_3t_6 -> 378108;
odfpr1_0_5t_20 -> 354221;
odfpr0_0_1t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_3g_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr0_0_1t_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_61 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_3g_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_62 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
ccsfpr2_0_1t_99 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_3t_3 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr0_0_1t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_14 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_110 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
dbfpr1_1_3t_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1g_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_1_1t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_64 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr2_0_rdlg_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_2t_28 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_1_1t_3 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_1_3t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
aufpr1_1_3t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_34 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_1t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_36 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_1_1t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_1t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_37 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_27 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3g_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_35 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_1_3g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_1_2t_11 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
ecdsgfpr1_1_1t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_1t_36 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1g_14 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_1t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_1t_24 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_1t_38 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_0_2g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr0_0_1t_10 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_100 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_108 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
pcfpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
ecdsgfpr1_1_1t_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tmfpr1_1_3t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_0_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_22 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
pagfpr1_1_1t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_71 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_2t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_158 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_24 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_0_3g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1g_13 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_0_1t_35 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_2t_17 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr2_1_rdlg_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1g_16 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr2_0_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr2_0_1t_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1t_100 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
msgfpr1_1_1g_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_4g_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_42 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_4g_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_48 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_17 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_1t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_10 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_0_5g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr2_0_03t_13 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_11 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_31 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlg_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_45 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
}

View File

@@ -0,0 +1,29 @@
##"I played some days with making an interface between our ConceptBase system (essentially a database system to store models) and graphviz. One example graph is attached. It is a so-called petri net for Dutch traffic lights. The example is actually taken from a book by Wil van der Aalst." Contributed by Manfred Jeusfeld.
##Command to produce the output: "neato -Tpng thisfile > thisfile.png"
digraph TrafficLights {
node [shape=box]; gy2; yr2; rg2; gy1; yr1; rg1;
node [shape=circle,fixedsize=true,width=0.9]; green2; yellow2; red2; safe2; safe1; green1; yellow1; red1;
gy2->yellow2;
rg2->green2;
yr2->safe1;
yr2->red2;
safe2->rg2;
green2->gy2;
yellow2->yr2;
red2->rg2;
gy1->yellow1;
rg1->green1;
yr1->safe2;
yr1->red1;
safe1->rg1;
green1->gy1;
yellow1->yr1;
red1->rg1;
overlap=false
label="PetriNet Model TrafficLights\nExtracted from ConceptBase and layed out by Graphviz"
fontsize=12;
}

View File

@@ -0,0 +1,105 @@
graph G {
// graph [splines=true overlap=false]
// graph [truecolor bgcolor="#ff00005f"]
node [style=filled fillcolor="#00ff005f"]
1 -- 30 [f=1];
1 -- 40 [f=14];
8 -- 46 [f=1];
8 -- 16 [f=18];
10 -- 25 [f=1];
10 -- 19 [f=5];
10 -- 33 [f=1];
12 -- 8 [f=1];
12 -- 36 [f=5];
12 -- 17 [f=16];
13 -- 38 [f=1];
13 -- 24 [f=19];
24 -- 49 [f=1];
24 -- 13 [f=1];
24 -- 47 [f=12];
24 -- 12 [f=19];
25 -- 27 [f=1];
25 -- 12 [f=1];
27 -- 12 [f=1];
27 -- 14 [f=8];
29 -- 10 [f=1];
29 -- 8 [f=17];
30 -- 24 [f=1];
30 -- 44 [f=15];
38 -- 29 [f=1];
38 -- 35 [f=15];
2 -- 42 [f=2];
2 -- 35 [f=3];
2 -- 11 [f=19];
14 -- 18 [f=2];
14 -- 24 [f=15];
14 -- 38 [f=18];
18 -- 49 [f=2];
18 -- 47 [f=20];
26 -- 41 [f=2];
26 -- 42 [f=15];
31 -- 39 [f=2];
31 -- 47 [f=17];
31 -- 25 [f=14];
37 -- 26 [f=2];
37 -- 16 [f=14];
39 -- 50 [f=2];
39 -- 14 [f=2];
39 -- 18 [f=17];
39 -- 47 [f=10];
41 -- 31 [f=2];
41 -- 8 [f=16];
42 -- 44 [f=2];
42 -- 29 [f=12];
44 -- 37 [f=2];
44 -- 32 [f=15];
3 -- 20 [f=2];
3 -- 28 [f=19];
6 -- 45 [f=2];
6 -- 28 [f=10];
9 -- 6 [f=2];
9 -- 16 [f=1];
15 -- 16 [f=2];
15 -- 48 [f=2];
16 -- 50 [f=2];
16 -- 32 [f=14];
16 -- 39 [f=8];
20 -- 33 [f=2];
33 -- 9 [f=2];
33 -- 46 [f=3];
33 -- 48 [f=17];
45 -- 15 [f=2];
4 -- 17 [f=4];
4 -- 15 [f=6];
4 -- 12 [f=16];
17 -- 21 [f=4];
19 -- 35 [f=4];
19 -- 15 [f=9];
19 -- 43 [f=4];
21 -- 19 [f=4];
21 -- 50 [f=4];
23 -- 36 [f=4];
34 -- 23 [f=4];
34 -- 24 [f=11];
35 -- 34 [f=4];
35 -- 16 [f=6];
35 -- 18 [f=16];
36 -- 46 [f=4];
5 -- 7 [f=1];
5 -- 36 [f=6];
7 -- 32 [f=1];
7 -- 11 [f=2];
7 -- 14 [f=17];
11 -- 40 [f=1];
11 -- 50 [f=1];
22 -- 46 [f=1];
28 -- 43 [f=1];
28 -- 8 [f=18];
32 -- 28 [f=1];
32 -- 39 [f=13];
32 -- 42 [f=15];
40 -- 22 [f=1];
40 -- 47 [f=1];
43 -- 11 [f=1];
43 -- 17 [f=19];
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,55 @@
/* courtesy Ian Darwin and Geoff Collyer, Softquad Inc. */
digraph unix {
size="6,6";
node [color=lightblue, style=filled];
"5th Edition" -> "6th Edition";
"5th Edition" -> "PWB 1.0";
"6th Edition" -> "LSX";
"6th Edition" -> "1 BSD";
"6th Edition" -> "Mini Unix";
"6th Edition" -> "Wollongong";
"6th Edition" -> "Interdata";
"Interdata" -> "Unix/TS 3.0";
"Interdata" -> "PWB 2.0";
"Interdata" -> "7th Edition";
"7th Edition" -> "8th Edition";
"7th Edition" -> "32V";
"7th Edition" -> "V7M";
"7th Edition" -> "Ultrix-11";
"7th Edition" -> "Xenix";
"7th Edition" -> "UniPlus+";
"V7M" -> "Ultrix-11";
"8th Edition" -> "9th Edition";
"1 BSD" -> "2 BSD";
"2 BSD" -> "2.8 BSD";
"2.8 BSD" -> "Ultrix-11";
"2.8 BSD" -> "2.9 BSD";
"32V" -> "3 BSD";
"3 BSD" -> "4 BSD";
"4 BSD" -> "4.1 BSD";
"4.1 BSD" -> "4.2 BSD";
"4.1 BSD" -> "2.8 BSD";
"4.1 BSD" -> "8th Edition";
"4.2 BSD" -> "4.3 BSD";
"4.2 BSD" -> "Ultrix-32";
"PWB 1.0" -> "PWB 1.2";
"PWB 1.0" -> "USG 1.0";
"PWB 1.2" -> "PWB 2.0";
"USG 1.0" -> "CB Unix 1";
"USG 1.0" -> "USG 2.0";
"CB Unix 1" -> "CB Unix 2";
"CB Unix 2" -> "CB Unix 3";
"CB Unix 3" -> "Unix/TS++";
"CB Unix 3" -> "PDP-11 Sys V";
"USG 2.0" -> "USG 3.0";
"USG 3.0" -> "Unix/TS 3.0";
"PWB 2.0" -> "Unix/TS 3.0";
"Unix/TS 1.0" -> "Unix/TS 3.0";
"Unix/TS 3.0" -> "TS 4.0";
"Unix/TS++" -> "TS 4.0";
"CB Unix 3" -> "TS 4.0";
"TS 4.0" -> "System V.0";
"System V.0" -> "System V.2";
"System V.2" -> "System V.3";
}

View File

@@ -0,0 +1,67 @@
digraph world {
size="7,7";
{rank=same; S8 S24 S1 S35 S30;}
{rank=same; T8 T24 T1 T35 T30;}
{rank=same; 43 37 36 10 2;}
{rank=same; 25 9 38 40 13 17 12 18;}
{rank=same; 26 42 11 3 33 19 39 14 16;}
{rank=same; 4 31 34 21 41 28 20;}
{rank=same; 27 5 22 32 29 15;}
{rank=same; 6 23;}
{rank=same; 7;}
S8 -> 9;
S24 -> 25;
S24 -> 27;
S1 -> 2;
S1 -> 10;
S35 -> 43;
S35 -> 36;
S30 -> 31;
S30 -> 33;
9 -> 42;
9 -> T1;
25 -> T1;
25 -> 26;
27 -> T24;
2 -> {3 ; 16 ; 17 ; T1 ; 18}
10 -> { 11 ; 14 ; T1 ; 13; 12;}
31 -> T1;
31 -> 32;
33 -> T30;
33 -> 34;
42 -> 4;
26 -> 4;
3 -> 4;
16 -> 15;
17 -> 19;
18 -> 29;
11 -> 4;
14 -> 15;
37 -> {39 ; 41 ; 38 ; 40;}
13 -> 19;
12 -> 29;
43 -> 38;
43 -> 40;
36 -> 19;
32 -> 23;
34 -> 29;
39 -> 15;
41 -> 29;
38 -> 4;
40 -> 19;
4 -> 5;
19 -> {21 ; 20 ; 28;}
5 -> {6 ; T35 ; 23;}
21 -> 22;
20 -> 15;
28 -> 29;
6 -> 7;
15 -> T1;
22 -> T35;
22 -> 23;
29 -> T30;
7 -> T8;
23 -> T24;
23 -> T1;
}

View File

@@ -0,0 +1,266 @@
<!doctype html>
<html>
<head>
<title>Network | DataSet</title>
<style type="text/css">
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#network {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var nodes, edges, network;
// convenience method to stringify a JSON object
function toJSON(obj) {
return JSON.stringify(obj, null, 4);
}
function addNode() {
try {
nodes.add({
id: document.getElementById('node-id').value,
label: document.getElementById('node-label').value
});
}
catch (err) {
alert(err);
}
}
function updateNode() {
try {
nodes.update({
id: document.getElementById('node-id').value,
label: document.getElementById('node-label').value
});
}
catch (err) {
alert(err);
}
}
function removeNode() {
try {
nodes.remove({id: document.getElementById('node-id').value});
}
catch (err) {
alert(err);
}
}
function addEdge() {
try {
edges.add({
id: document.getElementById('edge-id').value,
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value
});
}
catch (err) {
alert(err);
}
}
function updateEdge() {
try {
edges.update({
id: document.getElementById('edge-id').value,
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value
});
}
catch (err) {
alert(err);
}
}
function removeEdge() {
try {
edges.remove({id: document.getElementById('edge-id').value});
}
catch (err) {
alert(err);
}
}
function draw() {
// create an array with nodes
nodes = new vis.DataSet();
nodes.on('*', function () {
document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
});
nodes.add([
{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
edges = new vis.DataSet();
edges.on('*', function () {
document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
});
edges.add([
{id: '1', from: '1', to: '2'},
{id: '2', from: '1', to: '3'},
{id: '3', from: '2', to: '4'},
{id: '4', from: '2', to: '5'}
]);
// create a network
var container = document.getElementById('network');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw();">
<p>
This example demonstrates dynamically adding, updating and removing nodes
and edges using a DataSet.
</p>
<h1>Adjust</h1>
<table>
<tr>
<td>
<h2>Node</h2>
<table>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6"></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add" onclick="addNode();">Add</button>
<button id="node-update" onclick="updateNode();">Update</button>
<button id="node-remove" onclick="removeNode();">Remove</button>
</td>
</tr>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add" onclick="addEdge();">Add</button>
<button id="edge-update" onclick="updateEdge();">Update</button>
<button id="edge-remove" onclick="removeEdge();">Remove</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<h1>View</h1>
<table class="view">
<colgroup>
<col width="25%">
<col width="25%">
<col width="50%">
</colgroup>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Network</h2>
<div id="network"></div>
</td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,174 @@
<!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>Dynamic Data - Importing from Gephi (JSON)</title>
<script type="text/javascript" src="../exampleUtil.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css">
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
div.nodeContent {
position: relative;
border: 1px solid lightgray;
width: 480px;
height: 780px;
margin-top: -802px;
margin-left: 810px;
padding: 10px;
}
pre {
padding: 5px;
margin: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
</style>
</head>
<body>
<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how to import a JSON file exported by Gephi. The two
options available for the import are
available through the checkboxes. You can download the Gephi JSON exporter
here:
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
All of Gephi's attributes are also contained within the node elements. This
means you can access all of this data through the DataSet.
<br/>
</div>
<p>
<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>
<div id="mynetwork"></div>
<div class="nodeContent"><h4>Node Content:</h4>
<pre id="nodeContent"></pre>
</div>
<script type="text/javascript">
var network;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var gephiImported;
var fixedCheckbox = document.getElementById('fixed');
fixedCheckbox.onchange = redrawAll;
var parseColorCheckbox = document.getElementById('parseColor');
parseColorCheckbox.onchange = redrawAll;
var nodeContent = document.getElementById('nodeContent');
loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
font: {
face: 'Tahoma'
}
},
edges: {
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -10000,
springConstant: 0.002,
springLength: 150
}
}
};
network = new vis.Network(container, data, options);
network.on('click', function (params) {
if (params.nodes.length > 0) {
var data = nodes.get(params.nodes[0]); // get the data from selected node
nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
}
})
/**
* This function fills the DataSets. These DataSets will update the network.
*/
function redrawAll(gephiJSON) {
if (gephiJSON.nodes === undefined) {
gephiJSON = gephiImported;
}
else {
gephiImported = gephiJSON;
}
nodes.clear();
edges.clear();
var fixed = fixedCheckbox.checked;
var parseColor = parseColorCheckbox.checked;
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
fixed: fixed,
parseColor: parseColor
});
// add the parsed data to the DataSets.
nodes.add(parsed.nodes);
edges.add(parsed.edges);
var data = nodes.get(2); // get the data from node 2 as example
nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
network.fit(); // zoom to fit
}
</script>
</body>
</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-network.min.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>
</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>

View File

@@ -0,0 +1,79 @@
<!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-network.min.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',
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over the edges to get a popup with more information.
</p>
<div id="mynetwork"></div>
</body>
</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-network.min.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>
</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>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,77 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
The default is <code>'arrow'</code>.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'A'},
{id: 2, label: 'B'},
{id: 3, label: 'C'},
{id: 4, label: 'D'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:{
to: {
enabled: true,
type: 'circle'
}
}},
{from: 3, to: 4, arrows:{
to: {
enabled: true,
type: 'bar'
}
}},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
/*
// Enable this to make the endpoints smaller/larger
edges: {
arrows: {
to: {
scaleFactor: 5
}
}
}
*/
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
There are a lot of options with arrows! They can also be combined with dashed lines.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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'},
{id: 6, label: 'Node 6'},
{id: 7, label: 'Node 7'},
{id: 8, label: 'Node 8'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 8, arrows:'to', dashes:true},
{from: 1, to: 3, arrows:'to'},
{from: 1, to: 2, arrows:'to, from'},
{from: 2, to: 4, arrows:'to, middle'},
{from: 2, to: 5, arrows:'to, middle, from'},
{from: 5, to: 6, arrows:{to:{scaleFactor:2}}},
{from: 6, to: 7, arrows:{middle:{scaleFactor:0.5},from:true}}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,71 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:800px;
}
</style>
</head>
<body>
<p>
There are a lot of options with colors. You can manually define a color or inherit the color from the nodes. You can set the opacity
to override any opacity given by a color. <b>IN ORDER TO USE THE OPACITY, BOTH THE NODES AND THE EDGES NEED COLORS IN HEX OR RGB</b>!
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'node\none', shape: 'box', color:'#97C2FC'},
{id: 2, label: 'node\ntwo', shape: 'circle', color:'#FFFF00'},
{id: 3, label: 'node\nthree', shape: 'diamond', color:'#FB7E81'},
{id: 4, label: 'node\nfour', shape: 'dot', size: 10, color:'#7BE141'},
{id: 5, label: 'node\nfive', shape: 'ellipse', color:'#6E6EFD'},
{id: 6, label: 'node\nsix', shape: 'star', color:'#C2FABC'},
{id: 7, label: 'node\nseven', shape: 'triangle', color:'#FFA807'},
{id: 8, label: 'node\neight', shape: 'triangleDown', color:'#6E6EFD'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 8, color:{color:'red'}},
{from: 1, to: 3, color:'rgb(20,24,200)'},
{from: 1, to: 2, color:{color:'rgba(30,30,30,0.2)', highlight:'blue'}},
{from: 2, to: 4, color:{inherit:'to'}},
{from: 2, to: 5, color:{inherit:'from'}},
{from: 5, to: 6, color:{inherit:'both'}},
{from: 6, to: 7, color:{color:'#ff0000', opacity:0.3}},
{from: 6, to: 8, color:{opacity:0.3}},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle'
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Playing with dashes.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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'},
{id: 6, label: 'Node 6'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3, dashes:true},
{from: 1, to: 2, dashes:[5,5]},
{from: 2, to: 4, dashes:[5,5,3,3]},
{from: 2, to: 5, dashes:[2,2,10,10]},
{from: 2, to: 6, dashes:false},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!doctype html>
<html>
<head>
<title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 500px;
height: 500px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h2>Smooth curves</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
types. <br /> <br />
Drag the node around to see how the smooth curves are drawn for each setting. For animated system, we
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
that the direction (the from and to) of the curve matters.
<br /> <br />
When you select the dynamic type, you can see the interaction with the fixed node and the edge, any other type will not interact with other nodes.
<br /> <br />
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
{id: 2, label: 'Drag me', x:150, y:130, physics:false},
{id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:10}
];
// create an array with edges
var edges = [
{from: 1, to: 2, arrows:'to'}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:true,
configure:function (option, path) {
if (path.indexOf('smooth') !== -1 || option === 'smooth') {
return true;
}
return false;
},
edges: {
smooth: {
type: 'continuous'
}
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,97 @@
<!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-network.min.css">
<script src="../datasources/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
#optionsContainer {
height:280px;
}
</style>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
The static smooth curves are based only on the positions of the connected
nodes.
There are multiple ways to determine the way this curve is drawn.
This example shows the effect of the different types on a large network.
<br/> <br/>
Also shown in this example is the inheritColor option of the edges as well as
the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
</div>
<div id="optionsContainer"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
function redrawAll() {
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
color:{inherit:true},
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
hideEdgesOnDrag: true,
tooltipDelay: 200
},
configure: {
filter: function (option, path) {
if (option === 'inherit') {return true;}
if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
if (option === 'roundness') {return true;}
if (option === 'hideEdgesOnDrag') {return true;}
if (option === 'hideNodesOnDrag') {return true;}
return false;
},
container: document.getElementById('optionsContainer'),
showButton: false
},
physics: false
};
var data = {nodes:nodes, edges:edges};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
redrawAll()
</script>
</body>
</html>

View File

@@ -0,0 +1,132 @@
<!doctype html>
<html>
<head>
<title>Network | Interaction events</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges. Some of the events are logged in the console in improve readability.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', title: 'I have a popup!'},
{id: 2, label: 'Node 2', title: 'I have a popup!'},
{id: 3, label: 'Node 3', title: 'I have a popup!'},
{id: 4, label: 'Node 4', title: 'I have a popup!'},
{id: 5, label: 'Node 5', title: 'I have a popup!'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction:{hover:true},
manipulation: {
enabled: true
}
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
network.on("doubleClick", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>doubleClick event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("oncontext", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("dragStart", function (params) {
// There's no point in displaying this event on screen, it gets immediately overwritten
params.event = "[original event]";
console.log('dragStart Event:', params);
console.log('dragStart event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
network.on("dragging", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>dragging event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("dragEnd", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
console.log('dragEnd Event:', params);
console.log('dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
network.on("zoom", function (params) {
document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("showPopup", function (params) {
document.getElementById('eventSpan').innerHTML = '<h2>showPopup event: </h2>' + JSON.stringify(params, null, 4);
});
network.on("hidePopup", function () {
console.log('hidePopup Event');
});
network.on("select", function (params) {
console.log('select Event:', params);
});
network.on("selectNode", function (params) {
console.log('selectNode Event:', params);
});
network.on("selectEdge", function (params) {
console.log('selectEdge Event:', params);
});
network.on("deselectNode", function (params) {
console.log('deselectNode Event:', params);
});
network.on("deselectEdge", function (params) {
console.log('deselectEdge Event:', params);
});
network.on("hoverNode", function (params) {
console.log('hoverNode Event:', params);
});
network.on("hoverEdge", function (params) {
console.log('hoverEdge Event:', params);
});
network.on("blurNode", function (params) {
console.log('blurNode Event:', params);
});
network.on("blurEdge", function (params) {
console.log('blurEdge Event:', params);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,73 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
network.on("startStabilizing", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Starting Stabilization</h3>';
console.log("started")
});
network.on("stabilizationProgress", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Stabilization progress</h3>' + JSON.stringify(params, null, 4);
console.log("progress:",params);
});
network.on("stabilizationIterationsDone", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Stabilization iterations complete</h3>';
console.log("finished stabilization interations");
});
network.on("stabilized", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Stabilized!</h3>' + JSON.stringify(params, null, 4);
console.log("stabilized!", params);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>
You can draw on the canvas using normal HTML5 canvas functions. The before drawing will be behind the network, the after drawing will be in front of the network.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
network.on("initRedraw", function () {
// do something like move some custom elements?
});
network.on("beforeDrawing", function (ctx) {
var nodeId = 1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = '#A6D5F7';
ctx.fillStyle = '#294475';
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,50);
ctx.fill();
ctx.stroke();
});
network.on("afterDrawing", function (ctx) {
var nodeId = 1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = '#294475';
ctx.lineWidth = 4;
ctx.fillStyle = '#A6D5F7';
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,20);
ctx.fill();
ctx.stroke();
});
</script>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<html>
<head>
<style type="text/css">
#mynetwork {
width: 900px;
height: 850px;
border: 1px solid lightgray;
}
</style>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<script src="disassemblerExample.js"></script>
</head>
<body>
<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
a program you wish to analyze.</p>
<p><div id="mynetwork"></div><br /></p>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var data = {'nodes': nodes, 'edges': edges}
var gph = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,53 @@
var options = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
var nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
];
//
// Note: there are a couple of node id's present here which do not exist
// - cfg_0x00417563
// - cfg_0x00403489
// - cfg_0x0042f03f
//
// The edges with these id's will not load into the Network instance.
//
var edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
];

View File

@@ -0,0 +1,396 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 0, "label": "Myriel", "group": 1},
{id: 1, "label": "Napoleon", "group": 1},
{id: 2, "label": "Mlle.Baptistine", "group": 1},
{id: 3, "label": "Mme.Magloire", "group": 1},
{id: 4, "label": "CountessdeLo", "group": 1},
{id: 5, "label": "Geborand", "group": 1},
{id: 6, "label": "Champtercier", "group": 1},
{id: 7, "label": "Cravatte", "group": 1},
{id: 8, "label": "Count", "group": 1},
{id: 9, "label": "OldMan", "group": 1},
{id: 10, "label": "Labarre", "group": 2},
{id: 11, "label": "Valjean", "group": 2},
{id: 12, "label": "Marguerite", "group": 3},
{id: 13, "label": "Mme.deR", "group": 2},
{id: 14, "label": "Isabeau", "group": 2},
{id: 15, "label": "Gervais", "group": 2},
{id: 16, "label": "Tholomyes", "group": 3},
{id: 17, "label": "Listolier", "group": 3},
{id: 18, "label": "Fameuil", "group": 3},
{id: 19, "label": "Blacheville", "group": 3},
{id: 20, "label": "Favourite", "group": 3},
{id: 21, "label": "Dahlia", "group": 3},
{id: 22, "label": "Zephine", "group": 3},
{id: 23, "label": "Fantine", "group": 3},
{id: 24, "label": "Mme.Thenardier", "group": 4},
{id: 25, "label": "Thenardier", "group": 4},
{id: 26, "label": "Cosette", "group": 5},
{id: 27, "label": "Javert", "group": 4},
{id: 28, "label": "Fauchelevent", "group": 0},
{id: 29, "label": "Bamatabois", "group": 2},
{id: 30, "label": "Perpetue", "group": 3},
{id: 31, "label": "Simplice", "group": 2},
{id: 32, "label": "Scaufflaire", "group": 2},
{id: 33, "label": "Woman1", "group": 2},
{id: 34, "label": "Judge", "group": 2},
{id: 35, "label": "Champmathieu", "group": 2},
{id: 36, "label": "Brevet", "group": 2},
{id: 37, "label": "Chenildieu", "group": 2},
{id: 38, "label": "Cochepaille", "group": 2},
{id: 39, "label": "Pontmercy", "group": 4},
{id: 40, "label": "Boulatruelle", "group": 6},
{id: 41, "label": "Eponine", "group": 4},
{id: 42, "label": "Anzelma", "group": 4},
{id: 43, "label": "Woman2", "group": 5},
{id: 44, "label": "MotherInnocent", "group": 0},
{id: 45, "label": "Gribier", "group": 0},
{id: 46, "label": "Jondrette", "group": 7},
{id: 47, "label": "Mme.Burgon", "group": 7},
{id: 48, "label": "Gavroche", "group": 8},
{id: 49, "label": "Gillenormand", "group": 5},
{id: 50, "label": "Magnon", "group": 5},
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
{id: 52, "label": "Mme.Pontmercy", "group": 5},
{id: 53, "label": "Mlle.Vaubois", "group": 5},
{id: 54, "label": "Lt.Gillenormand", "group": 5},
{id: 55, "label": "Marius", "group": 8},
{id: 56, "label": "BaronessT", "group": 5},
{id: 57, "label": "Mabeuf", "group": 8},
{id: 58, "label": "Enjolras", "group": 8},
{id: 59, "label": "Combeferre", "group": 8},
{id: 60, "label": "Prouvaire", "group": 8},
{id: 61, "label": "Feuilly", "group": 8},
{id: 62, "label": "Courfeyrac", "group": 8},
{id: 63, "label": "Bahorel", "group": 8},
{id: 64, "label": "Bossuet", "group": 8},
{id: 65, "label": "Joly", "group": 8},
{id: 66, "label": "Grantaire", "group": 8},
{id: 67, "label": "MotherPlutarch", "group": 9},
{id: 68, "label": "Gueulemer", "group": 4},
{id: 69, "label": "Babet", "group": 4},
{id: 70, "label": "Claquesous", "group": 4},
{id: 71, "label": "Montparnasse", "group": 4},
{id: 72, "label": "Toussaint", "group": 5},
{id: 73, "label": "Child1", "group": 10},
{id: 74, "label": "Child2", "group": 10},
{id: 75, "label": "Brujon", "group": 4},
{id: 76, "label": "Mme.Hucheloup", "group": 8}
];
// create some edges
var edges = [
{"from": 1, "to": 0},
{"from": 2, "to": 0},
{"from": 3, "to": 0},
{"from": 3, "to": 2},
{"from": 4, "to": 0},
{"from": 5, "to": 0},
{"from": 6, "to": 0},
{"from": 7, "to": 0},
{"from": 8, "to": 0},
{"from": 9, "to": 0},
{"from": 11, "to": 10},
{"from": 11, "to": 3},
{"from": 11, "to": 2},
{"from": 11, "to": 0},
{"from": 12, "to": 11},
{"from": 13, "to": 11},
{"from": 14, "to": 11},
{"from": 15, "to": 11},
{"from": 17, "to": 16},
{"from": 18, "to": 16},
{"from": 18, "to": 17},
{"from": 19, "to": 16},
{"from": 19, "to": 17},
{"from": 19, "to": 18},
{"from": 20, "to": 16},
{"from": 20, "to": 17},
{"from": 20, "to": 18},
{"from": 20, "to": 19},
{"from": 21, "to": 16},
{"from": 21, "to": 17},
{"from": 21, "to": 18},
{"from": 21, "to": 19},
{"from": 21, "to": 20},
{"from": 22, "to": 16},
{"from": 22, "to": 17},
{"from": 22, "to": 18},
{"from": 22, "to": 19},
{"from": 22, "to": 20},
{"from": 22, "to": 21},
{"from": 23, "to": 16},
{"from": 23, "to": 17},
{"from": 23, "to": 18},
{"from": 23, "to": 19},
{"from": 23, "to": 20},
{"from": 23, "to": 21},
{"from": 23, "to": 22},
{"from": 23, "to": 12},
{"from": 23, "to": 11},
{"from": 24, "to": 23},
{"from": 24, "to": 11},
{"from": 25, "to": 24},
{"from": 25, "to": 23},
{"from": 25, "to": 11},
{"from": 26, "to": 24},
{"from": 26, "to": 11},
{"from": 26, "to": 16},
{"from": 26, "to": 25},
{"from": 27, "to": 11},
{"from": 27, "to": 23},
{"from": 27, "to": 25},
{"from": 27, "to": 24},
{"from": 27, "to": 26},
{"from": 28, "to": 11},
{"from": 28, "to": 27},
{"from": 29, "to": 23},
{"from": 29, "to": 27},
{"from": 29, "to": 11},
{"from": 30, "to": 23},
{"from": 31, "to": 30},
{"from": 31, "to": 11},
{"from": 31, "to": 23},
{"from": 31, "to": 27},
{"from": 32, "to": 11},
{"from": 33, "to": 11},
{"from": 33, "to": 27},
{"from": 34, "to": 11},
{"from": 34, "to": 29},
{"from": 35, "to": 11},
{"from": 35, "to": 34},
{"from": 35, "to": 29},
{"from": 36, "to": 34},
{"from": 36, "to": 35},
{"from": 36, "to": 11},
{"from": 36, "to": 29},
{"from": 37, "to": 34},
{"from": 37, "to": 35},
{"from": 37, "to": 36},
{"from": 37, "to": 11},
{"from": 37, "to": 29},
{"from": 38, "to": 34},
{"from": 38, "to": 35},
{"from": 38, "to": 36},
{"from": 38, "to": 37},
{"from": 38, "to": 11},
{"from": 38, "to": 29},
{"from": 39, "to": 25},
{"from": 40, "to": 25},
{"from": 41, "to": 24},
{"from": 41, "to": 25},
{"from": 42, "to": 41},
{"from": 42, "to": 25},
{"from": 42, "to": 24},
{"from": 43, "to": 11},
{"from": 43, "to": 26},
{"from": 43, "to": 27},
{"from": 44, "to": 28},
{"from": 44, "to": 11},
{"from": 45, "to": 28},
{"from": 47, "to": 46},
{"from": 48, "to": 47},
{"from": 48, "to": 25},
{"from": 48, "to": 27},
{"from": 48, "to": 11},
{"from": 49, "to": 26},
{"from": 49, "to": 11},
{"from": 50, "to": 49},
{"from": 50, "to": 24},
{"from": 51, "to": 49},
{"from": 51, "to": 26},
{"from": 51, "to": 11},
{"from": 52, "to": 51},
{"from": 52, "to": 39},
{"from": 53, "to": 51},
{"from": 54, "to": 51},
{"from": 54, "to": 49},
{"from": 54, "to": 26},
{"from": 55, "to": 51},
{"from": 55, "to": 49},
{"from": 55, "to": 39},
{"from": 55, "to": 54},
{"from": 55, "to": 26},
{"from": 55, "to": 11},
{"from": 55, "to": 16},
{"from": 55, "to": 25},
{"from": 55, "to": 41},
{"from": 55, "to": 48},
{"from": 56, "to": 49},
{"from": 56, "to": 55},
{"from": 57, "to": 55},
{"from": 57, "to": 41},
{"from": 57, "to": 48},
{"from": 58, "to": 55},
{"from": 58, "to": 48},
{"from": 58, "to": 27},
{"from": 58, "to": 57},
{"from": 58, "to": 11},
{"from": 59, "to": 58},
{"from": 59, "to": 55},
{"from": 59, "to": 48},
{"from": 59, "to": 57},
{"from": 60, "to": 48},
{"from": 60, "to": 58},
{"from": 60, "to": 59},
{"from": 61, "to": 48},
{"from": 61, "to": 58},
{"from": 61, "to": 60},
{"from": 61, "to": 59},
{"from": 61, "to": 57},
{"from": 61, "to": 55},
{"from": 62, "to": 55},
{"from": 62, "to": 58},
{"from": 62, "to": 59},
{"from": 62, "to": 48},
{"from": 62, "to": 57},
{"from": 62, "to": 41},
{"from": 62, "to": 61},
{"from": 62, "to": 60},
{"from": 63, "to": 59},
{"from": 63, "to": 48},
{"from": 63, "to": 62},
{"from": 63, "to": 57},
{"from": 63, "to": 58},
{"from": 63, "to": 61},
{"from": 63, "to": 60},
{"from": 63, "to": 55},
{"from": 64, "to": 55},
{"from": 64, "to": 62},
{"from": 64, "to": 48},
{"from": 64, "to": 63},
{"from": 64, "to": 58},
{"from": 64, "to": 61},
{"from": 64, "to": 60},
{"from": 64, "to": 59},
{"from": 64, "to": 57},
{"from": 64, "to": 11},
{"from": 65, "to": 63},
{"from": 65, "to": 64},
{"from": 65, "to": 48},
{"from": 65, "to": 62},
{"from": 65, "to": 58},
{"from": 65, "to": 61},
{"from": 65, "to": 60},
{"from": 65, "to": 59},
{"from": 65, "to": 57},
{"from": 65, "to": 55},
{"from": 66, "to": 64},
{"from": 66, "to": 58},
{"from": 66, "to": 59},
{"from": 66, "to": 62},
{"from": 66, "to": 65},
{"from": 66, "to": 48},
{"from": 66, "to": 63},
{"from": 66, "to": 61},
{"from": 66, "to": 60},
{"from": 67, "to": 57},
{"from": 68, "to": 25},
{"from": 68, "to": 11},
{"from": 68, "to": 24},
{"from": 68, "to": 27},
{"from": 68, "to": 48},
{"from": 68, "to": 41},
{"from": 69, "to": 25},
{"from": 69, "to": 68},
{"from": 69, "to": 11},
{"from": 69, "to": 24},
{"from": 69, "to": 27},
{"from": 69, "to": 48},
{"from": 69, "to": 41},
{"from": 70, "to": 25},
{"from": 70, "to": 69},
{"from": 70, "to": 68},
{"from": 70, "to": 11},
{"from": 70, "to": 24},
{"from": 70, "to": 27},
{"from": 70, "to": 41},
{"from": 70, "to": 58},
{"from": 71, "to": 27},
{"from": 71, "to": 69},
{"from": 71, "to": 68},
{"from": 71, "to": 70},
{"from": 71, "to": 11},
{"from": 71, "to": 48},
{"from": 71, "to": 41},
{"from": 71, "to": 25},
{"from": 72, "to": 26},
{"from": 72, "to": 27},
{"from": 72, "to": 11},
{"from": 73, "to": 48},
{"from": 74, "to": 48},
{"from": 74, "to": 73},
{"from": 75, "to": 69},
{"from": 75, "to": 68},
{"from": 75, "to": 25},
{"from": 75, "to": 48},
{"from": 75, "to": 41},
{"from": 75, "to": 70},
{"from": 75, "to": 71},
{"from": 76, "to": 64},
{"from": 76, "to": 65},
{"from": 76, "to": 66},
{"from": 76, "to": 63},
{"from": 76, "to": 62},
{"from": 76, "to": 48},
{"from": 76, "to": 58}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 16
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {iterations: 150}
}
};
var network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div>
</body>
</html>

View File

@@ -0,0 +1,504 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
#loadingBar {
position:absolute;
top:0px;
left:0px;
width: 902px;
height: 902px;
background-color:rgba(200,200,200,0.8);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity:1;
}
#wrapper {
position:relative;
width:900px;
height:900px;
}
#text {
position:absolute;
top:8px;
left:530px;
width:30px;
height:50px;
margin:auto auto auto auto;
font-size:22px;
color: #000000;
}
div.outerBorder {
position:relative;
top:400px;
width:600px;
height:44px;
margin:auto auto auto auto;
border:8px solid rgba(0,0,0,0.1);
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
border-radius:72px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#border {
position:absolute;
top:10px;
left:10px;
width:500px;
height:23px;
margin:auto auto auto auto;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
border-radius:10px;
}
#bar {
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
margin:auto auto auto auto;
border-radius:11px;
border:2px solid rgba(30,30,30,0.05);
background: rgb(0, 173, 246); /* Old browsers */
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 0, "label": "Myriel", "group": 1},
{id: 1, "label": "Napoleon", "group": 1},
{id: 2, "label": "Mlle.Baptistine", "group": 1},
{id: 3, "label": "Mme.Magloire", "group": 1},
{id: 4, "label": "CountessdeLo", "group": 1},
{id: 5, "label": "Geborand", "group": 1},
{id: 6, "label": "Champtercier", "group": 1},
{id: 7, "label": "Cravatte", "group": 1},
{id: 8, "label": "Count", "group": 1},
{id: 9, "label": "OldMan", "group": 1},
{id: 10, "label": "Labarre", "group": 2},
{id: 11, "label": "Valjean", "group": 2},
{id: 12, "label": "Marguerite", "group": 3},
{id: 13, "label": "Mme.deR", "group": 2},
{id: 14, "label": "Isabeau", "group": 2},
{id: 15, "label": "Gervais", "group": 2},
{id: 16, "label": "Tholomyes", "group": 3},
{id: 17, "label": "Listolier", "group": 3},
{id: 18, "label": "Fameuil", "group": 3},
{id: 19, "label": "Blacheville", "group": 3},
{id: 20, "label": "Favourite", "group": 3},
{id: 21, "label": "Dahlia", "group": 3},
{id: 22, "label": "Zephine", "group": 3},
{id: 23, "label": "Fantine", "group": 3},
{id: 24, "label": "Mme.Thenardier", "group": 4},
{id: 25, "label": "Thenardier", "group": 4},
{id: 26, "label": "Cosette", "group": 5},
{id: 27, "label": "Javert", "group": 4},
{id: 28, "label": "Fauchelevent", "group": 0},
{id: 29, "label": "Bamatabois", "group": 2},
{id: 30, "label": "Perpetue", "group": 3},
{id: 31, "label": "Simplice", "group": 2},
{id: 32, "label": "Scaufflaire", "group": 2},
{id: 33, "label": "Woman1", "group": 2},
{id: 34, "label": "Judge", "group": 2},
{id: 35, "label": "Champmathieu", "group": 2},
{id: 36, "label": "Brevet", "group": 2},
{id: 37, "label": "Chenildieu", "group": 2},
{id: 38, "label": "Cochepaille", "group": 2},
{id: 39, "label": "Pontmercy", "group": 4},
{id: 40, "label": "Boulatruelle", "group": 6},
{id: 41, "label": "Eponine", "group": 4},
{id: 42, "label": "Anzelma", "group": 4},
{id: 43, "label": "Woman2", "group": 5},
{id: 44, "label": "MotherInnocent", "group": 0},
{id: 45, "label": "Gribier", "group": 0},
{id: 46, "label": "Jondrette", "group": 7},
{id: 47, "label": "Mme.Burgon", "group": 7},
{id: 48, "label": "Gavroche", "group": 8},
{id: 49, "label": "Gillenormand", "group": 5},
{id: 50, "label": "Magnon", "group": 5},
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
{id: 52, "label": "Mme.Pontmercy", "group": 5},
{id: 53, "label": "Mlle.Vaubois", "group": 5},
{id: 54, "label": "Lt.Gillenormand", "group": 5},
{id: 55, "label": "Marius", "group": 8},
{id: 56, "label": "BaronessT", "group": 5},
{id: 57, "label": "Mabeuf", "group": 8},
{id: 58, "label": "Enjolras", "group": 8},
{id: 59, "label": "Combeferre", "group": 8},
{id: 60, "label": "Prouvaire", "group": 8},
{id: 61, "label": "Feuilly", "group": 8},
{id: 62, "label": "Courfeyrac", "group": 8},
{id: 63, "label": "Bahorel", "group": 8},
{id: 64, "label": "Bossuet", "group": 8},
{id: 65, "label": "Joly", "group": 8},
{id: 66, "label": "Grantaire", "group": 8},
{id: 67, "label": "MotherPlutarch", "group": 9},
{id: 68, "label": "Gueulemer", "group": 4},
{id: 69, "label": "Babet", "group": 4},
{id: 70, "label": "Claquesous", "group": 4},
{id: 71, "label": "Montparnasse", "group": 4},
{id: 72, "label": "Toussaint", "group": 5},
{id: 73, "label": "Child1", "group": 10},
{id: 74, "label": "Child2", "group": 10},
{id: 75, "label": "Brujon", "group": 4},
{id: 76, "label": "Mme.Hucheloup", "group": 8}
];
// create some edges
var edges = [
{"from": 1, "to": 0},
{"from": 2, "to": 0},
{"from": 3, "to": 0},
{"from": 3, "to": 2},
{"from": 4, "to": 0},
{"from": 5, "to": 0},
{"from": 6, "to": 0},
{"from": 7, "to": 0},
{"from": 8, "to": 0},
{"from": 9, "to": 0},
{"from": 11, "to": 10},
{"from": 11, "to": 3},
{"from": 11, "to": 2},
{"from": 11, "to": 0},
{"from": 12, "to": 11},
{"from": 13, "to": 11},
{"from": 14, "to": 11},
{"from": 15, "to": 11},
{"from": 17, "to": 16},
{"from": 18, "to": 16},
{"from": 18, "to": 17},
{"from": 19, "to": 16},
{"from": 19, "to": 17},
{"from": 19, "to": 18},
{"from": 20, "to": 16},
{"from": 20, "to": 17},
{"from": 20, "to": 18},
{"from": 20, "to": 19},
{"from": 21, "to": 16},
{"from": 21, "to": 17},
{"from": 21, "to": 18},
{"from": 21, "to": 19},
{"from": 21, "to": 20},
{"from": 22, "to": 16},
{"from": 22, "to": 17},
{"from": 22, "to": 18},
{"from": 22, "to": 19},
{"from": 22, "to": 20},
{"from": 22, "to": 21},
{"from": 23, "to": 16},
{"from": 23, "to": 17},
{"from": 23, "to": 18},
{"from": 23, "to": 19},
{"from": 23, "to": 20},
{"from": 23, "to": 21},
{"from": 23, "to": 22},
{"from": 23, "to": 12},
{"from": 23, "to": 11},
{"from": 24, "to": 23},
{"from": 24, "to": 11},
{"from": 25, "to": 24},
{"from": 25, "to": 23},
{"from": 25, "to": 11},
{"from": 26, "to": 24},
{"from": 26, "to": 11},
{"from": 26, "to": 16},
{"from": 26, "to": 25},
{"from": 27, "to": 11},
{"from": 27, "to": 23},
{"from": 27, "to": 25},
{"from": 27, "to": 24},
{"from": 27, "to": 26},
{"from": 28, "to": 11},
{"from": 28, "to": 27},
{"from": 29, "to": 23},
{"from": 29, "to": 27},
{"from": 29, "to": 11},
{"from": 30, "to": 23},
{"from": 31, "to": 30},
{"from": 31, "to": 11},
{"from": 31, "to": 23},
{"from": 31, "to": 27},
{"from": 32, "to": 11},
{"from": 33, "to": 11},
{"from": 33, "to": 27},
{"from": 34, "to": 11},
{"from": 34, "to": 29},
{"from": 35, "to": 11},
{"from": 35, "to": 34},
{"from": 35, "to": 29},
{"from": 36, "to": 34},
{"from": 36, "to": 35},
{"from": 36, "to": 11},
{"from": 36, "to": 29},
{"from": 37, "to": 34},
{"from": 37, "to": 35},
{"from": 37, "to": 36},
{"from": 37, "to": 11},
{"from": 37, "to": 29},
{"from": 38, "to": 34},
{"from": 38, "to": 35},
{"from": 38, "to": 36},
{"from": 38, "to": 37},
{"from": 38, "to": 11},
{"from": 38, "to": 29},
{"from": 39, "to": 25},
{"from": 40, "to": 25},
{"from": 41, "to": 24},
{"from": 41, "to": 25},
{"from": 42, "to": 41},
{"from": 42, "to": 25},
{"from": 42, "to": 24},
{"from": 43, "to": 11},
{"from": 43, "to": 26},
{"from": 43, "to": 27},
{"from": 44, "to": 28},
{"from": 44, "to": 11},
{"from": 45, "to": 28},
{"from": 47, "to": 46},
{"from": 48, "to": 47},
{"from": 48, "to": 25},
{"from": 48, "to": 27},
{"from": 48, "to": 11},
{"from": 49, "to": 26},
{"from": 49, "to": 11},
{"from": 50, "to": 49},
{"from": 50, "to": 24},
{"from": 51, "to": 49},
{"from": 51, "to": 26},
{"from": 51, "to": 11},
{"from": 52, "to": 51},
{"from": 52, "to": 39},
{"from": 53, "to": 51},
{"from": 54, "to": 51},
{"from": 54, "to": 49},
{"from": 54, "to": 26},
{"from": 55, "to": 51},
{"from": 55, "to": 49},
{"from": 55, "to": 39},
{"from": 55, "to": 54},
{"from": 55, "to": 26},
{"from": 55, "to": 11},
{"from": 55, "to": 16},
{"from": 55, "to": 25},
{"from": 55, "to": 41},
{"from": 55, "to": 48},
{"from": 56, "to": 49},
{"from": 56, "to": 55},
{"from": 57, "to": 55},
{"from": 57, "to": 41},
{"from": 57, "to": 48},
{"from": 58, "to": 55},
{"from": 58, "to": 48},
{"from": 58, "to": 27},
{"from": 58, "to": 57},
{"from": 58, "to": 11},
{"from": 59, "to": 58},
{"from": 59, "to": 55},
{"from": 59, "to": 48},
{"from": 59, "to": 57},
{"from": 60, "to": 48},
{"from": 60, "to": 58},
{"from": 60, "to": 59},
{"from": 61, "to": 48},
{"from": 61, "to": 58},
{"from": 61, "to": 60},
{"from": 61, "to": 59},
{"from": 61, "to": 57},
{"from": 61, "to": 55},
{"from": 62, "to": 55},
{"from": 62, "to": 58},
{"from": 62, "to": 59},
{"from": 62, "to": 48},
{"from": 62, "to": 57},
{"from": 62, "to": 41},
{"from": 62, "to": 61},
{"from": 62, "to": 60},
{"from": 63, "to": 59},
{"from": 63, "to": 48},
{"from": 63, "to": 62},
{"from": 63, "to": 57},
{"from": 63, "to": 58},
{"from": 63, "to": 61},
{"from": 63, "to": 60},
{"from": 63, "to": 55},
{"from": 64, "to": 55},
{"from": 64, "to": 62},
{"from": 64, "to": 48},
{"from": 64, "to": 63},
{"from": 64, "to": 58},
{"from": 64, "to": 61},
{"from": 64, "to": 60},
{"from": 64, "to": 59},
{"from": 64, "to": 57},
{"from": 64, "to": 11},
{"from": 65, "to": 63},
{"from": 65, "to": 64},
{"from": 65, "to": 48},
{"from": 65, "to": 62},
{"from": 65, "to": 58},
{"from": 65, "to": 61},
{"from": 65, "to": 60},
{"from": 65, "to": 59},
{"from": 65, "to": 57},
{"from": 65, "to": 55},
{"from": 66, "to": 64},
{"from": 66, "to": 58},
{"from": 66, "to": 59},
{"from": 66, "to": 62},
{"from": 66, "to": 65},
{"from": 66, "to": 48},
{"from": 66, "to": 63},
{"from": 66, "to": 61},
{"from": 66, "to": 60},
{"from": 67, "to": 57},
{"from": 68, "to": 25},
{"from": 68, "to": 11},
{"from": 68, "to": 24},
{"from": 68, "to": 27},
{"from": 68, "to": 48},
{"from": 68, "to": 41},
{"from": 69, "to": 25},
{"from": 69, "to": 68},
{"from": 69, "to": 11},
{"from": 69, "to": 24},
{"from": 69, "to": 27},
{"from": 69, "to": 48},
{"from": 69, "to": 41},
{"from": 70, "to": 25},
{"from": 70, "to": 69},
{"from": 70, "to": 68},
{"from": 70, "to": 11},
{"from": 70, "to": 24},
{"from": 70, "to": 27},
{"from": 70, "to": 41},
{"from": 70, "to": 58},
{"from": 71, "to": 27},
{"from": 71, "to": 69},
{"from": 71, "to": 68},
{"from": 71, "to": 70},
{"from": 71, "to": 11},
{"from": 71, "to": 48},
{"from": 71, "to": 41},
{"from": 71, "to": 25},
{"from": 72, "to": 26},
{"from": 72, "to": 27},
{"from": 72, "to": 11},
{"from": 73, "to": 48},
{"from": 74, "to": 48},
{"from": 74, "to": 73},
{"from": 75, "to": 69},
{"from": 75, "to": 68},
{"from": 75, "to": 25},
{"from": 75, "to": 48},
{"from": 75, "to": 41},
{"from": 75, "to": 70},
{"from": 75, "to": 71},
{"from": 76, "to": 64},
{"from": 76, "to": 65},
{"from": 76, "to": 66},
{"from": 76, "to": 63},
{"from": 76, "to": 62},
{"from": 76, "to": 48},
{"from": 76, "to": 58}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 16
},
layout:{
randomSeed:34
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled:true,
iterations:2000,
updateInterval:25
}
}
};
var network = new vis.Network(container, data, options);
network.on("stabilizationProgress", function(params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});
}
</script>
</head>
<body onload="draw()">
<p>
With the new stabilization events you can implement your own custom loading bar for all those long loading times!
</p>
<div id="wrapper">
<div id="mynetwork"></div>
<div id="loadingBar">
<div class="outerBorder">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More