Browse Source

added smooth scroll, changed styling updated examples etc

gh-pages
Alex de Mulder 10 years ago
parent
commit
c55d824e89
8 changed files with 342 additions and 135 deletions
  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> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<script src="./js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<style> <style>
html { html {
@ -150,9 +156,9 @@
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <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="./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#download_install">Download</a></li>
<li><a href="./index.html#showcase">Showcase</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#contribute">Contribute</a></li>
@ -182,10 +188,10 @@
<div class="postsMenu"> <div class="postsMenu">
<div class="postsMenuContent"> <div class="postsMenuContent">
Posts: 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>
</div> </div>
@ -245,11 +251,6 @@
</p><p> </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 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. 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> </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, 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! 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> <style>
body { body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; 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 { pre {
width:450px; width:450px;
@ -101,6 +113,39 @@
</head> </head>
<body onload="prettyPrint(); loadVis();"> <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> <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> <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="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/01_basic.html"> <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> <div class="exampleTitle">basic</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/02_bars.html"> <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> <div class="exampleTitle">bars</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/03_groups.html"> <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> <div class="exampleTitle">groups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/04_rightAxis.html"> <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> <div class="exampleTitle">right axis</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/05_bothAxis.html"> <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> <div class="exampleTitle">both axis</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/06_interpolation.html"> <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> <div class="exampleTitle">interpolation</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/07_scrollingAndSorting.html"> <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> <div class="exampleTitle">scrolling and sorting</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/08_performance.html"> <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> <div class="exampleTitle">performance</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/09_external_legend.html"> <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> <div class="exampleTitle">external legend</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/10_barsSideBySide.html"> <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> <div class="exampleTitle">bars side by side</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/11_barsSideBySideGroups.html"> <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> <div class="exampleTitle">bars side by side groups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/12_customRange.html"> <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> <div class="exampleTitle">custom range</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/13_localization.html"> <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> <div class="exampleTitle">localization</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/14_toggleGroups.html"> <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> <div class="exampleTitle">toggle groups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/15_streaming_data.html"> <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> <div class="exampleTitle">streaming data</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/16_bothAxis_titles.html"> <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> <div class="exampleTitle">axis titles</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph2d/17_dynamicStyling.html"> <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> <div class="exampleTitle">dynamic styling</div>
</a> </a>
</div> </div>
@ -236,7 +281,7 @@
<br /> <br />
<br /> <br />
<br /> <br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 --> <!-- Include all compiled plugins (below), or include individual files as needed -->

+ 58
- 14
graph3d_examples.html View File

@ -24,8 +24,19 @@
<style> <style>
body { body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; 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 { pre {
@ -112,6 +123,39 @@
</head> </head>
<body onload="prettyPrint(); loadVis();"> <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> <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> <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="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example01_basis.html"> <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> <div class="exampleTitle">basis</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example02_camera.html"> <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> <div class="exampleTitle">camera</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example03_filter.html"> <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> <div class="exampleTitle">filter</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example04_animate.html"> <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> <div class="exampleTitle">animate</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example05_line.html"> <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> <div class="exampleTitle">line</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example06_moving_dots.html"> <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> <div class="exampleTitle">moving dots</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example07_dot_cloud_colors.html"> <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> <div class="exampleTitle">dot cloud colors</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example08_dot_cloud_size.html"> <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> <div class="exampleTitle">dot cloud size</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example09_mobile.html"> <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> <div class="exampleTitle">mobile</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example10_styles.html"> <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> <div class="exampleTitle">styles</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/example11_tooltips.html"> <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> <div class="exampleTitle">tooltips</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/graph3d/playground/index.html"> <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> <div class="exampleTitle">playground</div>
</a> </a>
</div> </div>
@ -230,7 +274,7 @@
<br /> <br />
<br /> <br />
<br /> <br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 --> <!-- 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> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<script src="./js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<style> <style>
body { body {
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
font-size:16px;
} }
a.btn {
width:130px;
}
a.header{ a.header{
color:#8bb9fb; color:#8bb9fb;
} }
@ -31,9 +39,18 @@
top:-2px; top:-2px;
} }
img.featurette-image {
border-radius:4px;
}
img.header {
margin-bottom:10px;
}
div.wall { div.wall {
background-image: url("./images/wall.png"); background-image: url("./images/wall.png");
background-repeat: no-repeat; background-repeat: no-repeat;
margin-top:5px;
} }
div.trans { div.trans {
@ -63,6 +80,7 @@
div.valign_child { div.valign_child {
margin:auto 0px; margin:auto 0px;
} }
</style> </style>
</head> </head>
<!-- NAVBAR <!-- NAVBAR
@ -83,14 +101,14 @@
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <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="./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="./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> </ul>
</div> </div>
</div> </div>
@ -103,7 +121,7 @@
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
<div class="jumbotron wall">
<div class="jumbotron wall hidden-xs">
<div class="jumbotron trans"> <div class="jumbotron trans">
<div class="container jumbo"> <div class="container jumbo">
<h1>vis.js</h1> <h1>vis.js</h1>
@ -121,6 +139,15 @@
<!--</div>--> <!--</div>-->
</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 <!-- Marketing messaging and featurettes
================================================== --> ================================================== -->
@ -133,34 +160,31 @@
<div class="col-md-3"> <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> <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> <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-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> <p><a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<hr class="featurette-divider visible-xs">
<div class="col-md-3"> <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> <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> <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-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> <p><a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<hr class="featurette-divider visible-xs">
<div class="col-md-3"> <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> <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> <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-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> <p><a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<hr class="featurette-divider visible-xs">
<div class="col-md-3"> <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> <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> <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-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> <p><a class="btn btn-primary" href="./docs/graph3d.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
@ -173,7 +197,7 @@
<div class="row featurette" id="download_install"> <div class="row featurette" id="download_install">
<div class="col-md-5"> <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>
<div class="col-md-7"> <div class="col-md-7">
<div class="valign_parent"> <div class="valign_parent">
@ -210,7 +234,7 @@
</div> </div>
</div> </div>
<div class="col-md-5"> <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>
</div> </div>
@ -218,7 +242,7 @@
<div class="row featurette" id="contribute"> <div class="row featurette" id="contribute">
<div class="col-md-5"> <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>
<div class="col-md-7"> <div class="col-md-7">
<div class="valign_parent"> <div class="valign_parent">
@ -261,7 +285,7 @@
</div> </div>
</div> </div>
<div class="col-md-5"> <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>
</div> </div>
@ -269,7 +293,7 @@
<div class="row featurette" id="licenses"> <div class="row featurette" id="licenses">
<div class="col-md-5"> <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>
<div class="col-md-7"> <div class="col-md-7">
<div class="valign_parent"> <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> <title>Network Examples</title>
<link rel="icon" HREF="favicon.ico"> <link rel="icon" HREF="favicon.ico">
<!-- Bootstrap --> <!-- 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 --> <!-- 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:// --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -23,8 +23,19 @@
<style> <style>
body { body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; 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 { pre {
@ -51,7 +62,7 @@
width:800px; width:800px;
} }
img {
img.example {
border:1px solid #dddddd; border:1px solid #dddddd;
width:250px; width:250px;
height:250px; height:250px;
@ -104,6 +115,40 @@
</head> </head>
<body onload="prettyPrint(); loadVis();"> <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> <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> <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="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/01_basic_usage.html"> <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> <div class="exampleTitle">basic usage</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/02_random_nodes.html"> <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> <div class="exampleTitle">random nodes</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/03_images.html"> <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> <div class="exampleTitle">images</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/04_shapes.html"> <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> <div class="exampleTitle">shapes</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/05_social_network.html"> <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> <div class="exampleTitle">social network</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/06_groups.html"> <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> <div class="exampleTitle">groups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/07_selections.html"> <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> <div class="exampleTitle">selections</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/08_mobile_friendly.html"> <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> <div class="exampleTitle">mobile friendly</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/09_sizing.html"> <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> <div class="exampleTitle">sizing</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/10_multiline_text.html"> <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> <div class="exampleTitle">multiline text</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/11_custom_style.html"> <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> <div class="exampleTitle">custom style</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/12_scalable_images.html"> <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> <div class="exampleTitle">scalable images</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/13_dashed_lines.html"> <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> <div class="exampleTitle">dashed lines</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/14_dot_language.html"> <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> <div class="exampleTitle">dot language</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/15_dot_language_playground.html"> <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> <div class="exampleTitle">playground</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/16_dynamic_data.html"> <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> <div class="exampleTitle">dynamic data</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/17_network_info.html"> <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> <div class="exampleTitle">network info</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/18_fully_random_nodes_clustering.html"> <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> <div class="exampleTitle">fully random nodes clustering</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/19_scale_free_graph_clustering.html"> <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> <div class="exampleTitle">scale free graph clustering</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/20_navigation.html"> <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> <div class="exampleTitle">navigation</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/21_data_manipulation.html"> <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> <div class="exampleTitle">data manipulation</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/22_les_miserables.html"> <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> <div class="exampleTitle">les miserables</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/23_hierarchical_layout.html"> <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> <div class="exampleTitle">hierarchical layout</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/24_hierarchical_layout_userdefined.html"> <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> <div class="exampleTitle">hierarchical layout userdefined</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/25_physics_configuration.html"> <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> <div class="exampleTitle">physics configuration</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/26_staticSmoothCurves.html"> <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> <div class="exampleTitle">static smooth curves</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/27_world_cup_network.html"> <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> <div class="exampleTitle">world cup network</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/28_world_cup_network_performance.html"> <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> <div class="exampleTitle">world cup network performance</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/29_neighbourhood_highlight.html"> <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> <div class="exampleTitle">neighborhood highlight</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/30_importing_from_gephi.html"> <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> <div class="exampleTitle">importing from gephi</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/31_localization.html"> <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> <div class="exampleTitle">localization</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/32_hierarchicaLayoutMethods.html"> <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> <div class="exampleTitle">hierarchical layout methods</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/33_animation.html"> <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> <div class="exampleTitle">animation</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/network/graphviz/graphviz_exampleScreenshots.html"> <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> <div class="exampleTitle">graphviz exampleScreenshots</div>
</a> </a>
</div> </div>
@ -350,6 +395,7 @@
<br /> <br />
<br /> <br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 --> <!-- Include all compiled plugins (below), or include individual files as needed -->

+ 77
- 32
timeline_examples.html View File

@ -26,9 +26,21 @@
<style> <style>
body { body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; 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 { pre {
width:450px; width:450px;
@ -99,6 +111,39 @@
</head> </head>
<body onload="prettyPrint(); loadVis();"> <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> <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> <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="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/01_basic.html"> <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> <div class="exampleTitle">basic usage</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/02_interactive.html"> <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> <div class="exampleTitle">interactive</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/03_performance.html"> <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> <div class="exampleTitle">performance</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/04_html_data.html"> <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> <div class="exampleTitle">html data</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/05_groups.html"> <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> <div class="exampleTitle">groups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/06_event_listeners.html"> <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> <div class="exampleTitle">event listeners</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/07_custom_time_bar.html"> <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> <div class="exampleTitle">custom time bar</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/08_edit_items.html"> <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> <div class="exampleTitle">edit items</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/09_order_groups.html"> <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> <div class="exampleTitle">order groups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/10_limit_move_and_zoom.html"> <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> <div class="exampleTitle">limit move and zoom</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/11_points.html"> <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> <div class="exampleTitle">points</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/12_custom_styling.html"> <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> <div class="exampleTitle">custom styling</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/13_past_and_future.html"> <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> <div class="exampleTitle">past and future</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/14_group_performance.html"> <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> <div class="exampleTitle">group performance</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/15_item_class_names.html"> <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> <div class="exampleTitle">item class names</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/16_navigation_menu.html"> <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> <div class="exampleTitle">navigation menu</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/17_data_serialization.html"> <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> <div class="exampleTitle">data serialization</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/18_range_overflow.html"> <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> <div class="exampleTitle">range overflow</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/19_localization.html"> <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> <div class="exampleTitle">localization</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/20_click_to_use.html"> <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> <div class="exampleTitle">click to use</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/21_set_selection.html"> <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> <div class="exampleTitle">set selection</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/22_window_adjustment.html"> <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> <div class="exampleTitle">window adjustment</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/23_data_attributes.html"> <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> <div class="exampleTitle">data attributes</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/24_all_data_attributes.html"> <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> <div class="exampleTitle">all data attributes</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/25_background_areas.html"> <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> <div class="exampleTitle">background areas</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/26_external_data.html"> <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> <div class="exampleTitle">external data</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/27_templates.html"> <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> <div class="exampleTitle">templates</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/29_hiding_times.html"> <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> <div class="exampleTitle">hiding times</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/30_subgroups.html"> <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> <div class="exampleTitle">subgroups</div>
</a> </a>
</div> </div>
<div class="col-lg-2 col-md-3 col-sm-6"> <div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/31_background_areas_with_groups.html"> <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> <div class="exampleTitle">background areas with groups</div>
</a> </a>
</div> </div>
@ -319,7 +364,7 @@
<br /> <br />
<br /> <br />
<br /> <br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 --> <!-- Include all compiled plugins (below), or include individual files as needed -->

Loading…
Cancel
Save