jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1310 Commits
33 Branches
197 MiB
Tree: 1faeb76759
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1faeb76759'
${ noResults }
jrtechs-vis/www2/index.html

288 lines
16 KiB
Raw Normal View History

added v2 of website (in alpha stage)
10 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="">
  8. 

  9.     <title>vis.js - A dynamic, browser based visualization library.</title>
  10. 

  11.     <!-- Bootstrap core CSS -->
  12.     <link href="./css/bootstrap.css" rel="stylesheet">
  13. 

  14.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15.     <!--[if lt IE 9]>

  16.     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18.     <![endif]-->
  19. 

  20.     <style>
  21.         #forkme {
  22.             position:absolute;
  23.             top:0px;
  24.             right:0px;
  25.             z-index:900;
  26.         }
  27. 

  28.         img.icon {
  29.             position:relative;
  30.             top:-2px;
  31.         }
  32.     </style>
  33.     <!-- Custom styles for this template -->
  34.     <link href="./css/carousel.css" rel="stylesheet">
  35. </head>
  36. <!-- NAVBAR

  37. ================================================== -->
  38. <body>
  39. <div class="navbar-wrapper">
  40.     <div class="container">
  41. 

  42.         <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  43.             <div class="container">
  44.                 <div class="navbar-header">
  45.                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  46.                         <span class="sr-only">Toggle navigation</span>
  47.                         <span class="icon-bar"></span>
  48.                         <span class="icon-bar"></span>
  49.                         <span class="icon-bar"></span>
  50.                     </button>
  51.                     <a class="navbar-brand" href="#">vis.js</a>
  52.                 </div>
  53.                 <div id="navbar" class="navbar-collapse collapse">
  54.                     <ul class="nav navbar-nav">
  55.                         <li class="active"><a href="#about">Modules</a></li>
  56.                         <li><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
  57.                         <li><a href="#showcase">Showcase</a></li>
  58.                         <li><a href="#contributing">Contributing</a></li>
  59.                         <li><a href="#featureRequests">Feature requests</a></li>
  60.                         <li><a href="#licenses">Licenses</a></li>
  61.                     </ul>
  62.                 </div>
  63.             </div>
  64.         </nav>
  65. 

  66.     </div>
  67. </div>
  68. 

  69. <a id="forkme" href="https://github.com/almende/vis/" class="hidden-xs hidden-sm hidden-md" target="_blank">
  70.     <img src="./images/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
  71. </a>
  72. 

  73. <!-- Carousel

  74. ================================================== -->
  75. <div id="myCarousel" class="carousel" data-ride="carousel">
  76.     <!-- Indicators -->
  77.     <ol class="carousel-indicators">
  78.         <li data-target="#myCarousel" data-slide-to="0" class=""></li>
  79.         <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
  80.         <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  81.         <li data-target="#myCarousel" data-slide-to="3" class=""></li>
  82.     </ol>
  83. 

  84.     <div class="carousel-inner" role="listbox">
  85.         <div class="item dark">
  86.             <div class="container">
  87.                 <img src="./images/timelineSlideDark.png">
  88.                 <div class="carousel-caption">
  89.                     <h1>vis.js</h1>
  90.                     <p>A dynamic, browser based visualization library.
  91.                         The library is designed to be easy to use, to handle large amounts
  92.                         of dynamic data, and to enable manipulation of and interaction with the data.
  93.                         The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.</p>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.         <div class="item dark active">
  98.             <div class="container">
  99.                 <img src="./images/networkSlide.png">
  100.                 <div class="carousel-caption">
  101.                     <h1>vis.js</h1>
  102.                     <p>A dynamic, browser based visualization library.
  103.                         The library is designed to be easy to use, to handle large amounts
  104.                         of dynamic data, and to enable manipulation of and interaction with the data.
  105.                         The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.</p>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.         <div class="item dark">
  110.             <div class="container">
  111.                 <img src="./images/graph2dSlideDark.png">
  112.                 <div class="carousel-caption">
  113.                     <h1>vis.js</h1>
  114.                     <p>A dynamic, browser based visualization library.
  115.                         The library is designed to be easy to use, to handle large amounts
  116.                         of dynamic data, and to enable manipulation of and interaction with the data.
  117.                         The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.</p>
  118.                 </div>
  119.             </div>
  120.         </div>
  121.         <div class="item dark">
  122.             <div class="container">
  123.                 <img src="./images/graph3dSlide.png">
  124.                 <div class="carousel-caption">
  125.                     <h1>vis.js</h1>
  126.                     <p>A dynamic, browser based visualization library.
  127.                         The library is designed to be easy to use, to handle large amounts
  128.                         of dynamic data, and to enable manipulation of and interaction with the data.
  129.                         The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.</p>
  130.                 </div>
  131.             </div>
  132.         </div>
  133.     </div>
  134. 

  135.     <a class="left carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev">
  136.         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  137.         <span class="sr-only">Previous</span>
  138.     </a>
  139.     <a class="right carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next">
  140.         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  141.         <span class="sr-only">Next</span>
  142.     </a>
  143. </div><!-- /.carousel -->
  144. 

  145. 

  146. <!-- Marketing messaging and featurettes

  147. ================================================== -->
  148. <!-- Wrap the rest of the page in another container to center all the content. -->
  149. 

  150. <div class="container marketing" id="modules">
  151. 

  152.     <!-- Three columns of text below the carousel -->
  153.     <div class="row">
  154.         <div class="col-md-3">
  155.             <img class="img-thumbnail"  src="./images/network.png"alt="Generic placeholder image" style="width: 240px; height: 140px;">
  156.             <h2>Network</h2>
  157.             <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.
  158.                 To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p>
  159.             <p><a class="btn btn-default" href="./network_examples.html" role="button">View examples »</a></p>
  160.             <p><a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a></p>
  161.         </div><!-- /.col-lg-4 -->
  162.         <div class="col-md-3">
  163.             <img class="img-thumbnail"  src="./images/timeline.png" alt="Generic placeholder image" style="width: 240px; height: 140px;">
  164.             <h2>Timeline</h2>
  165.             <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).
  166.                 Timeline uses regular HTML DOM to render the timeline and items put on the timeline. This allows for flexible customization using css styling.</p>
  167.             <p><a class="btn btn-default" href="./timeline_examples.html" role="button">View examples »</a></p>
  168.             <p><a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a></p>
  169.         </div><!-- /.col-lg-4 -->
  170.         <div class="col-md-3">
  171.             <img class="img-thumbnail"  src="./images/graph2d.png" alt="Generic placeholder image" style="width: 240px; height: 140px;">
  172.             <h2>Graph2d</h2>
  173.             <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.
  174.                 <br />
  175.                 Graph2d uses HTML DOM and SVG for rendering. This allows for flexible customization using css styling.</p>
  176.             <p><a class="btn btn-default" href="./graph2d_examples.html" role="button">View examples »</a></p>
  177.             <p><a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a></p>
  178.         </div><!-- /.col-lg-4 -->
  179.         <div class="col-md-3">
  180.             <img class="img-thumbnail" src="./images/graph3d.png" alt="Generic placeholder image" style="width: 240px; height: 140px;">
  181.             <h2>Graph3d</h2>
  182.             <p class="text-justify">Graph3d is an interactive visualization chart to draw data in a three dimensional graph.
  183.                 You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph.
  184.                 Graph3d uses HTML canvas to render graphs, and can render up to a few thousands of data points smoothly.</p>
  185.             <p><a class="btn btn-default" href="./graph3d_examples.html" role="button">View examples »</a></p>
  186.             <p><a class="btn btn-primary" href="./docs/graph3d.html" role="button">View docs »</a></p>
  187.         </div><!-- /.col-lg-4 -->
  188.     </div><!-- /.row -->
  189. 

  190. 

  191.     <!-- START THE FEATURETTES -->
  192. 

  193.     <hr class="featurette-divider">
  194. 

  195.     <div class="row featurette" id="showcase">
  196.         <div class="col-md-7">
  197.             <h2 class="featurette-heading">Showcase; <span class="text-muted">see vis in action!</span></h2>
  198.             <p class="lead"><a href="showcase.html">In this section you can see cool projects that vis was used in.</a> If you have made something and would like it featured,
  199.                 please make an <a href="https://github.com/almende/vis/issues" target="_blank">issue on github</a> with your project and how you'd like to be credited.</p>
  200.         </div>
  201.         <div class="col-md-5">
  202.             <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>
  203.         </div>
  204.     </div>
  205. 

  206.     <hr class="featurette-divider">
  207. 

  208.     <div class="row featurette" id="contributing">
  209.         <div class="col-md-5">
  210.             <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>
  211.         </div>
  212.         <div class="col-md-7">
  213.             <h2 class="featurette-heading">Contributing; <span class="text-muted">join the project</span></h2>
  214.             <p class="lead">Since vis.js is an open source project, everybody can contribute to it. If you want to contribute, great! Here's how:</p>
  215.             <p class="text-justify">First, fork vis on Github, then add your feature, fix a bug,
  216.                 rephrase our writing etc. and do a <a href="https://help.github.com/articles/using-pull-requests/">pull request</a> to the develop branch on Github!
  217.                 Pull requests to the master branch will not be merged.
  218.                 <br /><br />
  219.                 If you fork the codebase, you'll find all modules in seperate files. This makes it a lot easier to work on than the distributed and combined vis.js file.
  220.                 <br /><br />
  221.                 If you want to contribute but don't know how, feel free to pick up <a href="./featureRequests.html">a feature request described below</a>!
  222.                 These come from ourselves as well as from Github issues. If you do, <a href="https://github.com/almende/vis/issues" target="_blank">please post an issue on Github letting us know</a>, so we can mark the feature
  223.                 under development as well as help out when needed. If we are about to implement something from <a href="./featureRequests.html">the list</a>, we'll remove it before starting.
  224.             </p>
  225.         </div>
  226. 

  227.     </div>
  228. 

  229.     <hr class="featurette-divider">
  230. 

  231.     <div class="row featurette" id="featureRequests">
  232.         <div class="col-md-7">
  233.             <h2 class="featurette-heading">Feature requests</h2>
  234.             <p class="lead">We get a lot of feature requests on Github. <a href="./featureRequests.html">Here's a list of them!</a></p>
  235.             <p class="text-justify">The requests that come in on Github usually have a good argumentation and a lot of these ideas have made it into vis! To keep a nice overview of them, to clean up
  236.                 our Github issues and to supply a pool of ideas for people to contribute, we have made <a href="./featureRequests.html">this list.</a>
  237.                 <br /><br />
  238.                 This is by no means an end-of-the-line for your feature, but just something that we cannot pick up right away or cannot use in our projects at this time.
  239.                 We'd like to invite people who want to contribute to pick up one (or more!) of these features. <a href="./featureRequests.html">View the list here.</a>
  240.             </p>
  241.         </div>
  242.         <div class="col-md-5">
  243.             <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>
  244.         </div>
  245.     </div>
  246. 

  247.     <hr class="featurette-divider">
  248. 

  249.     <div class="row featurette" id="licenses">
  250.         <div class="col-md-5">
  251.             <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">
  252.         </div>
  253.         <div class="col-md-7">
  254.             <h2 class="featurette-heading">Licenses</h2>
  255.             <p class="lead">Copyright (C) 2010-2015 Almende B.V. <br /><br />
  256.                 Vis.js is dual licensed under both Apache 2.0 and MIT.<br /><br />
  257.                 Vis.js may be distributed under either license.
  258.                 <ul>
  259.                     <li>http://www.apache.org/licenses/LICENSE-2.0</li>
  260.                     <li>-The MIT License http://opensource.org/licenses/MIT</li>
  261.                 </ul>
  262.             </p>
  263.         </div>
  264. 

  265.     </div>
  266. 

  267.     <hr class="featurette-divider">
  268. 

  269.     <!-- /END THE FEATURETTES -->
  270. 

  271. 

  272.     <!-- FOOTER -->
  273.     <footer>
  274.         <p class="pull-right"><a href="#">Back to top</a></p>
  275.         <p>© 2015 Almende B.V.</p>
  276.     </footer>
  277. 

  278. </div><!-- /.container -->
  279. 

  280. 

  281. <!-- Bootstrap core JavaScript

  282. ================================================== -->
  283. <!-- Placed at the end of the document so the pages load faster -->
  284. <script src="./js/jquery.min.js"></script>
  285. <script src="./js/bootstrap.min.js"></script>
  286. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  287. <script src="./js/ie10-viewport-bug-workaround.js"></script>
  288.