jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!DOCTYPE html><html lang="en"><head>
    <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="description" content="">    <meta name="author" content="">    <link rel="icon" HREF="favicon.ico">    <title>vis.js - A dynamic, browser based visualization library.</title>
    <link href="./css/post-it.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->    <link href="./css/bootstrap.css" rel="stylesheet">

    <!-- Webpage styling -->    <link href="./css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->
    <script src="./js/smooth-scroll.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
    <script language="JavaScript">        smoothScroll.init();
        function evalLinks() {            if (typeof vis === 'undefined') {                console.log(document.getElementById("linkStatus"));                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.18.1) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";                document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";                document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";            }        }    </script>
    <style>        a.kickstarter {            color: #fff3ca;        }        p.kickstarter {            color:#ffffff;        }    </style>
</head><!-- NAVBAR
================================================== --><body onload="evalLinks()"><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="#">vis.js</a>                </div>                <div id="navbar" class="navbar-collapse collapse">                    <ul class="nav navbar-nav">                        <li class="active"><a href="#modules">Modules</a></li>                        <li><a data-scroll href="#download_install">Download</a></li>                        <li><a href="./showcase/index.html">Showcase</a></li>                        <li><a data-scroll href="#contribute">Contribute</a></li>                        <li><a data-scroll href="#licenses">License</a></li>                    </ul>                </div>            </div>        </nav>
    </div></div>
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<!-- Carousel
================================================== --><div class="jumbotron wall hidden-xs">    <div class="jumbotron trans">        <div class="container jumbo">            <h1>vis.js</h1>            <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>        </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>

<div class="post-it post-it-top-right">    We're looking for people to help maintain and improve vis.js.    <br/>    <br/>    Interested? <a href="https://github.com/almende/vis/blob/develop/misc/we_need_help.md" target="_blank">Click here</a></div>
<!-- Marketing messaging and featurettes
================================================== --><!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing" id="modules">
    <!-- Three columns of text below the carousel -->    <div class="row">        <div class="col-md-4">            <div class="vis-component">                <a href="./network_examples.html"><img class="img-thumbnail"  src="./images/network.png"alt="network examples" style="width: 240px; height: 140px;"></a>                <h2>Network</h2>                <p>Display dynamic, automatically organised, customizable network views.</p>                <p><a class="btn btn-default" href="./network_examples.html" role="button">View examples &raquo;</a></p>                <p><a class="btn btn-primary" href="./docs/network" role="button">View docs &raquo;</a></p>            </div>        </div><!-- /.col-lg-4 -->        <hr class="featurette-divider visible-xs">        <div class="col-md-4">            <div class="vis-component">                <a href="./timeline_examples.html"><img class="img-thumbnail"  src="./images/timeline.png" alt="timeline examples" style="width: 240px; height: 140px;"></a>                <h2>Timeline</h2>                <p>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 &raquo;</a></p>                <p><a class="btn btn-primary" href="./docs/timeline" role="button">View docs &raquo;</a></p>            </div>        </div><!-- /.col-lg-4 -->        <hr class="featurette-divider visible-xs">        <div class="col-md-4">            <div class="vis-component">                <a href="./graph2d_examples.html"><img class="img-thumbnail"  src="./images/graph2d.png" alt="graph2d examples" style="width: 240px; height: 140px;"></a>                <h2>Graph2d</h2>                <p>Draw graphs and bar charts on an interactive timeline and personalize it the way you want.</p>                <p><a class="btn btn-default" href="./graph2d_examples.html" role="button">View examples &raquo;</a></p>                <p><a class="btn btn-primary" href="./docs/graph2d" role="button">View docs &raquo;</a></p>            </div>        </div><!-- /.col-lg-4 -->    </div><!-- /.row -->

    <!-- Three columns of text below the carousel -->    <div class="row">
        <div class="col-md-4">            <div class="vis-component">                <a href="./graph3d_examples.html"><img class="img-thumbnail" src="./images/graph3d.png" alt="graph3d examples" style="width: 240px; height: 140px;"></a>                <h2>Graph3d</h2>                <p>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 &raquo;</a></p>                <p><a class="btn btn-primary" href="./docs/graph3d" role="button">View docs &raquo;</a></p>            </div>        </div><!-- /.col-lg-4 -->        <hr class="featurette-divider visible-xs">        <div class="col-md-4">            <div class="vis-component">                <a href="./docs/data"><img class="img-thumbnail"  src="./images/dataset.png" alt="DataSet docs" style="width: 240px;"></a>                <h2>DataSet</h2>                <p>Manage unstructured data using DataSet. Add, update, and remove data, and listen for changes in the data.</p>                <p><a class="btn btn-primary" href="./docs/data" role="button">View docs &raquo;</a></p>            </div>        </div><!-- /.col-lg-4 -->    </div><!-- /.row -->


    <!-- START THE FEATURETTES -->    <br /><hr class="featurette-divider"><br />
    <div class="row featurette" id="download_install">        <div class="col-md-5">            <img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/gettingstartedSlide.png" data-holder-rendered="true">        </div>        <div class="col-md-7">            <div class="valign_parent">                <div class="valign_child">                    <h2 class="featurette-heading">Download; <span class="text-muted">getting started</span></h2>                    <p class="text-justify">                        The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>.                        Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).                        This site contains documentation, downloads and live examples of vis.js. The <a href="https://github.com/almende/vis">sourcecode of vis.js</a> is available at Github. For questions, issues, and suggestions please use the <a href="https://github.com/almende/vis/issues">issues section</a> of the Github project.                    </p>                    <h3>install with npm (recommended)</h3>                    <pre class="prettyprint">npm install vis</pre>                    <h3>install with bower</h3>                    <pre class="prettyprint">bower install vis</pre>                    <h3>link from cdnjs.com</h3>                    <p>                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js" target="_blank">vis.min.js</a> <br>                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" target="_blank">vis.min.css</a> <br>                        <span id="linkStatus"></span>                    </p>                    <h3>download</h3>                    <p>                        <a href="https://github.com/almende/vis/archive/v4.18.1.zip">v4.18.1.zip</a>                    </p>                </div>            </div>        </div>
    </div>
    <br /><hr class="featurette-divider"><br />
    <div class="row featurette" id="showcase">        <div class="col-md-7">            <div class="valign_parent">                <div class="valign_child">                    <h2 class="featurette-heading">Showcase; <span class="text-muted">see vis in action!</span></h2>                    <p class="lead"><a href="./showcase/index.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,                        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>                </div>            </div>        </div>        <div class="col-md-5">            <a href="./showcase/index.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>
    <br /><hr class="featurette-divider"><br />
    <div class="row featurette" id="contribute">        <div class="col-md-5">            <a href="https://github.com/almende/vis/blob/develop/misc/how_to_help.md" target="_blank">              <img class="featurette-image img-responsive hidden-xs hidden-sm  " data-src="holder.js/500x500/auto" alt="500x500" src="./images/octocat.png" data-holder-rendered="true"></a>        </div>        <div class="col-md-7">            <div class="valign_parent">                <div class="valign_child">                    <h2 class="featurette-heading">                      Contribute;                      <a href="https://github.com/almende/vis/blob/develop/misc/how_to_help.md">join the project!</a>                    </h2>                    <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>                    <p class="text-justify">                        First, fork vis on Github, then add your feature, fix a bug,                        rephrase our writing etc. and do a <a href="https://help.github.com/articles/using-pull-requests/">pull request</a> to the <b>develop branch</b> on Github! Pull requests to the master branch will not be merged.<br />                        <br />                        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.<br />                        <br />                        If you want to contribute please                        <a href="https://github.com/almende/vis/blob/develop/misc/how_to_help.md">read this HowTo!</a>!                    </p>                </div>            </div>        </div>
    </div>
    <br /><hr class="featurette-divider"><br />
    <div class="row featurette" id="featureRequests">        <div class="col-md-7">            <div class="valign_parent">                <div class="valign_child">                    <h2 class="featurette-heading">Feature requests</h2>                    <p class="lead">                      We get a lot of feature requests on Github.                      <a href="https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3AFeature-Request">Here's a list of them!</a>                    </p>                    <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. We label them as "Feature-Request" to supply a pool of ideas for people to want to contribute. <a href="https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3AFeature-Request">View the list here.</a>                    </p>                </div>            </div>        </div>        <div class="col-md-5">            <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">        </div>    </div>
    <br /><hr class="featurette-divider"><br />
    <div class="row featurette" id="licenses">        <div class="col-md-5">            <img class="featurette-image img-responsive hidden-xs hidden-sm" data-src="holder.js/500x500/auto" alt="500x500" src="./images/license.png" data-holder-rendered="true">        </div>        <div class="col-md-7">            <div class="valign_parent">                <div class="valign_child">                    <h2 class="featurette-heading">Licenses</h2>                    <p class="lead">                        Copyright (C) 2010-2017 Almende B.V. <br /><br />                        Vis.js is dual licensed under both Apache 2.0 and MIT.<br /><br />                        Vis.js may be distributed under either license.                        <ul>                            <li>http://www.apache.org/licenses/LICENSE-2.0</li>                            <li>-The MIT License http://opensource.org/licenses/MIT</li>                        </ul>                    </p>                </div>            </div>        </div>
    </div>
    <hr class="featurette-divider">
    <!-- /END THE FEATURETTES -->

    <!-- FOOTER -->    <footer>        <p class="pull-right"><a href="#">Back to top</a></p>        <p>© 2015-2017 Almende B.V.</p>    </footer>
</div><!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="./js/jquery.min.js"></script><script src="./js/bootstrap.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="./js/ie10-viewport-bug-workaround.js"></script>