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.
374 lines
17 KiB
374 lines
17 KiB
<!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 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>
|
|
<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>
|