|
|
- <!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 class="row">
- <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="https://gbrault.github.io/railroad-diagrams/live/live.html">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>
- <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>
|
