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

added smooth scroll, changed styling updated examples etc

gh-pages
Alex de Mulder 10 years ago
parent
c9fc0b7a93
commit
c55d824e89
8 changed files with 342 additions and 135 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -11
      blog.html
  2. +64
    -19
      graph2d_examples.html
  3. +58
    -14
      graph3d_examples.html
  4. BIN
      images/gettingstartedSlide.png
  5. +46
    -22
      index.html
  6. +2
    -0
      js/smooth-scroll.min.js
  7. +83
    -37
      network_examples.html
  8. +77
    -32
      timeline_examples.html

+ 12
- 11
blog.html View File

@ -17,6 +17,12 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="./js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<style>
html {
@ -150,9 +156,9 @@
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#about">Modules</a></li>
<li><a href="./index.html#modules">Modules</a></li>
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="#">Blog</a></li>
<li class="active"><a href="#">Blog</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./index.html#showcase">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
@ -182,10 +188,10 @@
<div class="postsMenu">
<div class="postsMenuContent">
Posts:
<a class="post" href="#The 2015 roadmap for vis.js">- The 2015 roadmap for vis.js</a>
<a class="post" href="#A look back on vis.js">- A look back on vis.js</a>
<a class="post" href="#New website for vis.js!">- New website for vis.js!</a>
<a class="post" href="#Released version 3.8.0">- Released version 3.8.0</a>
<a data-scroll class="post" href="#The 2015 roadmap for vis.js">- The 2015 roadmap for vis.js</a>
<a data-scroll class="post" href="#A look back on vis.js">- A look back on vis.js</a>
<a data-scroll class="post" href="#New website for vis.js!">- New website for vis.js!</a>
<a data-scroll class="post" href="#Released version 3.8.0">- Released version 3.8.0</a>
</div>
</div>
@ -245,11 +251,6 @@
</p><p>
On the 16th of April 2014, exactly a year after the initial commit, <a href="https://twitter.com/hackernewsbot/status/456231005678874624" target="_blank">a twitterbot with a lot of followers</a> notified
the world that we were featured on hackernews! This was the boost we needed to really reach a large community. We saw the amount of visitors and Github stars increase greatly over the months that followed.
<br />
<br />
<i><b>TODO: insert graph2d with visitors?</b></i>
<br />
<br />
</p><p>
The 14th of October, we have altered the license of vis.js to MIT or APACHE 2.0. This allowed <a href="http://tiddlywiki.com/" target="_blank">Tiddlywiki</a> to add vis.js to their keychain. From what we hear,
their developers really enjoy working with vis and we look forward to hearing how their community uses our software!

+ 64
- 19
graph2d_examples.html View File

@ -24,9 +24,21 @@
<style>
body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
}
div.contentWrapper {
padding:10px;
}
div.container {
max-width:970px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
}
pre {
width:450px;
@ -101,6 +113,39 @@
</head>
<body onload="prettyPrint(); loadVis();">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html#modules">Modules</a></li>
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./index.html#showcase">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
<li><a href="./index.html#featureRequests">Feature requests</a></li>
<li><a href="./index.html#licenses">License</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="contentWrapper">
<h1>Graph2d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a>
<div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
@ -131,103 +176,103 @@
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/01_basic.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/1.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/1.png">
<div class="exampleTitle">basic</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/02_bars.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/2.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/2.png">
<div class="exampleTitle">bars</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/03_groups.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/3.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/3.png">
<div class="exampleTitle">groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/04_rightAxis.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/4.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/4.png">
<div class="exampleTitle">right axis</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/05_bothAxis.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/5.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/5.png">
<div class="exampleTitle">both axis</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/06_interpolation.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/6.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/6.png">
<div class="exampleTitle">interpolation</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/07_scrollingAndSorting.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/7.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/7.png">
<div class="exampleTitle">scrolling and sorting</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/08_performance.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/8.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/8.png">
<div class="exampleTitle">performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/09_external_legend.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/9.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/9.png">
<div class="exampleTitle">external legend</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/10_barsSideBySide.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/10.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/10.png">
<div class="exampleTitle">bars side by side</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/11_barsSideBySideGroups.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/11.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/11.png">
<div class="exampleTitle">bars side by side groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/12_customRange.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/12.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/12.png">
<div class="exampleTitle">custom range</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/13_localization.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/13.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/13.png">
<div class="exampleTitle">localization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/14_toggleGroups.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/14.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/14.png">
<div class="exampleTitle">toggle groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/15_streaming_data.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/15.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/15.png">
<div class="exampleTitle">streaming data</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/16_bothAxis_titles.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/16.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/16.png">
<div class="exampleTitle">axis titles</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/17_dynamicStyling.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph2d/17.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph2d/17.png">
<div class="exampleTitle">dynamic styling</div>
</a>
</div>
@ -236,7 +281,7 @@
<br />
<br />
<br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

+ 58
- 14
graph3d_examples.html View File

@ -24,8 +24,19 @@
<style>
body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
}
div.contentWrapper {
padding:10px;
}
div.container {
max-width:970px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
}
pre {
@ -112,6 +123,39 @@
</head>
<body onload="prettyPrint(); loadVis();">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html#modules">Modules</a></li>
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./index.html#showcase">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
<li><a href="./index.html#featureRequests">Feature requests</a></li>
<li><a href="./index.html#licenses">License</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="contentWrapper">
<h1>Graph3d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/graph3d.html" role="button">View docs »</a>
<div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
@ -155,73 +199,73 @@
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example01_basis.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/1.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/1.png">
<div class="exampleTitle">basis</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example02_camera.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/2.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/2.png">
<div class="exampleTitle">camera</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example03_filter.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/3.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/3.png">
<div class="exampleTitle">filter</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example04_animate.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/4.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/4.png">
<div class="exampleTitle">animate</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example05_line.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/5.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/5.png">
<div class="exampleTitle">line</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example06_moving_dots.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/6.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/6.png">
<div class="exampleTitle">moving dots</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example07_dot_cloud_colors.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/7.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/7.png">
<div class="exampleTitle">dot cloud colors</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example08_dot_cloud_size.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/8.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/8.png">
<div class="exampleTitle">dot cloud size</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example09_mobile.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/9.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/9.png">
<div class="exampleTitle">mobile</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example10_styles.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/10.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/10.png">
<div class="exampleTitle">styles</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example11_tooltips.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/11.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/11.png">
<div class="exampleTitle">tooltips</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/playground/index.html">
<img class="img-responsive" src="./images/exampleScreenshots/graph3d/playground.png">
<img class="example img-responsive" src="./images/exampleScreenshots/graph3d/playground.png">
<div class="exampleTitle">playground</div>
</a>
</div>
@ -230,7 +274,7 @@
<br />
<br />
<br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

BIN
images/gettingstartedSlide.png View File

Before After
Width: 500  |  Height: 500  |  Size: 62 KiB Width: 500  |  Height: 500  |  Size: 44 KiB

+ 46
- 22
index.html View File

@ -17,11 +17,19 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="./js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<style>
body {
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
font-size:16px;
}
a.btn {
width:130px;
}
a.header{
color:#8bb9fb;
}
@ -31,9 +39,18 @@
top:-2px;
}
img.featurette-image {
border-radius:4px;
}
img.header {
margin-bottom:10px;
}
div.wall {
background-image: url("./images/wall.png");
background-repeat: no-repeat;
margin-top:5px;
}
div.trans {
@ -63,6 +80,7 @@
div.valign_child {
margin:auto 0px;
}
</style>
</head>
<!-- NAVBAR
@ -83,14 +101,14 @@
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#about">Modules</a></li>
<li class="active"><a href="#modules">Modules</a></li>
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="#download_install">Download</a></li>
<li><a href="#showcase">Showcase</a></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#featureRequests">Feature requests</a></li>
<li><a href="#licenses">License</a></li>
<li><a data-scroll href="#download_install">Download</a></li>
<li><a data-scroll href="#showcase">Showcase</a></li>
<li><a data-scroll href="#contribute">Contribute</a></li>
<li><a data-scroll href="#featureRequests">Feature requests</a></li>
<li><a data-scroll href="#licenses">License</a></li>
</ul>
</div>
</div>
@ -103,7 +121,7 @@
<!-- Carousel
================================================== -->
<div class="jumbotron wall">
<div class="jumbotron wall hidden-xs">
<div class="jumbotron trans">
<div class="container jumbo">
<h1>vis.js</h1>
@ -121,6 +139,15 @@
<!--</div>-->
</div>
<img src="./images/wall_small.png" class="header img-responsive visible-xs">
<div class="container visible-xs">
<p>A dynamic, browser based visualization library.
The library is designed to be easy to use, to handle large amounts
of dynamic data, and to enable manipulation of and interaction with the data.
The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. <a href="#download_install" class="header">Get it over here!</a></p>
<br /><hr class="featurette-divider"><br />
</div>
<!-- Marketing messaging and featurettes
================================================== -->
@ -133,34 +160,31 @@
<div class="col-md-3">
<a href="./network_examples.html"><img class="img-thumbnail" src="./images/network.png"alt="network examples" style="width: 240px; height: 140px;"></a>
<h2>Network</h2>
<p class="text-justify">Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more.
To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p>
<p>Display dynamic, automatically organised, customizable network views.</p>
<p><a class="btn btn-default" href="./network_examples.html" role="button">View examples »</a></p>
<p><a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 -->
<hr class="featurette-divider visible-xs">
<div class="col-md-3">
<a href="./timeline_examples.html"><img class="img-thumbnail" src="./images/timeline.png" alt="timeline examples" style="width: 240px; height: 140px;"></a>
<h2>Timeline</h2>
<p class="text-justify">The Timeline is an interactive chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range).
Timeline uses regular HTML DOM to render the timeline and items put on the timeline. This allows for flexible customization using css styling.</p>
<p>Create a fully customizable, interactive timeline with items and ranges.</p>
<p><a class="btn btn-default" href="./timeline_examples.html" role="button">View examples »</a></p>
<p><a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 -->
<hr class="featurette-divider visible-xs">
<div class="col-md-3">
<a href="./graph2d_examples.html"><img class="img-thumbnail" src="./images/graph2d.png" alt="graph2d examples" style="width: 240px; height: 140px;"></a>
<h2>Graph2d</h2>
<p class="text-justify">Graph2d is an interactive visualization chart to draw data in a 2D graph. It can plot lines, point and bars. You can freely move and zoom in the graph by dragging and scrolling in the window.
<br />
Graph2d uses HTML DOM and SVG for rendering. This allows for flexible customization using css styling.</p>
<p>Draw graphs and bar charts on an interactive timeline and personalize it any way you want.</p>
<p><a class="btn btn-default" href="./graph2d_examples.html" role="button">View examples »</a></p>
<p><a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 -->
<hr class="featurette-divider visible-xs">
<div class="col-md-3">
<a href="./graph3d_examples.html"><img class="img-thumbnail" src="./images/graph3d.png" alt="graph3d examples" style="width: 240px; height: 140px;"></a>
<h2>Graph3d</h2>
<p class="text-justify">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.
Graph3d uses HTML canvas to render graphs, and can render up to a few thousands of data points smoothly.</p>
<p>Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.</p>
<p><a class="btn btn-default" href="./graph3d_examples.html" role="button">View examples »</a></p>
<p><a class="btn btn-primary" href="./docs/graph3d.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 -->
@ -173,7 +197,7 @@
<div class="row featurette" id="download_install">
<div class="col-md-5">
<img class="featurette-image img-responsive hidden-xs hidden-sm img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/gettingstartedSlide.png" data-holder-rendered="true">
<img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/gettingstartedSlide.png" data-holder-rendered="true">
</div>
<div class="col-md-7">
<div class="valign_parent">
@ -210,7 +234,7 @@
</div>
</div>
<div class="col-md-5">
<a href="showcases.html"><img class="featurette-image img-responsive hidden-xs hidden-sm img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/showcase.png" data-holder-rendered="true"></a>
<a href="showcases.html"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/showcase.png" data-holder-rendered="true"></a>
</div>
</div>
@ -218,7 +242,7 @@
<div class="row featurette" id="contribute">
<div class="col-md-5">
<a href="https://github.com/almende/vis/" target="_blank"><img class="featurette-image img-responsive hidden-xs hidden-sm img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/octocat.png" data-holder-rendered="true"></a>
<a href="https://github.com/almende/vis/" target="_blank"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/octocat.png" data-holder-rendered="true"></a>
</div>
<div class="col-md-7">
<div class="valign_parent">
@ -261,7 +285,7 @@
</div>
</div>
<div class="col-md-5">
<a href="./featureRequests.html"><img class="featurette-image img-responsive hidden-xs hidden-sm img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/feature_requests.png" data-holder-rendered="true"></a>
<a href="./featureRequests.html"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/feature_requests.png" data-holder-rendered="true"></a>
</div>
</div>
@ -269,7 +293,7 @@
<div class="row featurette" id="licenses">
<div class="col-md-5">
<img class="featurette-image img-responsive hidden-xs hidden-sm img-thumbnail" data-src="holder.js/500x500/auto" alt="500x500" src="./images/license.png" data-holder-rendered="true">
<img class="featurette-image img-responsive hidden-xs hidden-sm" data-src="holder.js/500x500/auto" alt="500x500" src="./images/license.png" data-holder-rendered="true">
</div>
<div class="col-md-7">
<div class="valign_parent">

+ 2
- 0
js/smooth-scroll.min.js View File

@ -0,0 +1,2 @@
/** smooth-scroll v5.3.3, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
!function(e,t){"function"==typeof define&&define.amd?define("smoothScroll",t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)}(window||this,function(e){"use strict";var t,n,o,r={},a=!!document.querySelector&&!!e.addEventListener,c={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},u=function(e,t,n){if("[object Object]"===Object.prototype.toString.call(e))for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.call(n,e[o],o,e);else for(var r=0,a=e.length;a>r;r++)t.call(n,e[r],r,e)},i=function(e,t){var n={};return u(e,function(t,o){n[o]=e[o]}),u(t,function(e,o){n[o]=t[o]}),n},l=function(e,t){for(var n=t.charAt(0);e&&e!==document;e=e.parentNode)if("."===n){if(e.classList.contains(t.substr(1)))return e}else if("#"===n){if(e.id===t.substr(1))return e}else if("["===n&&e.hasAttribute(t.substr(1,t.length-2)))return e;return!1},s=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},f=function(e){for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(t=n.charCodeAt(r),0===t)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=t>=1&&31>=t||127==t||0===r&&t>=48&&57>=t||1===r&&t>=48&&57>=t&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&57>=t||t>=65&&90>=t||t>=97&&122>=t?n.charAt(r):"\\"+n.charAt(r)}return a},d=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=.5>t?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=.5>t?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},h=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=o-t-n,o>=0?o:0},m=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},p=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},v=function(t,n){history.pushState&&(n||"true"===n)&&history.pushState(null,null,[e.location.protocol,"//",e.location.host,e.location.pathname,e.location.search,t].join(""))};r.animateScroll=function(t,n,r){var a=i(a||c,r||{}),u=p(t?t.getAttribute("data-options"):null);a=i(a,u),n="#"+f(n.substr(1));var l="#"===n?document.documentElement:document.querySelector(n),g=e.pageYOffset;o||(o=document.querySelector("[data-scroll-header]"));var b,O,y,S=null===o?0:s(o)+o.offsetTop,I=h(l,S,parseInt(a.offset,10)),H=I-g,E=m(),A=0;v(n,a.updateURL);var L=function(o,r,c){var u=e.pageYOffset;(o==r||u==r||e.innerHeight+u>=E)&&(clearInterval(c),l.focus(),a.callbackAfter(t,n))},Q=function(){A+=16,O=A/parseInt(a.speed,10),O=O>1?1:O,y=g+H*d(a.easing,O),e.scrollTo(0,Math.floor(y)),L(y,I,b)},C=function(){a.callbackBefore(t,n),b=setInterval(Q,16)};0===e.pageYOffset&&e.scrollTo(0,0),C()};var g=function(e){var n=l(e.target,"[data-scroll]");n&&"a"===n.tagName.toLowerCase()&&(e.preventDefault(),r.animateScroll(n,n.hash,t))},b=function(){n||(n=setTimeout(function(){n=null,headerHeight=null===o?0:s(o)+o.offsetTop},66))};return r.destroy=function(){t&&(document.removeEventListener("click",g,!1),e.removeEventListener("resize",b,!1),t=null,n=null,o=null)},r.init=function(n){a&&(r.destroy(),t=i(c,n||{}),o=document.querySelector("[data-scroll-header]"),document.addEventListener("click",g,!1),o&&e.addEventListener("resize",b,!1))},r});

+ 83
- 37
network_examples.html View File

@ -7,7 +7,7 @@
<title>Network Examples</title>
<link rel="icon" HREF="favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -23,8 +23,19 @@
<style>
body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
}
div.contentWrapper {
padding:10px;
}
div.container {
max-width:970px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
}
pre {
@ -51,7 +62,7 @@
width:800px;
}
img {
img.example {
border:1px solid #dddddd;
width:250px;
height:250px;
@ -104,6 +115,40 @@
</head>
<body onload="prettyPrint(); loadVis();">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html#modules">Modules</a></li>
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./index.html#showcase">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
<li><a href="./index.html#featureRequests">Feature requests</a></li>
<li><a href="./index.html#licenses">License</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="contentWrapper">
<h1>Network Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>
<div class="textHTMLContent">This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it. (click it to start interacting with it).</div>
@ -142,205 +187,205 @@
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/01_basic_usage.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/1.png" >
<img class="example img-responsive" src="./images/exampleScreenshots/network/1.png" >
<div class="exampleTitle">basic usage</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/02_random_nodes.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/2.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/2.png">
<div class="exampleTitle">random nodes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/03_images.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/3.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/3.png">
<div class="exampleTitle">images</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/04_shapes.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/4.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/4.png">
<div class="exampleTitle">shapes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/05_social_network.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/5.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/5.png">
<div class="exampleTitle">social network</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/06_groups.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/6.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/6.png">
<div class="exampleTitle">groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/07_selections.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/7.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/7.png">
<div class="exampleTitle">selections</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/08_mobile_friendly.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/8.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/8.png">
<div class="exampleTitle">mobile friendly</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/09_sizing.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/9.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/9.png">
<div class="exampleTitle">sizing</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/10_multiline_text.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/10.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/10.png">
<div class="exampleTitle">multiline text</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/11_custom_style.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/11.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/11.png">
<div class="exampleTitle">custom style</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/12_scalable_images.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/12.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/12.png">
<div class="exampleTitle">scalable images</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/13_dashed_lines.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/13.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/13.png">
<div class="exampleTitle">dashed lines</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/14_dot_language.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/14.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/14.png">
<div class="exampleTitle">dot language</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/15_dot_language_playground.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/15.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/15.png">
<div class="exampleTitle">playground</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/16_dynamic_data.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/16.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/16.png">
<div class="exampleTitle">dynamic data</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/17_network_info.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/17.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/17.png">
<div class="exampleTitle">network info</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/18_fully_random_nodes_clustering.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/18.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/18.png">
<div class="exampleTitle">fully random nodes clustering</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/19_scale_free_graph_clustering.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/19.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/19.png">
<div class="exampleTitle">scale free graph clustering</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/20_navigation.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/20.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/20.png">
<div class="exampleTitle">navigation</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/21_data_manipulation.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/21.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/21.png">
<div class="exampleTitle">data manipulation</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/22_les_miserables.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/22.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/22.png">
<div class="exampleTitle">les miserables</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/23_hierarchical_layout.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/23.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/23.png">
<div class="exampleTitle">hierarchical layout</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/24_hierarchical_layout_userdefined.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/24.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/24.png">
<div class="exampleTitle">hierarchical layout userdefined</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/25_physics_configuration.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/25.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/25.png">
<div class="exampleTitle">physics configuration</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/26_staticSmoothCurves.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/26.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/26.png">
<div class="exampleTitle">static smooth curves</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/27_world_cup_network.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/27.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/27.png">
<div class="exampleTitle">world cup network</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/28_world_cup_network_performance.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/28.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/28.png">
<div class="exampleTitle">world cup network performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/29_neighbourhood_highlight.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/29.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/29.png">
<div class="exampleTitle">neighborhood highlight</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/30_importing_from_gephi.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/30.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/30.png">
<div class="exampleTitle">importing from gephi</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/31_localization.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/31.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/31.png">
<div class="exampleTitle">localization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/32_hierarchicaLayoutMethods.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/32.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/32.png">
<div class="exampleTitle">hierarchical layout methods</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/33_animation.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/33.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/33.png">
<div class="exampleTitle">animation</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/graphviz/graphviz_exampleScreenshots.html">
<img class="img-responsive" src="./images/exampleScreenshots/network/graphviz.png">
<img class="example img-responsive" src="./images/exampleScreenshots/network/graphviz.png">
<div class="exampleTitle">graphviz exampleScreenshots</div>
</a>
</div>
@ -350,6 +395,7 @@
<br />
<br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

+ 77
- 32
timeline_examples.html View File

@ -26,9 +26,21 @@
<style>
body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
background: url('./images/crossword.png') /* Background pattern from subtlepatterns.com */
}
div.contentWrapper {
padding:10px;
}
div.container {
max-width:970px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
}
pre {
width:450px;
@ -99,6 +111,39 @@
</head>
<body onload="prettyPrint(); loadVis();">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html#modules">Modules</a></li>
<li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./index.html#showcase">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
<li><a href="./index.html#featureRequests">Feature requests</a></li>
<li><a href="./index.html#licenses">License</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="contentWrapper">
<h1>Timeline Examples</h1>
<a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a>
@ -136,181 +181,181 @@
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/01_basic.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/1.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/1.png">
<div class="exampleTitle">basic usage</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/02_interactive.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/2.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/2.png">
<div class="exampleTitle">interactive</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/03_performance.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/3.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/3.png">
<div class="exampleTitle">performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/04_html_data.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/4.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/4.png">
<div class="exampleTitle">html data</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/05_groups.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/5.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/5.png">
<div class="exampleTitle">groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/06_event_listeners.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/6.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/6.png">
<div class="exampleTitle">event listeners</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/07_custom_time_bar.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/7.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/7.png">
<div class="exampleTitle">custom time bar</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/08_edit_items.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/8.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/8.png">
<div class="exampleTitle">edit items</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/09_order_groups.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/9.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/9.png">
<div class="exampleTitle">order groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/10_limit_move_and_zoom.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/10.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/10.png">
<div class="exampleTitle">limit move and zoom</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/11_points.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/11.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/11.png">
<div class="exampleTitle">points</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/12_custom_styling.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/12.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/12.png">
<div class="exampleTitle">custom styling</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/13_past_and_future.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/13.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/13.png">
<div class="exampleTitle">past and future</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/14_group_performance.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/14.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/14.png">
<div class="exampleTitle">group performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/15_item_class_names.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/15.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/15.png">
<div class="exampleTitle">item class names</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/16_navigation_menu.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/16.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/16.png">
<div class="exampleTitle">navigation menu</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/17_data_serialization.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/17.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/17.png">
<div class="exampleTitle">data serialization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/18_range_overflow.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/18.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/18.png">
<div class="exampleTitle">range overflow</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/19_localization.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/19.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/19.png">
<div class="exampleTitle">localization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/20_click_to_use.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/20.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/20.png">
<div class="exampleTitle">click to use</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/21_set_selection.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/21.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/21.png">
<div class="exampleTitle">set selection</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/22_window_adjustment.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/22.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/22.png">
<div class="exampleTitle">window adjustment</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/23_data_attributes.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/23.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/23.png">
<div class="exampleTitle">data attributes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/24_all_data_attributes.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/24.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/24.png">
<div class="exampleTitle">all data attributes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/25_background_areas.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/25.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/25.png">
<div class="exampleTitle">background areas</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/26_external_data.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/26.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/26.png">
<div class="exampleTitle">external data</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/27_templates.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/27.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/27.png">
<div class="exampleTitle">templates</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/29_hiding_times.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/28.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/28.png">
<div class="exampleTitle">hiding times</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/30_subgroups.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/29.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/29.png">
<div class="exampleTitle">subgroups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/31_background_areas_with_groups.html">
<img class="img-responsive" src="./images/exampleScreenshots/timeline/30.png">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/30.png">
<div class="exampleTitle">background areas with groups</div>
</a>
</div>
@ -319,7 +364,7 @@
<br />
<br />
<br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

Write Preview
Loading…
Cancel
Save