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>        <div class="col-md-12 col-lg-6">            <a href="https://starcitizen.center/route-planner">                <img src="images/star_citizen_route_planner.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="https://starcitizen.center/route-planner"> Star Citizen Route Planner</a>                </div>                <div class="descriptionContent">                    This interactive route planner and map for the SciFi Universe StarCitize makes use of graph features such as physics enabled on links,                    manual persistent positions for the nodes (user can make custom layouts),                    and custom icons based on the logic.                </div>            </div>        </div>    </div>
    <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://www.iftekhar.me/ibm/ibm-project-timeline/">                <img src="./images/timeline_clustering.gif" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://www.iftekhar.me/ibm/ibm-project-timeline/">Timeline in PowerHA</a>                </div>                <div class="descriptionContent">                  PowerHA is a disaster recovery project where we developed a graphical interface for the command line system                  out clients has been using. Timeline is a graphical representation of all the events occurring in                  the environment over certain period of time.                </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="http://www.widgetblender.com/code/php7/pv/form_for_google_patent_page_scraper.php">                <img src="images/patentsearcher.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="http://www.widgetblender.com/code/php7/pv/form_for_google_patent_page_scraper.php"> Patent Searcher</a>                </div>                <div class="descriptionContent">                    This is a simple and free to use prototype application that employs "screen scraping" written in PHP 7 to gather data from the Google Patent Search. It then formats it into a timeline that can be interacted with.                </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="https://www.robtex.com/dns-lookup/example.com">                <img src="./images/robtex_dns_lookup.png" class="showcase img-responsive">            </a>            <div class="description">                <div class="descriptionHeader">                    <a href="https://www.robtex.com/dns-lookup/example.com">Robtex DNS Graph</a>                </div>                <div class="descriptionContent">                    Robtex aims to make the fastest and most comprehensive free DNS lookup tool on the Internet and                    uses vis to dynamically display DNS graphs.                </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><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>