vis.js is a dynamic, browser-based visualization library
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.

178 lines
7.7 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>vis.js showcase</title>
  8. <link rel="icon" HREF="favicon.ico">
  9. <!-- Bootstrap -->
  10. <link href="../css/bootstrap.min.css" rel="stylesheet">
  11. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  15. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. <style>
  18. body {
  19. font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
  20. padding:10px;
  21. }
  22. a:link {color: #8bb9fb;}
  23. a:visited {color: #8bb9fb;}
  24. a:hover {color: #8bb9fb;}
  25. a:active {color: #8bb9fb;}
  26. div.textHTMLContent {
  27. display:block;
  28. width:970px;
  29. }
  30. img.showcase {
  31. position:relative;
  32. left:-50px;
  33. border: 1px solid #dddddd;
  34. border-radius:5px;
  35. width:880px;
  36. height:350px;
  37. margin:30px;
  38. }
  39. div.description{
  40. text-align:justify;
  41. max-width:880px;
  42. position:relative;
  43. border-radius:5px;
  44. padding:20px;
  45. text-decoration: none;
  46. color:#ffffff;
  47. background-color: #455a6f;
  48. margin-top:-80px;
  49. z-index:2;
  50. box-shadow: 0px 0px 8px #000000;
  51. overflow:auto;
  52. }
  53. div.descriptionHeader {
  54. font-size:25px;
  55. font-weight:bold;
  56. padding-bottom:5px;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61. <h1>Showcase projects</h1>
  62. <div class="container-fluid">
  63. 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>.
  64. <div class="row">
  65. <div class="col-md-12 col-lg-6">
  66. <a href="./projects/midas/index.html">
  67. <img src="./images/midas.png" class="showcase img-responsive">
  68. </a>
  69. <div class="description">
  70. <div class="descriptionHeader">
  71. MIDAS, <a href="http://www.almende.com"> Almende BV</a>
  72. </div>
  73. <div class="descriptionContent">
  74. MIDAS collects statistics of incidents during the production process.
  75. It analyses the manufacturing process and handles disruptive events during the ramp-up phase.
  76. We developed the software tool especially for this project, based on our tools,
  77. <a href="http://eve.almende.com/">Eve</a> and <a href="http://visjs.org/">vis.js</a>.
  78. </div>
  79. </div>
  80. </div>
  81. <!--<br /><br /><br />-->
  82. <div class="col-md-12 col-lg-6">
  83. <a href="http://theantworks.herokuapp.com/industry-report/pfizer-az/">
  84. <img src="./images/antworks_pfizer.png" class="showcase img-responsive">
  85. </a>
  86. <div class="description">
  87. <div class="descriptionHeader">
  88. Pfizer, <a href="http://www.theantworks.com"> The ANTworks</a>
  89. </div>
  90. <div class="descriptionContent">
  91. 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.
  92. Both fully use vis.js for graph rendering, while the frontend is built with React.
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <!--<br /><br /><br />-->
  98. <div class="row">
  99. <div class="col-md-12 col-lg-6">
  100. <a href="http://www.kenedict.com/connecting-startups-and-investors-in-mobile-technology/">
  101. <img src="./images/kenedict.png" class="showcase img-responsive">
  102. </a>
  103. <div class="description">
  104. <div class="descriptionHeader">
  105. <a href="http://www.kenedict.com/"> Kenedict</a>
  106. </div>
  107. <div class="descriptionContent">
  108. 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.
  109. </div>
  110. </div>
  111. </div>
  112. <div class="col-md-12 col-lg-6">
  113. <a href="http://theantworks.herokuapp.com/industry-report/tesla/">
  114. <img src="./images/antworks_tesla.png" class="showcase img-responsive">
  115. </a>
  116. <div class="description">
  117. <div class="descriptionHeader">
  118. Tesla, <a href="http://www.theantworks.com"> The ANTworks</a>
  119. </div>
  120. <div class="descriptionContent">
  121. 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.
  122. Both fully use vis.js for graph rendering, while the frontend is built with React.
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="row">
  128. <div class="col-md-12 col-lg-6">
  129. <a href="http://www.poddvr.com/?e=6c7b942a2dd07385">
  130. <img src="./images/poddvr.png" class="showcase img-responsive">
  131. </a>
  132. <div class="description">
  133. <div class="descriptionHeader">
  134. <a href="http://www.poddvr.com/"> podDVR</a>
  135. </div>
  136. <div class="descriptionContent">
  137. 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.
  138. </div>
  139. </div>
  140. </div>
  141. <div class="col-md-12 col-lg-6">
  142. <a href="./projects/theantworks">
  143. <img src="./images/antworks_proto.png" class="showcase img-responsive">
  144. </a>
  145. <div class="description">
  146. <div class="descriptionHeader">
  147. Prototype, <a href="http://www.theantworks.com"> The ANTworks</a>
  148. </div>
  149. <div class="descriptionContent">
  150. These are a few screenshots from an upcoming project by The ANTworks, giving a great example of how the style of vis can be
  151. customized.
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <br /><br /><br /><br />
  158. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  159. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  160. <!-- Include all compiled plugins (below), or include individual files as needed -->
  161. <script src="../js/bootstrap.min.js"></script>
  162. </body>
  163. </html>