added v2 of website (in alpha stage)

www2/css/bootstrap-theme.css

@@ -0,0 +1,470 @@
+/*!
+ * Bootstrap v3.3.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default:disabled,
+.btn-default[disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background-color: #265a88;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success:disabled,
+.btn-success[disabled] {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info:disabled,
+.btn-info[disabled] {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning:disabled,
+.btn-warning[disabled] {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger:disabled,
+.btn-danger[disabled] {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #e8e8e8;
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: #2e6da4;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
+  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image:      -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image:         linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
+  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image:      -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image:         linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+}
+/*# sourceMappingURL=bootstrap-theme.css.map */

www2/css/carousel.css

@@ -0,0 +1,144 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+    padding-bottom: 40px;
+    color: #5a5a5a;
+}
+
+
+/* CUSTOMIZE THE NAVBAR
+-------------------------------------------------- */
+
+/* Special class on .container surrounding .navbar, used for positioning it into place. */
+.navbar-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 20;
+}
+
+/* Flip around the padding for proper display in narrow viewports */
+.navbar-wrapper > .container {
+    padding-right: 0;
+    padding-left: 0;
+}
+.navbar-wrapper .navbar {
+    padding-right: 15px;
+    padding-left: 15px;
+}
+.navbar-wrapper .navbar .container {
+    width: auto;
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+    height: 500px;
+    margin-bottom: 60px;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+    z-index: 10;
+    text-shadow:
+    -0px -0px 3px #000,
+    -2px -2px 0 #000,
+    2px -2px 0 #000,
+    -2px 2px 0 #000,
+    2px 2px 0 #000;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel .item {
+     height: 500px;
+     background-color: #064880;
+ }
+.carousel .item.dark {
+     background-color: #06132c;
+ }
+.carousel-inner > .item > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    height: 500px;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-3 {
+    margin-bottom: 20px;
+    text-align: center;
+}
+.marketing h2 {
+    font-weight: normal;
+}
+.marketing .col-lg-3 p {
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+    margin: 80px 0; /* Space out the Bootstrap <hr> more */
+    border-top: 1px solid #d2d2d2;
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+    font-weight: 300;
+    line-height: 1;
+    letter-spacing: -1px;
+}
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+    /* Navbar positioning foo */
+    .navbar-wrapper {
+        margin-top: 20px;
+    }
+    .navbar-wrapper .container {
+        padding-right: 15px;
+        padding-left: 15px;
+    }
+    .navbar-wrapper .navbar {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
+    /* The navbar becomes detached from the top, so we round the corners */
+    .navbar-wrapper .navbar {
+        border-radius: 4px;
+    }
+
+    /* Bump up size of carousel content */
+    .carousel-caption p {
+        margin-bottom: 20px;
+        font-size: 21px;
+        line-height: 1.4;
+    }
+
+    .featurette-heading {
+        font-size: 50px;
+    }
+}
+
+@media (min-width: 992px) {
+    .featurette-heading {
+        margin-top: 120px;
+    }
+}

www2/css/prettify.css

@@ -0,0 +1,87 @@
+.com {
+  color: gray;
+}
+
+.lit {
+  color: red;
+}
+
+.pun {
+  color: gray;
+}
+
+.pln {
+  color: #333333;
+}
+
+pre.prettyprint {
+  border: 1px solid lightgray;
+  background-color: #fcfcfc;
+  padding: 5px;
+
+  font-size: 10pt;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+
+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;
+}
+
+.str,.atv {
+  color: green;
+}
+
+.kwd,.tag {
+  color:#2B7CE9;
+}
+
+.typ,.atn,.dec {
+  color: darkorange;
+}
+
+@media print {
+  .com {
+    color:#600;
+    font-style:italic;
+  }
+
+  .typ {
+    color:#404;
+    font-weight:700;
+  }
+
+  .lit {
+    color:#044;
+  }
+
+  .pun {
+    color:#440;
+  }
+
+  .pln {
+    color:#000;
+  }
+
+  .atn {
+    color:#404;
+  }
+
+  .str,.atv {
+    color:#060;
+  }
+
+  .kwd,.tag {
+    color:#006;
+    font-weight:700;
+  }
+}

www2/dist/vis.css

@@ -0,0 +1,795 @@
+.vis .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* Must be displayed above for example selected Timeline items */
+  z-index: 10;
+}
+
+.vis-active {
+  box-shadow: 0 0 10px #86d5f8;
+}
+
+/* override some bootstrap styles screwing up the timelines css */
+
+.vis [class*="span"] {
+  min-height: 0;
+  width: auto;
+}
+
+.vis.timeline {
+}
+
+
+.vis.timeline.root {
+  position: relative;
+  border: 1px solid #bfbfbf;
+
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .vispanel {
+  position: absolute;
+
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border: 1px #bfbfbf;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right {
+  border-top-style: solid;
+  border-bottom-style: solid;
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.vis.timeline .background {
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel > .content {
+  position: relative;
+}
+
+.vis.timeline .vispanel .shadow {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.8);
+  /* TODO: find a nice way to ensure shadows are drawn on top of items
+  z-index: 1;
+  */
+}
+
+.vis.timeline .vispanel .shadow.top {
+  top: -1px;
+  left: 0;
+}
+
+.vis.timeline .vispanel .shadow.bottom {
+  bottom: -1px;
+  left: 0;
+}
+
+.vis.timeline .labelset {
+  position: relative;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .labelset .vlabel {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  color: #4d4d4d;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .labelset .vlabel {
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labelset .vlabel:last-child {
+  border-bottom: none;
+}
+
+.vis.timeline .labelset .vlabel .inner {
+  display: inline-block;
+  padding: 5px;
+}
+
+.vis.timeline .labelset .vlabel .inner.hidden {
+  padding: 0;
+}
+
+
+.vis.timeline .itemset {
+  position: relative;
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .itemset .background,
+.vis.timeline .itemset .foreground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.vis.timeline .axis {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.vis.timeline  .foreground .group {
+  position: relative;
+  box-sizing: border-box;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline  .foreground .group:last-child {
+  border-bottom: none;
+}
+
+
+.vis.timeline .item {
+  position: absolute;
+  color: #1A1A1A;
+  border-color: #97B0F8;
+  border-width: 1px;
+  background-color: #D5DDF6;
+  display: inline-block;
+  padding: 5px;
+}
+
+.vis.timeline .item.selected {
+  border-color: #FFC200;
+  background-color: #FFF785;
+
+  /* z-index must be higher than the z-index of custom time bar and current time bar */
+  z-index: 2;
+}
+
+.vis.timeline .editable .item.selected {
+  cursor: move;
+}
+
+.vis.timeline .item.point.selected {
+  background-color: #FFF785;
+}
+
+.vis.timeline .item.box {
+  text-align: center;
+  border-style: solid;
+  border-radius: 2px;
+}
+
+.vis.timeline .item.point {
+  background: none;
+}
+
+.vis.timeline .item.dot {
+  position: absolute;
+  padding: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 4px;
+}
+
+.vis.timeline .item.range {
+  border-style: solid;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+.vis.timeline .item.background {
+  overflow: hidden;
+  border: none;
+  background-color: rgba(213, 221, 246, 0.4);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.vis.timeline .item.range .content {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.vis.timeline .item.background .content {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 5px;
+}
+
+.vis.timeline .item.line {
+  padding: 0;
+  position: absolute;
+  width: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.vis.timeline .item .content {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.vis.timeline .item .delete {
+  background: url('img/timeline/delete.png') no-repeat top center;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  right: -24px;
+  cursor: pointer;
+}
+
+.vis.timeline .item.range .drag-left {
+  position: absolute;
+  width: 24px;
+  height: 100%;
+  top: 0;
+  left: -4px;
+
+  cursor: w-resize;
+}
+
+.vis.timeline .item.range .drag-right {
+  position: absolute;
+  width: 24px;
+  height: 100%;
+  top: 0;
+  right: -4px;
+
+  cursor: e-resize;
+}
+
+.vis.timeline .timeaxis {
+  position: relative;
+  overflow: hidden;
+}
+
+.vis.timeline .timeaxis.foreground {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.vis.timeline .timeaxis.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vis.timeline .timeaxis .text {
+  position: absolute;
+  color: #4d4d4d;
+  padding: 3px;
+  white-space: nowrap;
+}
+
+.vis.timeline .timeaxis .text.measure {
+  position: absolute;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: 0;
+  margin-right: 0;
+  visibility: hidden;
+}
+
+.vis.timeline .timeaxis .grid.vertical {
+  position: absolute;
+  width: 0;
+  border-right: 1px solid;
+}
+
+.vis.timeline .timeaxis .grid.minor {
+  border-color: #e5e5e5;
+}
+
+.vis.timeline .timeaxis .grid.major {
+  border-color: #bfbfbf;
+}
+
+.vis.timeline .currenttime {
+  background-color: #FF7F6E;
+  width: 2px;
+  z-index: 1;
+}
+.vis.timeline .customtime {
+  background-color: #6E94FF;
+  width: 2px;
+  cursor: move;
+  z-index: 1;
+}
+.vis.timeline.root {
+  /*
+  -webkit-transition: height .4s ease-in-out;
+  transition:         height .4s ease-in-out;
+  */
+}
+
+.vis.timeline .vispanel {
+  /*
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+  */
+}
+
+.vis.timeline .axis {
+  /*
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+  */
+}
+
+/* TODO: get animation working nicely
+
+.vis.timeline .item {
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+}
+
+.vis.timeline .item.line {
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+}
+/**/
+
+.vis.timeline .vispanel.background.horizontal .grid.horizontal {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid;
+}
+
+.vis.timeline .vispanel.background.horizontal .grid.minor {
+    border-color: #e5e5e5;
+}
+
+.vis.timeline .vispanel.background.horizontal .grid.major {
+    border-color: #bfbfbf;
+}
+
+
+.vis.timeline .dataaxis .yAxis.major {
+    width: 100%;
+    position: absolute;
+    color: #4d4d4d;
+    white-space: nowrap;
+}
+
+.vis.timeline .dataaxis .yAxis.major.measure{
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
+    border: 0px;
+    visibility: hidden;
+    width: auto;
+}
+
+
+.vis.timeline .dataaxis .yAxis.minor{
+    position: absolute;
+    width: 100%;
+    color: #bebebe;
+    white-space: nowrap;
+}
+
+.vis.timeline .dataaxis .yAxis.minor.measure{
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
+    border: 0px;
+    visibility: hidden;
+    width: auto;
+}
+
+.vis.timeline .dataaxis .yAxis.title{
+    position: absolute;
+    color: #4d4d4d;
+    white-space: nowrap;
+    bottom: 20px;
+    text-align: center;
+}
+
+.vis.timeline .dataaxis .yAxis.title.measure{
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
+    visibility: hidden;
+    width: auto;
+}
+
+.vis.timeline .dataaxis .yAxis.title.left {
+    bottom: 0px;
+    -webkit-transform-origin: left top;
+    -moz-transform-origin: left top;
+    -ms-transform-origin: left top;
+    -o-transform-origin: left top;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+.vis.timeline .dataaxis .yAxis.title.right {
+    bottom: 0px;
+    -webkit-transform-origin: right bottom;
+    -moz-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    -o-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.vis.timeline .legend {
+    background-color: rgba(247, 252, 255, 0.65);
+    padding: 5px;
+    border-color: #b3b3b3;
+    border-style:solid;
+    border-width: 1px;
+    box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
+}
+
+.vis.timeline .legendText {
+    /*font-size: 10px;*/
+    white-space: nowrap;
+    display: inline-block
+}
+.vis.timeline .graphGroup0 {
+    fill:#4f81bd;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #4f81bd;
+}
+
+.vis.timeline .graphGroup1 {
+    fill:#f79646;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #f79646;
+}
+
+.vis.timeline .graphGroup2 {
+    fill: #8c51cf;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #8c51cf;
+}
+
+.vis.timeline .graphGroup3 {
+    fill: #75c841;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #75c841;
+}
+
+.vis.timeline .graphGroup4 {
+    fill: #ff0100;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #ff0100;
+}
+
+.vis.timeline .graphGroup5 {
+    fill: #37d8e6;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #37d8e6;
+}
+
+.vis.timeline .graphGroup6 {
+    fill: #042662;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #042662;
+}
+
+.vis.timeline .graphGroup7 {
+    fill:#00ff26;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #00ff26;
+}
+
+.vis.timeline .graphGroup8 {
+    fill:#ff00ff;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #ff00ff;
+}
+
+.vis.timeline .graphGroup9 {
+    fill: #8f3938;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #8f3938;
+}
+
+.vis.timeline .fill {
+    fill-opacity:0.1;
+    stroke: none;
+}
+
+
+.vis.timeline .bar {
+    fill-opacity:0.5;
+    stroke-width:1px;
+}
+
+.vis.timeline .point {
+    stroke-width:2px;
+    fill-opacity:1.0;
+}
+
+
+.vis.timeline .legendBackground {
+    stroke-width:1px;
+    fill-opacity:0.9;
+    fill: #ffffff;
+    stroke: #c2c2c2;
+}
+
+
+.vis.timeline .outline {
+    stroke-width:1px;
+    fill-opacity:1;
+    fill: #ffffff;
+    stroke: #e5e5e5;
+}
+
+.vis.timeline .iconFill {
+    fill-opacity:0.3;
+    stroke: none;
+}
+
+
+
+div.network-manipulationDiv {
+  border-width: 0;
+  border-bottom: 1px;
+  border-style:solid;
+  border-color: #d6d9d8;
+  background: #ffffff; /* Old browsers */
+  background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 30px;
+}
+
+div.network-manipulation-editMode {
+  position:absolute;
+  left: 0;
+  top: 0;
+  height: 30px;
+  margin-top:20px;
+}
+
+div.network-manipulation-closeDiv {
+  position:absolute;
+  right: 0;
+  top: 0;
+  width: 30px;
+  height: 30px;
+
+  background-position: 20px 3px;
+  background-repeat: no-repeat;
+  background-image: url("img/network/cross.png");
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+div.network-manipulation-closeDiv:hover {
+  opacity: 0.6;
+}
+
+span.network-manipulationUI {
+  font-family: verdana;
+  font-size: 12px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  display:inline-block;
+  background-position: 0px 0px;
+  background-repeat:no-repeat;
+  height:24px;
+  margin: -14px 0px 0px 10px;
+  vertical-align:middle;
+  cursor: pointer;
+  padding: 0px 8px 0px 8px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+span.network-manipulationUI:hover {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
+}
+
+span.network-manipulationUI:active {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
+}
+
+span.network-manipulationUI.back {
+  background-image: url("img/network/backIcon.png");
+}
+
+span.network-manipulationUI.none:hover {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+  cursor: default;
+}
+span.network-manipulationUI.none:active {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+}
+span.network-manipulationUI.none {
+  padding: 0;
+}
+span.network-manipulationUI.notification{
+  margin: 2px;
+  font-weight: bold;
+}
+
+span.network-manipulationUI.add {
+  background-image: url("img/network/addNodeIcon.png");
+}
+
+span.network-manipulationUI.edit {
+  background-image: url("img/network/editIcon.png");
+}
+
+span.network-manipulationUI.edit.editmode {
+  background-color: #fcfcfc;
+  border-style:solid;
+  border-width:1px;
+  border-color: #cccccc;
+}
+
+span.network-manipulationUI.connect {
+  background-image: url("img/network/connectIcon.png");
+}
+
+span.network-manipulationUI.delete {
+  background-image: url("img/network/deleteIcon.png");
+}
+/* top right bottom left */
+span.network-manipulationLabel {
+  margin: 0px 0px 0px 23px;
+  line-height: 25px;
+}
+div.network-seperatorLine {
+  display:inline-block;
+  width:1px;
+  height:20px;
+  background-color: #bdbdbd;
+  margin: 5px 7px 0px 15px;
+}
+
+div.network-navigation_wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+div.network-navigation {
+    width:34px;
+    height:34px;
+    -moz-border-radius: 17px;
+    border-radius: 17px;
+    position:absolute;
+    display:inline-block;
+    background-position: 2px 2px;
+    background-repeat:no-repeat;
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+div.network-navigation:hover {
+    box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
+}
+
+div.network-navigation:active {
+    box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
+}
+
+div.network-navigation.up {
+    background-image: url("img/network/upArrow.png");
+    bottom:50px;
+    left:55px;
+}
+div.network-navigation.down {
+    background-image: url("img/network/downArrow.png");
+    bottom:10px;
+    left:55px;
+}
+div.network-navigation.left {
+    background-image: url("img/network/leftArrow.png");
+    bottom:10px;
+    left:15px;
+}
+div.network-navigation.right {
+    background-image: url("img/network/rightArrow.png");
+    bottom:10px;
+    left:95px;
+}
+div.network-navigation.zoomIn {
+    background-image: url("img/network/plus.png");
+    bottom:10px;
+    right:15px;
+}
+div.network-navigation.zoomOut {
+    background-image: url("img/network/minus.png");
+    bottom:10px;
+    right:55px;
+}
+div.network-navigation.zoomExtends {
+    background-image: url("img/network/zoomExtends.png");
+    bottom:50px;
+    right:15px;
+}

www2/docs/css/prettify.css

@@ -0,0 +1,87 @@
+.com {
+  color: gray;
+}
+
+.lit {
+  color: red;
+}
+
+.pun {
+  color: gray;
+}
+
+.pln {
+  color: #333333;
+}
+
+pre.prettyprint {
+  border: 1px solid lightgray;
+  background-color: #fcfcfc;
+  padding: 5px;
+
+  font-size: 10pt;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+
+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;
+}
+
+.str,.atv {
+  color: green;
+}
+
+.kwd,.tag {
+  color:#2B7CE9;
+}
+
+.typ,.atn,.dec {
+  color: darkorange;
+}
+
+@media print {
+  .com {
+    color:#600;
+    font-style:italic;
+  }
+
+  .typ {
+    color:#404;
+    font-weight:700;
+  }
+
+  .lit {
+    color:#044;
+  }
+
+  .pun {
+    color:#440;
+  }
+
+  .pln {
+    color:#000;
+  }
+
+  .atn {
+    color:#404;
+  }
+
+  .str,.atv {
+    color:#060;
+  }
+
+  .kwd,.tag {
+    color:#006;
+    font-weight:700;
+  }
+}

www2/docs/css/style.css

@@ -0,0 +1,83 @@
+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 {
+  position: relative;
+  margin: 0 auto;
+  padding: 10px 10px 50px 10px;
+  width: 970px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+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 #032740;
+  color: #032740;
+}
+
+h3 {
+  font-size: 140%;
+}
+
+a > img {
+  border: none;
+}
+
+a {
+  color: #032740;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #064880;
+  text-decoration: none;
+}
+
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+
+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;
+}
+
+p.important_note {
+  color: #3a6baa;
+    font-weight:bold;
+}

www2/docs/dataset.html

@@ -0,0 +1,931 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vis.js | DataSet documentation</title>
+
+  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
+  <link href='css/style.css' type='text/css' rel='stylesheet'>
+
+  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
+</head>
+
+<body onload="prettyPrint();">
+<div id="container">
+
+<h1>DataSet documentation</h1>
+
+<h2 id="Contents">Contents</h2>
+<ul>
+  <li><a href="#Overview">Overview</a></li>
+  <li><a href="#Example">Example</a></li>
+  <li><a href="#Construction">Construction</a></li>
+  <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Subscriptions">Subscriptions</a></li>
+  <li><a href="#Data_Manipulation">Data Manipulation</a></li>
+  <li><a href="#Data_Selection">Data Selection</a></li>
+  <li><a href="#Data_Policy">Data Policy</a></li>
+</ul>
+
+
+<h2 id="Overview">Overview</h2>
+
+<p>
+  Vis.js comes with a flexible DataSet, which can be used to hold and
+  manipulate unstructured data and listen for changes in the data.
+  The DataSet is key/value based. Data items can be added, updated and
+  removed from the DatSet, and one can subscribe to changes in the DataSet.
+  The data in the DataSet can be filtered and ordered, and fields (like
+  dates) can be converted to a specific type. Data can be normalized when
+  appending it to the DataSet as well.
+</p>
+
+
+<h2 id="Example">Example</h2>
+
+<p>
+  The following example shows how to use a DataSet.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var options = {};
+var data = new vis.DataSet(options);
+
+// add items
+// note that the data items can contain different properties and data formats
+data.add([
+  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// subscribe to any change in the DataSet
+data.on('*', function (event, properties, senderId) {
+  console.log('event', event, properties);
+});
+
+// update an existing item
+data.update({id: 2, group: 1});
+
+// remove an item
+data.remove(4);
+
+// get all ids
+var ids = data.getIds();
+console.log('ids', ids);
+
+// get a specific item
+var item1 = data.get(1);
+console.log('item1', item1);
+
+// retrieve a filtered subset of the data
+var items = data.get({
+  filter: function (item) {
+    return item.group == 1;
+  }
+});
+console.log('filtered items', items);
+
+// retrieve formatted items
+var items = data.get({
+  fields: ['id', 'date'],
+  type: {
+    date: 'ISODate'
+  }
+});
+console.log('formatted items', items);
+</pre>
+
+
+
+<h2 id="Construction">Construction</h2>
+
+<p>
+  A DataSet can be constructed as:
+</p>
+
+<pre class="prettyprint lang-js">
+var data = new vis.DataSet([data] [, options])
+</pre>
+
+<p>
+  After construction, data can be added to the DataSet using the methods
+  <code>add</code> and <code>update</code>, as described in section
+  <a href="#Data_Manipulation">Data Manipulation</a>.
+</p>
+
+<p>
+  The parameter <code>data</code> is optional and can be an Array or
+  <a href="https://developers.google.com/chart/interactive/docs/reference#DataTable" target="_blank">Google DataTable</a> with items.
+</p>
+
+<p>
+  The parameter <code>options</code> is optional and is an object which can
+  contain the following properties:
+</p>
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Default value</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>fieldId</td>
+    <td>String</td>
+    <td>"id"</td>
+    <td>
+      The name of the field containing the id of the items.
+
+      When data is fetched from a server which uses some specific
+      field to identify items, this field name can be specified
+      in the DataSet using the option <code>fieldId</code>.
+      For example <a href="http://couchdb.apache.org/"
+                     target="_blank">CouchDB</a> uses the field
+      <code>"_id"</code> to identify documents.
+    </td>
+  </tr>
+  <tr>
+    <td>type</td>
+    <td>Object.&lt;String,&nbsp;String&gt;</td>
+    <td>none</td>
+    <td>
+      An object containing field names as key, and data types as
+      value. By default, the type of the properties of items are left
+      unchanged. Item properties can be normalized by specifying a
+      field type. This is useful for example to automatically convert
+      stringified dates coming from a server into JavaScript Date
+      objects. The available data types are listed in section
+      <a href="#Data_Types">Data Types</a>.
+    </td>
+  </tr>
+  <tr>
+    <td>queue</td>
+    <td>Object | boolean</td>
+    <td>none</td>
+    <td>
+      Queue data changes ('add', 'update', 'remove') and flush them at once.
+      The queue can be flushed manually by calling
+      <code>DataSet.flush()</code>, or can be flushed after a configured delay
+      or maximum number of entries.
+      <br>
+      <br>
+      When <code>queue</code> is true, a queue is created
+      with default options. Options can be specified by providing an object:
+      <ul>
+        <li><code>delay: number</code><br>
+          The queue will be flushed automatically after an inactivity of this
+          delay in milliseconds. Default value is <code>null</code>.
+        <li><code>max: number</code><br>
+          When the queue exceeds the given maximum number
+          of entries, the queue is flushed automatically.
+          Default value is <code>Infinity</code>.
+        </li>
+      </ul>
+    </td>
+  </tr>
+</table>
+
+
+<h2 id="Methods">Methods</h2>
+
+<p>DataSet contains the following methods.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Method</th>
+    <th>Return Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>add(data [, senderId])</td>
+    <td>Number[]</td>
+    <td>Add one or multiple items to the DataSet. <code>data</code> can be a single item or an array with items. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section <a href="#Data_Manipulation">Data Manipulation</a>.</td>
+  </tr>
+
+  <tr>
+    <td>clear([senderId])</td>
+    <td>Number[]</td>
+    <td>Clear all data from the DataSet. The function returns an array with the ids of the removed items.</td>
+  </tr>
+
+  <tr>
+    <td>distinct(field)</td>
+    <td>Array</td>
+    <td>Find all distinct values of a specified field. Returns an unordered array containing all distinct values. If data items do not contain the specified field are ignored.</td>
+  </tr>
+
+  <tr>
+    <td>flush()</td>
+    <td>none</td>
+    <td>Flush queued changes. Only available when the DataSet is configured with the option <code>queue</code>, see section <a href="#Construction">Construction</a>.</td>
+  </tr>
+
+  <tr>
+    <td>forEach(callback [, options])</td>
+    <td>none</td>
+    <td>
+      Execute a callback function for every item in the dataset.
+      The available options are described in section <a href="#Data_Selection">Data Selection</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      get([options] [, data])<br>
+      get(id [,options] [, data])<br>
+      get(ids [, options] [, data])
+    </td>
+    <td>Object | Array | DataTable</td>
+    <td>
+      Get a single item, multiple items, or all items from the DataSet.
+      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getDataSet()
+    </td>
+    <td>DataSet</td>
+    <td>
+      Get the DataSet itself. In case of a DataView, this function does not
+      return the DataSet to which the DataView is connected.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getIds([options])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Get ids of all items or of a filtered set of items.
+      Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>map(callback [, options])</td>
+    <td>Array</td>
+    <td>
+      Map every item in the DataSet.
+      The available options are described in section <a href="#Data_Selection">Data Selection</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>max(field)</td>
+    <td>Object | null</td>
+    <td>
+      Find the item with maximum value of specified field. Returns <code>null</code> if no item is found.
+    </td>
+  </tr>
+
+  <tr>
+    <td>min(field)</td>
+    <td>Object | null</td>
+    <td>
+      Find the item with minimum value of specified field. Returns <code>null</code> if no item is found.
+    </td>
+  </tr>
+
+  <tr>
+    <td>off(event, callback)</td>
+    <td>none</td>
+    <td>
+      Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>on(event, callback)</td>
+    <td>none</td>
+    <td>
+      Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      remove(id [, senderId])<br>
+      remove(ids [, senderId])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Remove one or multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      setOptions(options)
+    </td>
+    <td>none</td>
+    <td>
+      Set options for the DataSet. Available options:
+
+      <ul>
+        <li>
+          <code>queue</code><br>
+          Queue data changes ('add', 'update', 'remove') and flush them at once.
+          The queue can be flushed manually by calling
+          <code>DataSet.flush()</code>, or can be flushed after a configured delay
+          or maximum number of entries.
+          <br>
+          <br>
+          When <code>queue</code> is true, a queue is created with default options.
+          When <code>queue</code> is false, an existing queue will be flushed and removed.
+          Options can be specified by providing an object:
+          <ul>
+            <li><code>delay: number</code><br>
+              The queue will be flushed automatically after an inactivity of this
+              delay in milliseconds. Default value is <code>null</code>.
+            <li><code>max: number</code><br>
+              When the queue exceeds the given maximum number
+              of entries, the queue is flushed automatically.
+              Default value is <code>Infinity</code>.
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      update(data [, senderId])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Update on ore multiple existing items. <code>data</code> can be a single item or an array with items. When an item doesn't  exist, it will be created. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
+    </td>
+  </tr>
+
+</table>
+
+
+<h2 id="Subscriptions">Subscriptions</h2>
+
+<p>
+  One can subscribe on changes in a DataSet.
+  A subscription can be created using the method <code>on</code>,
+  and removed with <code>off</code>.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+
+// subscribe to any change in the DataSet
+data.on('*', function (event, properties, senderId) {
+  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
+});
+
+// add an item
+data.add({id: 1, text: 'item 1'});              // triggers an 'add' event
+data.update({id: 1, text: 'item 1 (updated)'}); // triggers an 'update' event
+data.remove(1);                                 // triggers an 'remove' event
+</pre>
+
+
+<h3 id="On">On</h3>
+
+<p>
+  Subscribe to an event.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">DataSet.on(event, callback)</pre>
+
+Where:
+<ul>
+  <li>
+    <code>event</code> is a String containing any of the events listed
+    in section <a href="#Events">Events</a>.
+  </li>
+  <li>
+    <code>callback</code> is a callback function which will be called
+    each time the event occurs. The callback function is described in
+    section <a href="#Callback">Callback</a>.
+  </li>
+</ul>
+
+<h3 id="Off">Off</h3>
+
+<p>
+  Unsubscribe from an event.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">DataSet.off(event, callback)</pre>
+
+Where <code>event</code> and <code>callback</code> correspond with the
+parameters used to <a href="#On">subscribe</a> to the event.
+
+<h3 id="Events">Events</h3>
+
+<p>
+  The following events are available for subscription:
+</p>
+
+<table>
+  <tr>
+    <th>Event</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>add</td>
+    <td>
+      The <code>add</code> event is triggered when an item
+      or a set of items is added, or when an item is updated while
+      not yet existing.
+    </td>
+  </tr>
+  <tr>
+    <td>update</td>
+    <td>
+      The <code>update</code> event is triggered when an existing item
+      or a set of existing items is updated.
+    </td>
+  </tr>
+  <tr>
+    <td>remove</td>
+    <td>
+      The <code>remove</code> event is triggered when an item
+      or a set of items is removed.
+    </td>
+  </tr>
+  <tr>
+    <td>*</td>
+    <td>
+      The <code>*</code> event is triggered when any of the events
+      <code>add</code>, <code>update</code>, and <code>remove</code>
+      occurs.
+    </td>
+  </tr>
+</table>
+
+<h3 id="Callback">Callback</h3>
+
+<p>
+  The callback functions of subscribers are called with the following
+  parameters:
+</p>
+
+    <pre class="prettyprint lang-js">
+function (event, properties, senderId) {
+  // handle the event
+});
+</pre>
+
+<p>
+  where the parameters are defined as
+</p>
+
+<table>
+  <tr>
+    <th>Parameter</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>event</td>
+    <td>String</td>
+    <td>
+      Any of the available events: <code>add</code>,
+      <code>update</code>, or <code>remove</code>.
+    </td>
+  </tr>
+  <tr>
+    <td>properties</td>
+    <td>Object&nbsp;|&nbsp;null</td>
+    <td>
+      Optional properties providing more information on the event.
+      In case of the events <code>add</code>,
+      <code>update</code>, and <code>remove</code>,
+      <code>properties</code> is always an object containing a property
+      <code>items</code>, which contains an array with the ids of the affected
+      items. The <code>update</code> event has an extra field <code>data</code>
+      containing the original data of the updated items, i.e. the gives the
+      changed fields of the changed items.
+    </td>
+  </tr>
+  <tr>
+    <td>senderId</td>
+    <td>String&nbsp;|&nbsp;Number</td>
+    <td>
+      An senderId, optionally provided by the application code
+      which triggered the event. If senderId is not provided, the
+      argument will be <code>null</code>.
+    </td>
+  </tr>
+</table>
+
+
+<h2 id="Data_Manipulation">Data Manipulation</h2>
+
+<p>
+  The data in a DataSet can be manipulated using the methods
+  <a href="#Add"><code>add</code></a>,
+  <a href="#Update"><code>update</code></a>,
+  and <a href="#Remove"><code>remove</code></a>.
+  The DataSet can be emptied using the method
+  <a href="#Clear"><code>clear</code></a>.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+
+// add items
+data.add([
+  {id: 1, text: 'item 1'},
+  {id: 2, text: 'item 2'},
+  {id: 3, text: 'item 3'}
+]);
+
+// update an item
+data.update({id: 2, text: 'item 2 (updated)'});
+
+// remove an item
+data.remove(3);
+</pre>
+
+<h3 id="Add">Add</h3>
+
+<p>
+  Add a data item or an array with items.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var addedIds = DataSet.add(data [, senderId])</pre>
+
+The argument <code>data</code> can contain:
+<ul>
+  <li>
+    An <code>Object</code> containing a single item to be
+    added. The item must contain an id.
+  </li>
+  <li>
+    An <code>Array</code> or
+    <code>google.visualization.DataTable</code> containing
+    a list with items to be added. Each item must contain
+    an id.
+  </li>
+</ul>
+
+<p>
+  After the items are added to the DataSet, the DataSet will
+  trigger an event <code>add</code>. When a <code>senderId</code>
+  is provided, this id will be passed with the triggered
+  event to all subscribers.
+</p>
+
+<p>
+  The method will throw an Error when an item with the same id
+  as any of the added items already exists.
+</p>
+
+<h3 id="Update">Update</h3>
+
+<p>
+  Update a data item or an array with items.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var updatedIds = DataSet.update(data [, senderId])</pre>
+
+The argument <code>data</code> can contain:
+<ul>
+  <li>
+    An <code>Object</code> containing a single item to be
+    updated. The item must contain an id.
+  </li>
+  <li>
+    An <code>Array</code> or
+    <code>google.visualization.DataTable</code> containing
+    a list with items to be updated. Each item must contain
+    an id.
+  </li>
+</ul>
+
+<p>
+  The provided properties will be merged in the existing item.
+  When an item does not exist, it will be created.
+</p>
+
+<p>
+  After the items are updated, the DataSet will
+  trigger an event <code>add</code> for the added items, and
+  an event <code>update</code>. When a <code>senderId</code>
+  is provided, this id will be passed with the triggered
+  event to all subscribers.
+</p>
+
+<h3 id="Remove">Remove</h3>
+
+<p>
+  Remove a data item or an array with items.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var removedIds = DataSet.remove(id [, senderId])</pre>
+
+<p>
+  The argument <code>id</code> can be:
+</p>
+<ul>
+  <li>
+    A <code>Number</code> or <code>String</code> containing the id
+    of a single item to be removed.
+  </li>
+  <li>
+    An <code>Object</code> containing the item to be deleted.
+    The item will be deleted by its id.
+  </li>
+  <li>
+    An Array containing ids or items to be removed.
+  </li>
+</ul>
+
+<p>
+  The method ignores removal of non-existing items, and returns an array
+  containing the ids of the items which are actually removed from the
+  DataSet.
+</p>
+
+<p>
+  After the items are removed, the DataSet will
+  trigger an event <code>remove</code> for the removed items.
+  When a <code>senderId</code> is provided, this id will be passed with
+  the triggered event to all subscribers.
+</p>
+
+
+<h3 id="Clear">Clear</h3>
+
+<p>
+  Clear the complete DataSet.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var removedIds = DataSet.clear([senderId])</pre>
+
+<p>
+  After the items are removed, the DataSet will
+  trigger an event <code>remove</code> for all removed items.
+  When a <code>senderId</code> is provided, this id will be passed with
+  the triggered event to all subscribers.
+</p>
+
+
+<h2 id="Data_Selection">Data Selection</h2>
+
+<p>
+  The DataSet contains functionality to format, filter, and sort data retrieved via the
+  methods <code>get</code>, <code>getIds</code>, <code>forEach</code>, and <code>map</code>. These methods have the following syntax:
+</p>
+
+<pre class="prettyprint lang-js">
+DataSet.get([id] [, options] [, data]);
+DataSet.getIds([options]);
+DataSet.forEach(callback [, options]);
+DataSet.map(callback [, options]);
+</pre>
+
+<p>
+  Where <code>options</code> is an Object which can have the following
+  properties:
+</p>
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>fields</td>
+    <td>String[&nbsp;]</td>
+    <td>
+      An array with field names.
+      By default, all properties of the items are emitted.
+      When <code>fields</code> is defined, only the properties
+      whose name is specified in <code>fields</code> will be included
+      in the returned items.
+    </td>
+  </tr>
+
+  <tr>
+    <td>type</td>
+    <td>Object.&lt;String,&nbsp;String&gt;</td>
+    <td>
+      An object containing field names as key, and data types as value.
+      By default, the type of the properties of an item are left
+      unchanged. When a field type is specified, this field in the
+      items will be converted to the specified type. This can be used
+      for example to convert ISO strings containing a date to a
+      JavaScript Date object, or convert strings to numbers or vice
+      versa. The available data types are listed in section
+      <a href="#Data_Types">Data Types</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>filter</td>
+    <td>Function</td>
+    <td>Items can be filtered on specific properties by providing a filter
+      function. A filter function is executed for each of the items in the
+      DataSet, and is called with the item as parameter. The function must
+      return a boolean. All items for which the filter function returns
+      true will be emitted.
+      See section <a href="#Data_Filtering">Data Filtering</a>.</td>
+  </tr>
+
+  <tr>
+    <td>order</td>
+    <td>String | Function</td>
+    <td>Order the items by a field name or custom sort function.</td>
+  </tr>
+
+  <tr>
+      <td>returnType</td>
+      <td>String</td>
+      <td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
+          The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
+  </tr>
+
+</table>
+
+<p>
+  The following example demonstrates formatting properties and filtering
+  properties from items.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+data.add([
+  {id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// retrieve formatted items
+var items = data.get({
+  fields: ['id', 'date', 'group'],    // output the specified fields only
+  type: {
+    date: 'Date',                   // convert the date fields to Date objects
+    group: 'String'                 // convert the group fields to Strings
+  }
+});
+</pre>
+
+<h3 id="Getting_Data">Getting Data</h3>
+
+<p>
+  Data can be retrieved from the DataSet using the method <code>get</code>.
+  This method can return a single item or a list with items.
+</p>
+
+<p>A single item can be retrieved by its id:</p>
+
+<pre class="prettyprint lang-js">
+var item1 = dataset.get(1);
+</pre>
+
+<p>A selection of items can be retrieved by providing an array with ids:</p>
+
+<pre class="prettyprint lang-js">
+var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
+</pre>
+
+<p>All items can be retrieved by simply calling <code>get</code> without
+  specifying an id:</p>
+
+<pre class="prettyprint lang-js">
+var items = dataset.get();          // retrieve all items
+</pre>
+
+
+<h3 id="Data_Filtering">Data Filtering</h3>
+
+<p>
+  Items can be filtered on specific properties by providing a filter
+  function. A filter function is executed for each of the items in the
+  DataSet, and is called with the item as parameter. The function must
+  return a boolean. All items for which the filter function returns
+  true will be emitted.
+</p>
+
+<pre class="prettyprint lang-js">
+// retrieve all items having a property group with value 2
+var group2 = dataset.get({
+  filter: function (item) {
+    return (item.group == 2);
+  }
+});
+
+// retrieve all items having a property balance with a value above zero
+var positiveBalance = dataset.get({
+  filter: function (item) {
+    return (item.balance > 0);
+  }
+});
+
+</pre>
+
+
+<h3 id="Data_Types">Data Types</h3>
+
+<p>
+  DataSet supports the following data types:
+</p>
+
+<table style="width: 100%">
+  <tr>
+    <th>Name</th>
+    <th>Description</th>
+    <th>Examples</th>
+  </tr>
+  <tr>
+    <td>Boolean</td>
+    <td>A JavaScript Boolean</td>
+    <td>
+      <code>true</code><br>
+      <code>false</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Number</td>
+    <td>A JavaScript Number</td>
+    <td>
+      <code>32</code><br>
+      <code>2.4</code>
+    </td>
+  </tr>
+  <tr>
+    <td>String</td>
+    <td>A JavaScript String</td>
+    <td>
+      <code>"hello world"</code><br>
+      <code>"2013-06-28"</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Date</td>
+    <td>A JavaScript Date object</td>
+    <td>
+      <code>new Date()</code><br>
+      <code>new Date(2013, 5, 28)</code><br>
+      <code>new Date(1372370400000)</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Moment</td>
+    <td>A Moment object, created with
+      <a href="http://momentjs.com/" target="_blank">moment.js</a></td>
+    <td>
+      <code>moment()</code><br>
+      <code>moment('2013-06-28')</code>
+    </td>
+  </tr>
+  <tr>
+    <td>ISODate</td>
+    <td>A string containing an ISO Date</td>
+    <td>
+      <code>new Date().toISOString()</code><br>
+      <code>"2013-06-27T22:00:00.000Z"</code>
+    </td>
+  </tr>
+  <tr>
+    <td>ASPDate</td>
+    <td>A string containing an ASP Date</td>
+    <td>
+      <code>"/Date(1372370400000)/"</code><br>
+      <code>"/Date(1198908717056-0700)/"</code>
+    </td>
+  </tr>
+</table>
+
+
+<h2 id="Data_Policy">Data Policy</h2>
+<p>
+  All code and data is processed and rendered in the browser.
+  No data is sent to any server.
+</p>
+
+</div>
+</body>
+</html>

www2/docs/dataview.html

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

www2/docs/graph3d.html

@@ -0,0 +1,673 @@
+<html>
+
+<head>
+  <title>vis.js | graph3d documentation</title>
+
+  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
+  <link href='css/style.css' type='text/css' rel='stylesheet'>
+
+  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
+</head>
+
+<body onload="prettyPrint();">
+<div id="container">
+
+<h1>Graph3d documentation</h1>
+
+<h2 id="Overview">Overview</h2>
+<p>
+  Graph3d is an interactive visualization chart to draw data in a three dimensional
+  graph. You can freely move and zoom in the graph by dragging and scrolling in the
+  window. Graph3d also supports animation of a graph.
+</p>
+<p>
+  Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
+  to render graphs, and can render up to a few thousands of data points smoothly.
+</p>
+
+<h2 id="Contents">Contents</h2>
+<ul>
+  <li><a href="#Overview">Overview</a></li>
+  <li><a href="#Loading">Loading</a></li>
+  <li><a href="#Data_Format">Data Format</a></li>
+  <li><a href="#Configuration_Options">Configuration Options</a></li>
+  <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Events">Events</a></li>
+  <li><a href="#Data_Policy">Data Policy</a></li>
+</ul>
+
+<h2 id="Example">Example</h2>
+<p>
+  The following code shows how to create a Graph3d and provide it with data.
+  More examples can be found in the <a href="../examples">examples</a> directory.
+</p>
+
+<pre class="prettyprint lang-html">
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Graph 3D demo&lt;/title&gt;
+
+  &lt;style&gt;
+    body {font: 10pt arial;}
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
+
+  &lt;script type="text/javascript"&gt;
+  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.
+    var 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 &lt; axisMax; x+=axisStep) {
+      for (var y = 0; y &lt; axisMax; y+=axisStep) {
+        var value = custom(x, y);
+        data.add({
+          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
+    };
+
+    // create a graph3d
+    var container = document.getElementById('mygraph');
+    graph3d = new vis.Graph3d(container, data, options);
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="drawVisualization();"&gt;
+  &lt;div id="mygraph"&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+
+</pre>
+
+
+<h2 id="Loading">Loading</h2>
+
+<p>
+  The class name of the Graph3d is <code>vis.Graph3d</code>.
+  When constructing a Graph3d, an HTML DOM container must be provided to attach
+  the graph to. Optionally, data an options can be provided.
+  Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
+  section <a href="#Data_Format">Data Format</a>.
+  Options is a name-value map in the JSON format. The available options
+  are described in section <a href="#Configuration_Options">Configuration Options</a>.
+</p>
+<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
+
+<p>
+  Data and options can be set or changed later on using the functions
+  <code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
+</p>
+
+<h2 id="Data_Format">Data Format</h2>
+<p>
+  Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
+  JSON objects are added to this DataSet by using the <code>add()</code> function.
+  Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
+  and can optionally have a property <code>style</code> and <code>filter</code>.
+
+<h3>Definition</h3>
+<p>
+  The DataSet JSON objects are defined as:
+</p>
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Required</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>x</td>
+    <td>number</td>
+    <td>yes</td>
+    <td>Location on the x-axis.</td>
+  </tr>
+  <tr>
+    <td>y</td>
+    <td>number</td>
+    <td>yes</td>
+    <td>Location on the y-axis.</td>
+  </tr>
+  <tr>
+    <td>z</td>
+    <td>number</td>
+    <td>yes</td>
+    <td>Location on the z-axis.</td>
+  </tr>
+  <tr>
+    <td>style</td>
+    <td>number</td>
+    <td>no</td>
+    <td>The data value, required for graph styles <code>dot-color</code> and
+      <code>dot-size</code>.
+    </td>
+  </tr>
+  <tr>
+    <td>filter</td>
+    <td>*</td>
+    <td>no</td>
+    <td>Filter values used for the animation.
+      This column may have any type, such as a number, string, or Date.</td>
+  </tr>
+</table>
+
+
+
+<h2 id="Configuration_Options">Configuration Options</h2>
+
+<p>
+  Options can be used to customize the graph. Options are defined as a JSON object.
+  All options are optional.
+</p>
+
+<pre class="prettyprint lang-js">
+var options = {
+    width:  '100%',
+    height: '400px',
+    style: 'surface'
+};
+</pre>
+
+<p>
+  The following options are available.
+</p>
+
+<table>
+<tr>
+  <th>Name</th>
+  <th>Type</th>
+  <th>Default</th>
+  <th>Description</th>
+</tr>
+
+<tr>
+  <td>animationInterval</td>
+  <td>number</td>
+  <td>1000</td>
+  <td>The animation interval in milliseconds. This determines how fast
+    the animation runs.</td>
+</tr>
+<tr>
+  <td>animationPreload</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>If false, the animation frames are loaded as soon as they are requested.
+    if <code>animationPreload</code> is true, the graph will automatically load
+    all frames in the background, resulting in a smoother animation as soon as
+    all frames are loaded. The load progress is shown on screen.</td>
+</tr>
+<tr>
+  <td>animationAutoStart</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>If true, the animation starts playing automatically after the graph
+    is created.</td>
+</tr>
+
+<tr>
+  <td>backgroundColor</td>
+  <td>string or Object</td>
+  <td>'white'</td>
+  <td>The background color for the main area of the chart.
+    Can be either a simple HTML color string, for example: 'red' or '#00cc00',
+    or an object with the following properties.</td>
+</tr>
+<tr>
+  <td>backgroundColor.stroke</td>
+  <td>string</td>
+  <td>'gray'</td>
+  <td>The color of the chart border, as an HTML color string.</td>
+</tr>
+<tr>
+  <td>backgroundColor.strokeWidth</td>
+  <td>number</td>
+  <td>1</td>
+  <td>The border width, in pixels.</td>
+</tr>
+<tr>
+  <td>backgroundColor.fill</td>
+  <td>string</td>
+  <td>'white'</td>
+  <td>The chart fill color, as an HTML color string.</td>
+</tr>
+
+<tr>
+  <td>cameraPosition</td>
+  <td>Object</td>
+  <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
+  <td>Set the initial rotation and position of the camera.
+    The object <code>cameraPosition</code> contains three parameters:
+    <code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
+    Parameter <code>horizontal</code> is a value in radians and can have any
+    value (but normally in the range of 0 and 2*Pi).
+    Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
+    Parameter <code>distance</code> is the (normalized) distance from the
+    camera to the center of the graph, in the range of 0.71 to 5.0. A
+    larger distance puts the graph further away, making it smaller.
+    All parameters are optional.
+</tr>
+
+<tr>
+  <td>height</td>
+  <td>string</td>
+  <td>'400px'</td>
+  <td>The height of the graph in pixels or as a percentage.</td>
+</tr>
+
+<tr>
+  <td>keepAspectRatio</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
+    keep their aspect ratio. If false, the axes are scaled such that they
+    both have the same, maximum with.</td>
+</tr>
+
+<tr>
+  <td>showAnimationControls</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If true, animation controls are created at the bottom of the Graph.
+    The animation controls consists of buttons previous, start/stop, next,
+    and a slider showing the current frame.
+    Only applicable when the provided data contains an animation.</td>
+</tr>
+<tr>
+  <td>showGrid</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
+    graph).</td>
+</tr>
+<tr>
+  <td>showPerspective</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If true, the graph is drawn in perspective: points and lines which
+    are further away are drawn smaller.
+    Note that the graph currently does not support a gray colored bottom side
+    when drawn in perspective.
+  </td>
+</tr>
+<tr>
+  <td>showShadow</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>Show shadow on the graph.</td>
+</tr>
+<tr>
+  <td>style</td>
+  <td>string</td>
+  <td>'dot'</td>
+  <td>The style of the 3d graph. Available styles:
+    <code>bar</code>,
+    <code>bar-color</code>,
+    <code>bar-size</code>,
+    <code>dot</code>,
+    <code>dot-line</code>,
+    <code>dot-color</code>,
+    <code>dot-size</code>,
+    <code>line</code>,
+    <code>grid</code>,
+    or <code>surface</code></td>
+</tr>
+
+<tr>
+  <td>tooltip</td>
+  <td>boolean | function</td>
+  <td>false</td>
+  <td>Show a tooltip showing the values of the hovered data point.
+    The contents of the tooltip can be customized by providing a callback
+    function as <code>tooltip</code>. In this case the function is called
+    with an object containing parameters <code>x</code>,
+    <code>y</code>, and <code>z</code> argument,
+    and must return a string which may contain HTML.
+  </td>
+</tr>
+
+<tr>
+  <td>valueMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the value-axis. Only available in combination
+    with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
+</tr>
+<tr>
+  <td>valueMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the value-axis. Only available in combination
+    with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
+</tr>
+<tr>
+  <td>verticalRatio</td>
+  <td>number</td>
+  <td>0.5</td>
+  <td>A value between 0.1 and 1.0. This scales the vertical size of the graph
+    When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
+    the graph will be a cube.</td>
+</tr>
+
+<tr>
+  <td>width</td>
+  <td>string</td>
+  <td>'400px'</td>
+  <td>The width of the graph in pixels or as a percentage.</td>
+</tr>
+
+<tr>
+  <td>xBarWidth</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The width of bars in x direction. By default, the width is equal to the distance
+    between the data points, such that bars adjoin each other.
+    Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
+</tr>
+
+<tr>
+  <td>xCenter</td>
+  <td>string</td>
+  <td>'55%'</td>
+  <td>The horizontal center position of the graph, as a percentage or in
+    pixels.</td>
+</tr>
+<tr>
+  <td>xMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the x-axis.</td>
+</tr>
+<tr>
+  <td>xMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the x-axis.</td>
+</tr>
+<tr>
+  <td>xStep</td>
+  <td>number</td>
+  <td>none</td>
+  <td>Step size for the grid on the x-axis.</td>
+</tr>
+<tr>
+  <td>xValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the x-axis,
+    for example <code>function (x) {return (x * 100) + '%'}</code>.
+  </td>
+</tr>
+
+<tr>
+  <td>yBarWidth</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The width of bars in y direction. By default, the width is equal to the distance
+    between the data points, such that bars adjoin each other.
+    Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
+</tr>
+
+<tr>
+  <td>yCenter</td>
+  <td>string</td>
+  <td>'45%'</td>
+  <td>The vertical center position of the graph, as a percentage or in
+    pixels.</td>
+</tr>
+<tr>
+  <td>yMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the y-axis.</td>
+</tr>
+<tr>
+  <td>yMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the y-axis.</td>
+</tr>
+<tr>
+  <td>yStep</td>
+  <td>number</td>
+  <td>none</td>
+  <td>Step size for the grid on the y-axis.</td>
+</tr>
+<tr>
+  <td>yValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the y-axis,
+    for example <code>function (y) {return (y * 100) + '%'}</code>.
+  </td>
+</tr>
+
+<tr>
+  <td>zMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the z-axis.</td>
+</tr>
+<tr>
+  <td>zMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the z-axis.</td>
+</tr>
+<tr>
+  <td>zStep</td>
+  <td>number</td>
+  <td>none</td>
+  <td>Step size for the grid on the z-axis.</td>
+</tr>
+<tr>
+  <td>zValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the z-axis,
+    for example <code>function (z) {return (z * 100) + '%'}</code>.
+  </td>
+</tr>
+
+<tr>
+  <td>xLabel</td>
+  <td>String</td>
+  <td>x</td>
+  <td>Label on the X axis.</td>
+</tr>
+<tr>
+  <td>yLabel</td>
+  <td>String</td>
+  <td>y</td>
+  <td>Label on the Y axis.</td>
+</tr>
+<tr>
+  <td>zLabel</td>
+  <td>String</td>
+  <td>z</td>
+  <td>Label on the Z axis.</td>
+</tr>
+<tr>
+  <td>filterLabel</td>
+  <td>String</td>
+  <td>time</td>
+  <td>Label for the filter column.</td>
+</tr>
+<tr>
+  <td>legendLabel</td>
+  <td>String</td>
+  <td>value</td>
+  <td>Label for the style description.</td>
+</tr>
+</table>
+
+
+<h2 id="Methods">Methods</h2>
+<p>
+  Graph3d supports the following methods.
+</p>
+
+<table>
+  <tr>
+    <th>Method</th>
+    <th>Return Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>animationStart()</td>
+    <td>none</td>
+    <td>Start playing the animation.
+      Only applicable when animation data is available.</td>
+  </tr>
+
+  <tr>
+    <td>animationStop()</td>
+    <td>none</td>
+    <td>Stop playing the animation.
+      Only applicable when animation data is available.</td>
+  </tr>
+
+  <tr>
+    <td>getCameraPosition()</td>
+    <td>An object with parameters <code>horizontal</code>,
+      <code>vertical</code> and <code>distance</code></td>
+    <td>Returns an object with parameters <code>horizontal</code>,
+      <code>vertical</code> and <code>distance</code>,
+      which each one of them is a number, representing the rotation and position
+      of the camera.</td>
+  </tr>
+
+  <tr>
+    <td>redraw()</td>
+    <td>none</td>
+    <td>Redraw the graph. Useful after the camera position is changed externally,
+      when data is changed, or when the layout of the webpage changed.</td>
+  </tr>
+
+  <tr>
+    <td>setData(data)</td>
+    <td>none</td>
+    <td>Replace the data in the Graph3d.</td>
+  </tr>
+
+  <tr>
+    <td>setOptions(options)</td>
+    <td>none</td>
+    <td>Update options of Graph3d.
+      The provided options will be merged with current options.</td>
+  </tr>
+
+  <tr>
+    <td>setSize(width, height)</td>
+    <td>none</td>
+    <td>Parameters <code>width</code> and <code>height</code> are strings,
+      containing a new size for the graph. Size can be provided in pixels
+      or in percentages.</td>
+  </tr>
+
+  <tr>
+    <td>setCameraPosition (pos)</td>
+    <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
+    <td>Set the rotation and position of the camera. Parameter <code>pos</code>
+      is an object which contains three parameters: <code>horizontal</code>,
+      <code>vertical</code>, and <code>distance</code>.
+      Parameter <code>horizontal</code> is a value in radians and can have any
+      value (but normally in the range of 0 and 2*Pi).
+      Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
+      Parameter <code>distance</code> is the (normalized) distance from the
+      camera to the center of the graph, in the range of 0.71 to 5.0. A
+      larger distance puts the graph further away, making it smaller.
+      All parameters are optional.
+    </td>
+  </tr>
+
+</table>
+
+<h2 id="Events">Events</h2>
+<p>
+  Graph3d fires events after the camera position has been changed.
+  The event can be catched by creating a listener.
+  Here an example on how to catch a <code>cameraPositionChange</code> event.
+</p>
+
+<pre class="prettyprint lang-js">
+function onCameraPositionChange(event) {
+  alert('The camera position changed to:\n' +
+        'Horizontal: ' + event.horizontal + '\n' +
+        'Vertical: ' + event.vertical + '\n' +
+        'Distance: ' + event.distance);
+}
+// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
+graph3d.on('cameraPositionChange', onCameraPositionChange);
+</pre>
+
+<p>
+  The following events are available.
+</p>
+
+<table>
+  <col width="10%">
+  <col width="60%">
+  <col width="30%">
+
+  <tr>
+    <th>name</th>
+    <th>Description</th>
+    <th>Properties</th>
+  </tr>
+
+  <tr>
+    <td>cameraPositionChange</td>
+    <td>The camera position changed. Fired after the user modified the camera position
+      by moving (dragging) the graph, or by zooming (scrolling),
+      but not after a call to <code>setCameraPosition</code> method.
+      The new camera position can be retrieved by calling the method
+      <code>getCameraPosition</code>.</td>
+    <td>
+      <ul>
+        <li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
+        <li><code>vertical</code>: Number. The vertical angle of the camera.</li>
+        <li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
+      </ul>
+    </td>
+  </tr>
+</table>
+
+<h2 id="Data_Policy">Data Policy</h2>
+<p>
+  All code and data are processed and rendered in the browser. No data is sent to any server.
+</p>
+
+</div>
+</body>
+</html>

www2/docs/index.html

@@ -0,0 +1,225 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vis.js | documentation</title>
+
+  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
+  <link href='css/style.css' type='text/css' rel='stylesheet'>
+
+  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
+</head>
+
+<body onload="prettyPrint();">
+<div id="container">
+
+  <h1>vis.js documentation</h1>
+
+  <p>
+    Vis.js is a dynamic, browser based visualization library.
+    The library is designed to be easy to use, handle large amounts
+    of dynamic data, and enable manipulation of the data.
+  </p>
+
+  <p>
+    The library is developed by
+    <a href="http://almende.com" target="_blank">Almende B.V.</a>.
+    Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile
+    browsers (with full touch support).
+  </p>
+
+  <h2 id="Components">Components</h2>
+
+  <p>
+    Vis.js contains of the following components:
+  </p>
+
+  <div style="text-align: center; float: right; padding-left: 30px;">
+    <a href="img/vis_overview.png" target="_blank">
+      <img src="img/vis_overview.png" style="width: 350px; "/><br>
+      (click for a larger view)
+    </a>
+  </div>
+
+  <ul>
+    <li>
+      <a href="dataset.html"><b>DataSet</b></a>.
+      A flexible key/value based data set.
+      Add, update, and remove items. Subscribe on changes in the data set.
+      A DataSet can filter and order items, and convert fields of items.
+    </li>
+    <li>
+      <a href="dataview.html"><b>DataView</b></a>.
+      A filtered and/or formatted view on a DataSet.
+    </li>
+    <li>
+      <a href="network.html"><b>Network</b></a>.
+      Display a network (force directed graph) with nodes and edges (previously called Graph).
+    </li>
+    <li>
+      <a href="graph2d.html"><b>Graph2d</b></a>.
+      Plot data on a timeline with lines or barcharts.
+    </li>
+    <li>
+      <a href="graph3d.html"><b>Graph3d</b></a>.
+      Display data in a three dimensional graph.
+    </li>
+    <li>
+      <a href="timeline.html"><b>Timeline</b></a>.
+      Display different types of data on a timeline.
+    </li>
+  </ul>
+
+  <h2 id="Install">Install</h2>
+
+  <h3>npm</h3>
+
+<pre class="prettyprint">
+npm install vis
+</pre>
+
+  <h3>bower</h3>
+
+<pre class="prettyprint">
+bower install vis
+</pre>
+
+  <h3>download</h3>
+  Download the library from the website:
+  <a href="http://visjs.org" target="_blank">http://visjs.org</a>.
+
+  <h2 id="Load">Load</h2>
+
+  <p>
+    To load vis.js, include the javascript and css files of vis in your web page:
+  </p>
+
+<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script type="text/javascript"&gt;
+  // ... load a visualization
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+  <p>
+    or load vis.js using require.js:
+  </p>
+
+<pre class="prettyprint lang-js">
+require.config({
+  paths: {
+    vis: 'path/to/vis',
+  }
+});
+
+require(['vis'], function (math) {
+  // ... load a visualization
+});
+</pre>
+
+  <p>
+    A timeline can be instantiated as follows. Other components can be
+    created in a similar way.
+  </p>
+
+<pre class="prettyprint lang-js">
+var timeline = new vis.Timeline(container, data, options);
+</pre>
+
+  <p>
+    Where <code>container</code> is an HTML element, <code>data</code> is
+    an Array with data or a DataSet, and <code>options</code> is an optional
+    object with configuration options for the component.
+  </p>
+
+  <h2 id="Use">Use</h2>
+
+  <p>
+    A basic example on using a Timeline is shown below. More examples can be
+    found in the <a href="https://github.com/almende/vis/tree/master/examples"
+                    target="_blank">examples directory</a> of the project.
+  </p>
+
+<pre class="prettyprint lang-html">
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Timeline basic demo&lt;/title&gt;
+
+  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
+
+  &lt;style type="text/css"&gt;
+    body, html {
+      font-family: sans-serif;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id="visualization"&gt;&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var data = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ]);
+
+    // Configuration for the Timeline
+  var options = {};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, data, options);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+  <h2 id="license">License</h2>
+
+  <p>
+    Copyright 2010-2014 Almende B.V.
+  </p>
+
+  <p>
+    Vis.js is dual licensed under both
+  </p>
+  <ul>
+    <li>
+      The Apache 2.0 License<br>
+      <a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
+    </li>
+  </ul>
+  <p>
+    and
+  </p>
+  <ul>
+    <li>
+      The MIT License<br>
+      <a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
+    </li>
+  </ul>
+
+  <p>
+    Vis.js may be distributed under either license.
+  </p>
+
+
+</div>
+</body>
+</html>

www2/docs/lib/prettify/lang-apollo.js

@@ -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"])

www2/docs/lib/prettify/lang-css.js

@@ -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"])

www2/docs/lib/prettify/lang-hs.js

@@ -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"])

www2/docs/lib/prettify/lang-lisp.js

@@ -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"])

www2/docs/lib/prettify/lang-lua.js

@@ -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"])

www2/docs/lib/prettify/lang-ml.js

@@ -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"])

www2/docs/lib/prettify/lang-proto.js

@@ -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"])

www2/docs/lib/prettify/lang-scala.js

@@ -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"])

www2/docs/lib/prettify/lang-sql.js

@@ -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"])

www2/docs/lib/prettify/lang-vb.js

@@ -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"])

www2/docs/lib/prettify/lang-vhdl.js

@@ -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"])

www2/docs/lib/prettify/lang-wiki.js

@@ -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"])

www2/docs/lib/prettify/lang-yaml.js

@@ -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"])

www2/docs/lib/prettify/prettify.css

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

www2/docs/lib/prettify/prettify.js

@@ -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}})()

www2/examples/graph2d/01_basic.html

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

www2/examples/graph2d/02_bars.html

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

www2/examples/graph2d/03_groups.html

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

www2/examples/graph2d/04_rightAxis.html

@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Right Axis Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #0df200;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #0df200;
+        }
+
+        .customStyle2 {
+            fill: #f23303;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #ff0004;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.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: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        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',
+        movable: false
+    };
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html>

www2/examples/graph2d/05_bothAxis.html

@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Both Axis Example</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+
+        .customStyle2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+
+        .customStyle3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+        path.customStyle3.fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+
+</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: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        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: 'customStyle3',
+        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>

www2/examples/graph2d/06_interpolation.html

@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Interpolation</title>
+    <link href="../../dist/vis.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,
+            catmullRom: {
+                parametrization: 'centripetal'
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        options: {
+            drawPoints: false,
+            catmullRom: {
+                parametrization: 'chordal'
+            }
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            drawPoints: false,
+            catmullRom: {
+                parametrization: 'uniform'
+            }
+        }
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: { style: 'circle' },
+            catmullRom: 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 = {
+        dataPoints: 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>

www2/examples/graph2d/07_scrollingAndSorting.html

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

www2/examples/graph2d/08_performance.html

@@ -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.3.1/moment.min.js"></script>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.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 = {catmullRom: {parametrization: interpolation}};
+        }
+        else if (interpolation == "centripetal") {
+            interpolation = 'chordal';
+            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+        }
+        else if (interpolation == "chordal") {
+            interpolation = 'uniform';
+            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+        }
+        else if (interpolation == "uniform") {
+            interpolation = 'linear';
+            interpolationOptions = {catmullRom: 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},
+        catmullRom: false,
+        start: startPoint,
+        end: endPoint
+    };
+
+    var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>

www2/examples/graph2d/09_external_legend.html

@@ -0,0 +1,367 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | External legend Example</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+
+        .customStyle2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+
+        .customStyle3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+
+        path.customStyle3.fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+
+         .graphGroup0 {
+            fill:#4f81bd;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #4f81bd;
+        }
+
+         .graphGroup1 {
+            fill:#f79646;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #f79646;
+        }
+
+         .graphGroup2 {
+            fill: #8c51cf;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #8c51cf;
+        }
+
+         .graphGroup3 {
+            fill: #75c841;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #75c841;
+        }
+
+         .graphGroup4 {
+            fill: #ff0100;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #ff0100;
+        }
+
+         .graphGroup5 {
+            fill: #37d8e6;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #37d8e6;
+        }
+
+         .graphGroup6 {
+            fill: #042662;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #042662;
+        }
+
+         .graphGroup7 {
+            fill:#00ff26;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #00ff26;
+        }
+
+         .graphGroup8 {
+            fill:#ff00ff;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #ff00ff;
+        }
+
+         .graphGroup9 {
+            fill: #8f3938;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #8f3938;
+        }
+
+         .fill {
+            fill-opacity:0.1;
+            stroke: none;
+        }
+
+
+         .bar {
+            fill-opacity:0.5;
+            stroke-width:1px;
+        }
+
+         .point {
+            stroke-width:2px;
+            fill-opacity:1.0;
+        }
+
+
+         .legendBackground {
+            stroke-width:1px;
+            fill-opacity:0.9;
+            fill: #ffffff;
+            stroke: #c2c2c2;
+        }
+
+
+         .outline {
+            stroke-width:1px;
+            fill-opacity:1;
+            fill: #ffffff;
+            stroke: #e5e5e5;
+        }
+
+         .iconFill {
+            fill-opacity:0.3;
+            stroke: none;
+        }
+
+        div.descriptionContainer {
+            float:left;
+            height:30px;
+            width:160px;
+            padding-left:5px;
+            padding-right:5px;
+            line-height: 30px;
+        }
+
+        div.iconContainer {
+            float:left;
+        }
+
+        div.legendElementContainer {
+            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.legendElementContainer.hidden {
+            background-color: #d3e6ff;
+        }
+
+        svg.legendIcon {
+            width:30px;
+            height:30px;
+        }
+
+        div.externalLegend {
+            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="externalLegend"></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: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        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: 'customStyle3',
+        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 = 'legendElementContainer';
+            containerDiv.id = groupsData[i].id + "_legendContainer"
+            iconDiv.className = "iconContainer";
+            descriptionDiv.className = "descriptionContainer";
+
+            // 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 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", "legendIcon");
+
+            // 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>

www2/examples/graph2d/10_barsSideBySide.html

@@ -0,0 +1,74 @@
+<!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.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',
+        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);
+
+
+    var dropdown = document.getElementById("dropdownID");
+    dropdown.onchange = update;
+
+    function update() {
+        var options = {barChart:{handleOverlap:dropdown.value}};
+        graph2d.setOptions(options);
+    }
+
+</script>
+</body>
+</html>

www2/examples/graph2d/11_barsSideBySideGroups.html

@@ -0,0 +1,87 @@
+<!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.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',
+        barChart: {width:50, align:'center', handleOverlap:'sideBySide'}, // 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 = {barChart:{handleOverlap:dropdown.value}};
+        graph2d.setOptions(options);
+    }
+
+
+</script>
+</body>
+</html>

www2/examples/graph2d/12_customRange.html

@@ -0,0 +1,96 @@
+<!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.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: {
+        customRange: {
+            left: {
+                min:-5, max:30
+            },
+            right: {
+                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', handleOverlap:"sideBySide"}, // align: left, center, right
+        drawPoints: true,
+        dataAxis: {
+            customRange: {
+                left: {
+                    min:-5, max:30
+                },
+                right: {
+                    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>

www2/examples/graph2d/13_localization.html

@@ -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.7.0/moment-with-langs.min.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.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>

www2/examples/graph2d/14_toggleGroups.html

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

www2/examples/graph2d/15_streaming_data.html

@@ -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.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: {
+      customRange: {
+        left: {
+          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, {animate: false});
+        requestAnimationFrame(renderStep);
+        break;
+
+      case 'discrete':
+        graph2d.setWindow(now - interval, now, {animate: 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>

www2/examples/graph2d/16_bothAxis_titles.html

@@ -0,0 +1,215 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Axis Titles and Styling</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+
+        .customStyle2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+
+        .customStyle3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+        path.customStyle3.fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+
+</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>
+                <tr>
+                    <td>Left decimals</td>
+                    <td><select id="decimals" onchange="styleDecimals()">
+                        <option value="0">0</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        </select>
+                    </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: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        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: 'customStyle3',
+        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,
+            title: {
+                right: {
+                    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: {title: {left: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {title: {right: 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: {title: {left: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {title: {right: title}}});
+        }
+    }
+
+    function styleDecimals() {
+        var x = document.getElementById("decimals");
+        graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
+    }
+
+</script>
+</body>
+</html>

www2/examples/graph2d/17_dynamicStyling.html

@@ -0,0 +1,256 @@
+<!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.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" selected="selected">bottom</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="opacity:0.1;">0.1</option>
+                            <option value="opacity:0.2;">0.2</option>
+                            <option value="opacity:0.3;">0.3</option>
+                            <option value="opacity:0.4;">0.4</option>
+                            <option value="opacity:0.5;">0.5</option>
+                            <option value="opacity:0.6;" selected="selected">0.6</option>
+                            <option value="opacity:0.7;">0.7</option>
+                            <option value="opacity:0.8;">0.8</option>
+                            <option value="opacity:0.9;">0.9</option>
+                            <option value="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: 'bottom' // 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>

www2/examples/graph2d/18_scatterplot.html

@@ -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.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: {
+          customRange: {
+              left: {
+                  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>

www2/examples/graph2d/default.css

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

www2/examples/graph2d/index.html

@@ -0,0 +1,31 @@
+<html>
+<head>
+  <link rel='stylesheet' href='default.css' type='text/css'>
+</head>
+<body>
+<div id="container">
+
+  <h1>Graph2d Examples</h1>
+
+  <p><a href="01_basic.html">01_basic.html</a></p>
+  <p><a href="02_bars.html">02_bars.html</a></p>
+  <p><a href="03_groups.html">03_groups.html</a></p>
+  <p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
+  <p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
+  <p><a href="06_interpolation.html">06_interpolation.html</a></p>
+  <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
+  <p><a href="08_performance.html">08_performance.html</a></p>
+  <p><a href="09_external_legend.html">09_external_legend.html</a></p>
+  <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
+  <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
+  <p><a href="12_customRange.html">12_customRange.html</a></p>
+  <p><a href="13_localization.html">13_localization.html</a></p>
+  <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
+  <p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
+  <p><a href="16_bothAxis_titles.html">16_bothAxis_titles.html</a></p>
+  <p><a href="17_dynamicStyling.html">17_dynamicStyling.html</a></p>
+  <p><a href="18_scatterplot.html">18_scatterplot.html</a></p>
+
+</div>
+</body>
+</html>

www2/examples/graph3d/default.css

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

www2/examples/graph3d/example01_basis.html

@@ -0,0 +1,60 @@
+<!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>
+    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>

www2/examples/graph3d/example02_camera.html

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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>

www2/examples/graph3d/example03_filter.html

@@ -0,0 +1,63 @@
+<!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>
+    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>

www2/examples/graph3d/example04_animate.html

@@ -0,0 +1,70 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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,
+        filterValue: 'time'
+      };
+
+      // 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>

www2/examples/graph3d/example05_line.html

@@ -0,0 +1,59 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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>

www2/examples/graph3d/example06_moving_dots.html

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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>

www2/examples/graph3d/example07_dot_cloud_colors.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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;
+
+
+    // 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));
+
+        data.add({x:x,y:y,z:z,style:dist});
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-color',
+        showPerspective: true,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0,
+        legendLabel: 'distance',
+        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>

www2/examples/graph3d/example08_dot_cloud_size.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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
+        }
+      };
+
+      // 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>

www2/examples/graph3d/example09_mobile.html

@@ -0,0 +1,78 @@
+<!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>

www2/examples/graph3d/example10_styles.html

@@ -0,0 +1,120 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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>

www2/examples/graph3d/example11_tooltips.html

@@ -0,0 +1,103 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D tooltips</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 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>';
+        },
+
+        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>

www2/examples/graph3d/example12_ticks.html

@@ -0,0 +1,115 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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>

www2/examples/graph3d/index.html

@@ -0,0 +1,28 @@
+<html>
+<head>
+  <link rel='stylesheet' href='default.css' type='text/css'>
+</head>
+<body>
+<div id="container">
+
+  <h1>Examples</h1>
+
+  <p><a href="example01_basis.html">example01_basis.html</a></p>
+  <p><a href="example02_camera.html">example02_camera.html</a></p>
+  <p><a href="example03_filter.html">example03_filter.html</a></p>
+  <p><a href="example04_animate.html">example04_animate.html</a></p>
+  <p><a href="example05_line.html">example05_line.html</a></p>
+  <p><a href="example06_moving_dots.html">example06_moving_dots.html</a></p>
+  <p><a href="example07_dot_cloud_colors.html">example07_dot_cloud_colors.html</a></p>
+  <p><a href="example08_dot_cloud_size.html">example08_dot_cloud_size.html</a></p>
+  <p><a href="example09_mobile.html">example09_mobile.html</a></p>
+  <p><a href="example10_styles.html">example10_styles.html</a></p>
+  <p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
+  <p><a href="example12_ticks.html">example12_ticks.html</a></p>
+
+  <h1>Playground</h1>
+  <p><a href="playground">Open the playground</a></p>
+
+</div>
+</body>
+</html>

www2/examples/graph3d/playground/csv2array.js

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

www2/examples/graph3d/playground/csv2datatable.html

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

www2/examples/graph3d/playground/datasource.html

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

www2/examples/graph3d/playground/datasource.php

@@ -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;
+}
+
+
+?>

www2/examples/graph3d/playground/index.html

@@ -0,0 +1,179 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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>showPerspective</td>
+                <td><input type="checkbox" id="showPerspective" 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>