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 charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>vis.js showcase</title>    <link rel="icon" HREF="favicon.ico">    <!-- Bootstrap -->    <link href="../css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[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]-->

    <style>        body {            font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;        }        div.navbar-wrapper {            background-color:#07508E;            border-bottom: 3px solid #ffffff;            font-size:16px;        }        div.contentWrapper {            padding:20px;        }
        a:link {color: #8bb9fb;}        a:visited {color: #8bb9fb;}        a:hover {color: #8bb9fb;}        a:active {color: #8bb9fb;}
        div.textHTMLContent {            display:block;            width:970px;        }
        img.showcase {            position:relative;            left:-50px;            border: 1px solid #dddddd;            border-radius:5px;            width:880px;            max-height:400px;            margin:30px;        }
        div.description{            text-align:justify;            max-width:880px;            position:relative;            border-radius:5px;            padding:20px;            text-decoration: none;            color:#ffffff;            background-color: #455a6f;            margin-top:-80px;            z-index:2;            box-shadow: 0px 0px 8px #000000;            overflow:auto;        }
        div.descriptionHeader {            font-size:25px;            font-weight:bold;            padding-bottom:5px;        }    </style>
</head><body>

<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><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="../index.html#download_install">Download</a></li>                        <li class="active"><a href="">Showcase</a></li>                        <li><a href="../index.html#contribute">Contribute</a></li>                        <li><a href="../index.html#licenses">License</a></li>                    </ul>                </div>            </div>        </nav>
    </div></div>
<div class="contentWrapper">    <h1>Showcase projects</h1><div class="container-fluid">    These are projects we made using vis, or ones we received from the community. If you'd like your project to be featured here, please <a href="https://github.com/almende/vis/issues" target="_blank">post an issue on our Git page</a>.    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="./projects/midas/index.html">                <img src="./images/midas.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    MIDAS, <a href="http://www.almende.com"> Almende BV</a>                </div>                <div class="descriptionContent">                    MIDAS collects statistics of incidents during the production process.                        It analyses the manufacturing process and handles disruptive events during the ramp-up phase.                        We developed the software tool especially for this project, based on our tools,                        <a href="http://eve.almende.com/">Eve</a> and <a href="http://visjs.org/">vis.js</a>.                </div>            </div>        </div>        <!--<br /><br /><br />-->
        <div class="col-md-12 col-lg-6">            <a href="http://theantworks.herokuapp.com/industry-report/pfizer-az/">                <img src="./images/antworks_pfizer.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    Pfizer, <a href="http://www.theantworks.com"> The ANTworks</a>                </div>                <div class="descriptionContent">                    This and the next entree are two case studies Jeroen Coumans created for a startup that specialises in patent analysis, and were featured on CNN Money, The Guardian, CNBC and the Financial Times.                    Both fully use vis.js for graph rendering, while the frontend is built with React.                </div>            </div>        </div>    </div>    <!--<br /><br /><br />-->    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="http://www.kenedict.com/connecting-startups-and-investors-in-mobile-technology/">                <img src="./images/kenedict.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://www.kenedict.com/"> Kenedict</a>                </div>                <div class="descriptionContent">                    Connecting Startups and Investors in Mobile Technology: As you can see in the visualization, nodes have a high betweenness centrality when they are at the intersection of different clusters. In the case of investors (square nodes), this implies that an investor with a varied portfolio of mobile technology investments can serve as a key connector based on its participation in multiple sub-communities of the network.                </div>            </div>        </div>        <div class="col-md-12 col-lg-6">            <a href="http://theantworks.herokuapp.com/industry-report/tesla/">                <img src="./images/antworks_tesla.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    Tesla, <a href="http://www.theantworks.com"> The ANTworks</a>                </div>                <div class="descriptionContent">                    This and the previous entree are two case studies Jeroen Coumans created for a startup that specialises in patent analysis, and were featured on CNN Money, The Guardian, CNBC and the Financial Times.                    Both fully use vis.js for graph rendering, while the frontend is built with React.                </div>            </div>        </div>
    </div>
    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="http://www.poddvr.com/?e=6c7b942a2dd07385">                <img src="./images/poddvr.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://www.poddvr.com/"> podDVR</a>                </div>                <div class="descriptionContent">                    This is an one Page Web App enabling you to mark spots/segments of podcasts and easily share those highlights with friends. Podcasts are typically mp3 audio files obtained via RSS feed so we have integrated a media player with custom controls. Podcast episodes are presented in sequence over a navigable timeline, which is also used to visualize single episodes and/or highlights playing second by second.                </div>            </div>        </div>
        <div class="col-md-12 col-lg-6">            <a href="./projects/theantworks">                <img src="./images/antworks_proto.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    Prototype, <a href="http://www.theantworks.com"> The ANTworks</a>                </div>                <div class="descriptionContent">                    These are a few screenshots from an upcoming project by The ANTworks, giving a great example of how the style of vis can be                    customized.                </div>            </div>        </div>    </div>
    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="http://tiddlymap.org">                <img src="./images/tiddlywiki.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://tiddlywiki.com/"> TiddlyWiki</a>                </div>                <div class="descriptionContent">                    The open-source project TiddlyMap heavily draws on the Vis.js library to turn the personal note-taking software TiddlyWiki into a full-blown concept-mapping tool. Graphs may be embedded in the overall wiki content to accompany the text at any place and clickable nodes allow fast topic navigation. The resulting graph-wiki-hybrid makes it incredibly easy to integrate, link and visualize ideas.                </div>            </div>        </div>
        <div class="col-md-12 col-lg-6">            <a href="http://etn.io/">                <img src="./images/elite_trade_net.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://etn.io/"> Elite Trade Net</a>                </div>                <div class="descriptionContent">                    This is a tool for finding profitable trade routes in the game Elite: Dangerous. It uses the vis.js network module to display route options. Animation, select events and dynamic coloring enable graph navigation.                </div>            </div>        </div>    </div>
    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="http://www.beergraph.xyz">                <img src="./images/beergraph.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://www.beergraph.xyz/"> Beergraph</a>                </div>                <div class="descriptionContent">                    An application that shows the different styles of beers. Each beer style                    with its own specifications, beers brands and beer family which it belongs                    to.                    Feel free to contribute your knowledge and build a better graph using the                    forms.                </div>            </div>        </div>
        <div class="col-md-12 col-lg-6">            <a href="http://luke.deentaylor.com/wikipedia/">                <img src="./images/wikipedia_mapper.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://luke.deentaylor.com/wikipedia/">Wikipedia Mapper</a>                </div>                <div class="descriptionContent">                    A web app for visualizing the connections between Wikipedia pages.                </div>            </div>        </div>    </div>
    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="https://twitter.jeffprod.com">                <img src="./images/twitterjeffprod.jpg" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="https://twitter.jeffprod.com"> Twitter network visualization</a>                </div>                <div class="descriptionContent">                    A web tool to see relationship between Twitter users.                </div>            </div>        </div>        <div class="col-md-12 col-lg-6">            <a href="http://treeofscience.ru">                <img src="./images/treeofscience.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://treeofscience.ru"> Tree Of Science</a>                </div>                <div class="descriptionContent">                    Tree Of Science is an interactive catalogue of sciences.                    It is a russian school project.                </div>            </div>        </div>    </div>
    <div class="row">        <div class="col-md-12 col-lg-6">            <a href="http://sirius.modeselektor.com/">                <img src="./images/siriusmodeselektor.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://sirius.modeselektor.com/"> Siriusmodeselektor</a>                </div>                <div class="descriptionContent">                    Siriusmodeselektor is a collaboration of two electronic music acts: Siriusmo and Modeselektor.                    The site is built around vis.Timeline and uses it to display dates and photos/videos from their tour in 2015.                </div>            </div>        </div>				        <div class="col-md-12 col-lg-6">            <a href="https://gbrault.github.io/railroad-diagrams/live/live.html">                <img src="./images/expression-results.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="https://github.com/gbrault/railroad-diagrams/blob/gh-pages/live/doc/readme.md"> RailRoad SRFB</a>                </div>                <div class="descriptionContent">                    RailRoad SRFB is a small hack dealing with Grammars and formal language representation.                    Vis is used there to show a tree representation of a valid expression i.e. conformant to the grammar rules.                </div>            </div>        </div>
    </div>
</div></div><br /><br /><br /><br />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="../js/bootstrap.min.js"></script></body></html>