Browse Source

added blog section, lots of tweaks

gh-pages
Alex de Mulder 9 years ago
parent
commit
d85363734c
26 changed files with 407 additions and 34048 deletions
  1. +232
    -0
      blog.html
  2. +5
    -2
      graph2d_examples.html
  3. +5
    -2
      graph3d_examples.html
  4. BIN
      images/crossword.png
  5. BIN
      images/crosswordStrong.png
  6. BIN
      images/graph2dSlideDark.png
  7. BIN
      images/graph2dSlideLight.png
  8. BIN
      images/graph3dSlide.png
  9. BIN
      images/networkSlide.png
  10. BIN
      images/timelineSlide.png
  11. BIN
      images/timelineSlideDark.png
  12. BIN
      images/wallHeader.png
  13. +7
    -6
      index.html
  14. +0
    -34004
      js/vis.js
  15. +8
    -5
      network_examples.html
  16. +30
    -0
      npm-debug.log
  17. +0
    -0
      showcase/images/antworks_1.png.crdownload
  18. BIN
      showcase/images/antworks_pfizer.png
  19. BIN
      showcase/images/antworks_proto.png
  20. BIN
      showcase/images/antworks_tesla.png
  21. +103
    -27
      showcase/index.html
  22. BIN
      showcase/projects/theantworks/antworks_1.png
  23. BIN
      showcase/projects/theantworks/antworks_2.png
  24. BIN
      showcase/projects/theantworks/antworks_3.png
  25. +12
    -0
      showcase/projects/theantworks/index.html
  26. +5
    -2
      timeline_examples.html

+ 232
- 0
blog.html View File

@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>vis.js - A dynamic, browser based visualization library.</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
html {
height:100%;
}
body {
font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;
height:100%;
background: url('./images/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
}
img.icon {
position:relative;
top:-2px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
}
div.center {
width:970px;
margin-left:auto;
margin-right:auto;
}
div.container {
max-width:970px;
}
div.blogHeader {
margin-left:auto;
margin-right:auto;
text-align:center;
width:910px;
padding: 0px 30px 0px 30px;
margin-top:-150px;
color:#ffffff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
margin-bottom:60px;
}
div.post {
margin:40px 80px 0px 190px;
padding:10px 10px 10px 10px;;
border: 1px solid #eeeeee;
}
div.postHeader {
float:left;
font-size:30px;
}
div.postDate {
margin-top:19px;
float:right;
font-size:12px;
}
div.postAuthor {
padding-left:10px;
margin-top:19px;
float:right;
font-size:12px;
}
div.postContent {
font-size: 16px;
margin-top:50px;
padding:10px 20px 0px 20px;
text-align:justify;
}
div.full {
min-height:100%;
box-shadow:0px 2px 10px rgba(0,0,0,0.4);
padding:0px;
background-color:#ffffff;
}
div.postsMenu {
position:relative;
left:-15px;
top:-50px;
width:0px;
height:0px;
}
div.postsMenuContent {
padding:10px;
background-color:#6787a6;
width:180px;
height:500px;
border-radius:5px;
box-shadow:0px 2px 10px rgba(0,0,0,0.4);
color:#ffffff;
font-size:16px;
}
a.post {
font-size:12px;
text-decoration:none;
color:#ffffff;
display:block;
margin: 10px 0px 0px 0px;
}
</style>
</head>
<!-- NAVBAR
================================================== -->
<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 class="active"><a href="#about">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="./blog.html">Blog</a></li>
<li><a href="#download_install">About & download</a></li>
<li><a href="#showcase">Showcase</a></li>
<li><a href="#contributing">Contributing</a></li>
<li><a href="#featureRequests">Feature requests</a></li>
<li><a href="#licenses">Licenses</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="container full">
<div class="center">
<img src="./images/wallHeader.png">
</div>
<div class="blogHeader">
<h1>vis.js</h1>
<p>A dynamic, browser based visualization library.
The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. This blog is about the latest developments, roadmap and releases.
</p>
</div>
<div class="postsMenu">
<div class="postsMenuContent">
Posts:
<a class="post" href="#Released version 3.7.3">- Released version 3.7.3</a>
<a class="post" href="#Released version 3.7.2">- Released version 3.7.2</a>
</div>
</div>
<div class="post">
<div class="postHeader" id="Released version 3.7.3">Released version 3.7.3</div>
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
<div class="postDate">8th of January, 2015</div>
<div class="postContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius tellus felis, sed porttitor enim facilisis in. Sed lacinia est sit amet quam dapibus egestas. Integer laoreet, odio quis lobortis scelerisque, sapien mauris consequat nisl, nec maximus justo felis eget ligula. Aliquam tempus mattis porttitor. Pellentesque vitae massa nunc. Maecenas sit amet laoreet ligula. Proin tellus ex, eleifend eget velit eu, tincidunt facilisis purus. Sed at quam vel odio feugiat fringilla.
Nam pretium justo nec magna volutpat porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a rhoncus arcu, quis sagittis lacus. Pellentesque sed convallis metus. Cras eu lorem ex. Donec ultricies dui congue, varius nulla pharetra, semper dolor. Sed ac elit tortor. Cras vestibulum risus lacus, ut varius risus congue sed. Aliquam in tincidunt libero. Aenean ac eleifend dolor, non pellentesque neque.
Nunc metus enim, tristique vel odio vel, dignissim ultricies massa. Nam posuere mauris erat. Vestibulum ornare nulla et purus placerat, ac venenatis mi facilisis. Ut non sapien a neque hendrerit finibus. Fusce rhoncus aliquet tristique. Donec eu nisl id dolor molestie convallis at vitae diam. Phasellus in tortor ut ante tincidunt mollis. Aliquam erat volutpat. Suspendisse eget odio ut dolor ultrices vestibulum a at nunc. Donec vel sodales nunc. In hac habitasse platea dictumst. Cras pharetra felis ut nisl commodo, eget sollicitudin justo fringilla. Quisque scelerisque lacus est, vestibulum dignissim lorem venenatis non. Nullam ac turpis elit. Sed quis lorem id nisi egestas semper quis non erat.
Nam quis elit vitae nibh volutpat facilisis eget sit amet tortor. Nam rutrum ante eget nisl cursus, nec eleifend lacus vulputate. Donec porta dui a tellus molestie, a dapibus nisl convallis. Aenean laoreet vehicula lorem in dictum. Phasellus ullamcorper lectus suscipit felis malesuada blandit. Vestibulum non posuere libero. Maecenas malesuada bibendum lacus eget congue. Sed id nibh in nulla vehicula luctus. Ut cursus metus ante, a lobortis lacus volutpat sit amet. Nullam elit augue, hendrerit id maximus at, viverra eget quam. Quisque tempor diam vitae purus posuere congue. Phasellus blandit dictum maximus. Nulla justo tortor, finibus sit amet malesuada et, bibendum eget urna.
Aliquam mattis libero id felis aliquet eleifend. Vivamus placerat at felis eget tincidunt. Integer vitae mi sit amet felis mollis consequat. Aenean rutrum, ipsum porttitor molestie dictum, nulla nunc eleifend ligula, quis auctor lacus dolor vel felis. Curabitur nec dui sit amet mi blandit ornare. Integer sodales orci in elementum ornare. Aenean ut lacus eu libero faucibus porta. Pellentesque mattis non dui ac fermentum. Nulla non faucibus mi. Morbi feugiat tincidunt erat, a scelerisque risus. Quisque accumsan risus nec urna elementum cursus. Suspendisse potenti. Etiam in tortor feugiat, maximus leo eget, rhoncus turpis. Aliquam in purus nunc. Duis lobortis nibh ut pellentesque gravida. Donec non metus laoreet, eleifend lectus in, auctor ipsum.
</div>
</div>
<div class="post">
<div class="postHeader" id="Released version 3.7.2">Released version 3.7.2</div>
<div class="postAuthor">by <a href="https://github.com/AlexDM0">Alex</a></div>
<div class="postDate">8th of January, 2015</div>
<div class="postContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius tellus felis, sed porttitor enim facilisis in. Sed lacinia est sit amet quam dapibus egestas. Integer laoreet, odio quis lobortis scelerisque, sapien mauris consequat nisl, nec maximus justo felis eget ligula. Aliquam tempus mattis porttitor. Pellentesque vitae massa nunc. Maecenas sit amet laoreet ligula. Proin tellus ex, eleifend eget velit eu, tincidunt facilisis purus. Sed at quam vel odio feugiat fringilla.
Nam pretium justo nec magna volutpat porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a rhoncus arcu, quis sagittis lacus. Pellentesque sed convallis metus. Cras eu lorem ex. Donec ultricies dui congue, varius nulla pharetra, semper dolor. Sed ac elit tortor. Cras vestibulum risus lacus, ut varius risus congue sed. Aliquam in tincidunt libero. Aenean ac eleifend dolor, non pellentesque neque.
Nunc metus enim, tristique vel odio vel, dignissim ultricies massa. Nam posuere mauris erat. Vestibulum ornare nulla et purus placerat, ac venenatis mi facilisis. Ut non sapien a neque hendrerit finibus. Fusce rhoncus aliquet tristique. Donec eu nisl id dolor molestie convallis at vitae diam. Phasellus in tortor ut ante tincidunt mollis. Aliquam erat volutpat. Suspendisse eget odio ut dolor ultrices vestibulum a at nunc. Donec vel sodales nunc. In hac habitasse platea dictumst. Cras pharetra felis ut nisl commodo, eget sollicitudin justo fringilla. Quisque scelerisque lacus est, vestibulum dignissim lorem venenatis non. Nullam ac turpis elit. Sed quis lorem id nisi egestas semper quis non erat.
Nam quis elit vitae nibh volutpat facilisis eget sit amet tortor. Nam rutrum ante eget nisl cursus, nec eleifend lacus vulputate. Donec porta dui a tellus molestie, a dapibus nisl convallis. Aenean laoreet vehicula lorem in dictum. Phasellus ullamcorper lectus suscipit felis malesuada blandit. Vestibulum non posuere libero. Maecenas malesuada bibendum lacus eget congue. Sed id nibh in nulla vehicula luctus. Ut cursus metus ante, a lobortis lacus volutpat sit amet. Nullam elit augue, hendrerit id maximus at, viverra eget quam. Quisque tempor diam vitae purus posuere congue. Phasellus blandit dictum maximus. Nulla justo tortor, finibus sit amet malesuada et, bibendum eget urna.
Aliquam mattis libero id felis aliquet eleifend. Vivamus placerat at felis eget tincidunt. Integer vitae mi sit amet felis mollis consequat. Aenean rutrum, ipsum porttitor molestie dictum, nulla nunc eleifend ligula, quis auctor lacus dolor vel felis. Curabitur nec dui sit amet mi blandit ornare. Integer sodales orci in elementum ornare. Aenean ut lacus eu libero faucibus porta. Pellentesque mattis non dui ac fermentum. Nulla non faucibus mi. Morbi feugiat tincidunt erat, a scelerisque risus. Quisque accumsan risus nec urna elementum cursus. Suspendisse potenti. Etiam in tortor feugiat, maximus leo eget, rhoncus turpis. Aliquam in purus nunc. Duis lobortis nibh ut pellentesque gravida. Donec non metus laoreet, eleifend lectus in, auctor ipsum.
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./js/ie10-viewport-bug-workaround.js"></script>

+ 5
- 2
graph2d_examples.html View File

@ -51,6 +51,7 @@
width:800px; width:800px;
} }
img { img {
border:1px solid #dddddd; border:1px solid #dddddd;
width:250px; width:250px;
@ -64,12 +65,14 @@
width:100%; width:100%;
max-width:250px; max-width:250px;
height:30px; height:30px;
background-color:#064880;
border: 1px solid #dddddd;
background-color: #526b84;
color:#ffffff; color:#ffffff;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
line-height: 30px; line-height: 30px;
border-radius:10px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
} }
</style> </style>
<script language="JavaScript"> <script language="JavaScript">

+ 5
- 2
graph3d_examples.html View File

@ -51,6 +51,7 @@
width:800px; width:800px;
} }
img { img {
border:1px solid #dddddd; border:1px solid #dddddd;
width:250px; width:250px;
@ -64,12 +65,14 @@
width:100%; width:100%;
max-width:250px; max-width:250px;
height:30px; height:30px;
background-color:#064880;
border: 1px solid #dddddd;
background-color: #526b84;
color:#ffffff; color:#ffffff;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
line-height: 30px; line-height: 30px;
border-radius:10px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
} }
</style> </style>
<script language="JavaScript"> <script language="JavaScript">

BIN
images/crossword.png View File

Before After
Width: 400  |  Height: 400  |  Size: 43 KiB

BIN
images/crosswordStrong.png View File

Before After
Width: 400  |  Height: 400  |  Size: 123 KiB

BIN
images/graph2dSlideDark.png View File

Before After
Width: 900  |  Height: 500  |  Size: 81 KiB

BIN
images/graph2dSlideLight.png View File

Before After
Width: 900  |  Height: 500  |  Size: 194 KiB

BIN
images/graph3dSlide.png View File

Before After
Width: 900  |  Height: 500  |  Size: 194 KiB

BIN
images/networkSlide.png View File

Before After
Width: 900  |  Height: 500  |  Size: 112 KiB

BIN
images/timelineSlide.png View File

Before After
Width: 900  |  Height: 500  |  Size: 117 KiB

BIN
images/timelineSlideDark.png View File

Before After
Width: 900  |  Height: 500  |  Size: 93 KiB

BIN
images/wallHeader.png View File

Before After
Width: 970  |  Height: 253  |  Size: 65 KiB

+ 7
- 6
index.html View File

@ -81,6 +81,7 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#about">Modules</a></li> <li class="active"><a href="#about">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="./docs/index.html" target="_blank">Documentation <img class="icon" src="./images/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="#download_install">About & download</a></li> <li><a href="#download_install">About & download</a></li>
<li><a href="#showcase">Showcase</a></li> <li><a href="#showcase">Showcase</a></li>
<li><a href="#contributing">Contributing</a></li> <li><a href="#contributing">Contributing</a></li>
@ -94,7 +95,7 @@
</div> </div>
</div> </div>
<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<!-- Carousel <!-- Carousel
================================================== --> ================================================== -->
@ -105,7 +106,7 @@
<p>A dynamic, browser based visualization library. <p>A dynamic, browser based visualization library.
The library is designed to be easy to use, to handle large amounts The library is designed to be easy to use, to handle large amounts
of dynamic data, and to enable manipulation of and interaction with the data. of dynamic data, and to enable manipulation of and interaction with the data.
The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d. Get it over here!</p>
The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. <a href="#download_install">Get it over here!</a></p>
</div> </div>
</div> </div>
<!--<div class="container">--> <!--<div class="container">-->
@ -126,7 +127,7 @@
<!-- Three columns of text below the carousel --> <!-- Three columns of text below the carousel -->
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<a href="./network_examples.html"><img class="img-thumbnail" src="./images/network.png"alt="Generic placeholder image" style="width: 240px; height: 140px;"></a>
<a href="./network_examples.html"><img class="img-thumbnail" src="./images/network.png"alt="network examples" style="width: 240px; height: 140px;"></a>
<h2>Network</h2> <h2>Network</h2>
<p class="text-justify">Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. <p class="text-justify">Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more.
To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p> To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p>
@ -134,7 +135,7 @@
<p><a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a></p> <p><a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-md-3"> <div class="col-md-3">
<a href="./timeline_examples.html"><img class="img-thumbnail" src="./images/timeline.png" alt="Generic placeholder image" style="width: 240px; height: 140px;"></a>
<a href="./timeline_examples.html"><img class="img-thumbnail" src="./images/timeline.png" alt="timeline examples" style="width: 240px; height: 140px;"></a>
<h2>Timeline</h2> <h2>Timeline</h2>
<p class="text-justify">The Timeline is an interactive chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range). <p class="text-justify">The Timeline is an interactive chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range).
Timeline uses regular HTML DOM to render the timeline and items put on the timeline. This allows for flexible customization using css styling.</p> Timeline uses regular HTML DOM to render the timeline and items put on the timeline. This allows for flexible customization using css styling.</p>
@ -142,7 +143,7 @@
<p><a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a></p> <p><a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-md-3"> <div class="col-md-3">
<a href="./graph2d_examples.html"><img class="img-thumbnail" src="./images/graph2d.png" alt="Generic placeholder image" style="width: 240px; height: 140px;"></a>
<a href="./graph2d_examples.html"><img class="img-thumbnail" src="./images/graph2d.png" alt="graph2d examples" style="width: 240px; height: 140px;"></a>
<h2>Graph2d</h2> <h2>Graph2d</h2>
<p class="text-justify">Graph2d is an interactive visualization chart to draw data in a 2D graph. It can plot lines, point and bars. You can freely move and zoom in the graph by dragging and scrolling in the window. <p class="text-justify">Graph2d is an interactive visualization chart to draw data in a 2D graph. It can plot lines, point and bars. You can freely move and zoom in the graph by dragging and scrolling in the window.
<br /> <br />
@ -151,7 +152,7 @@
<p><a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a></p> <p><a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-md-3"> <div class="col-md-3">
<a href="./graph3d_examples.html"><img class="img-thumbnail" src="./images/graph3d.png" alt="Generic placeholder image" style="width: 240px; height: 140px;"></a>
<a href="./graph3d_examples.html"><img class="img-thumbnail" src="./images/graph3d.png" alt="graph3d examples" style="width: 240px; height: 140px;"></a>
<h2>Graph3d</h2> <h2>Graph3d</h2>
<p class="text-justify">Graph3d is an interactive visualization chart to draw data in a three dimensional graph. <p class="text-justify">Graph3d is an interactive visualization chart to draw data in a three dimensional graph.
You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph. You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph.

+ 0
- 34004
js/vis.js
File diff suppressed because it is too large
View File


+ 8
- 5
network_examples.html View File

@ -18,7 +18,8 @@
<link href="./css/prettify.css" rel="stylesheet" type="text/css" /> <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/prettify/prettify.js"></script> <script type="text/javascript" src="./js/prettify/prettify.js"></script>
<script type="text/javascript" src="./js/vis.js"></script>
<script src="./dist/vis.js"></script>
<link href="./dist/vis.css" rel="stylesheet" type="text/css" />
<style> <style>
body { body {
@ -63,12 +64,14 @@
width:100%; width:100%;
max-width:250px; max-width:250px;
height:30px; height:30px;
background-color:#064880;
border: 1px solid #dddddd;
background-color: #526b84;
color:#ffffff; color:#ffffff;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
line-height: 30px; line-height: 30px;
border-radius:10px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
} }
</style> </style>
<script language="JavaScript"> <script language="JavaScript">
@ -95,7 +98,7 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var network = new vis.Network(container, data, {clickToUse:true});
var network = new vis.Network(container, data, {clickToUse:true, stabilize:false});
} }
</script> </script>
@ -103,7 +106,7 @@
<body onload="prettyPrint(); loadVis();"> <body onload="prettyPrint(); loadVis();">
<h1>Network Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a> <h1>Network Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>
<div class="textHTMLContent">This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it.</div>
<div class="textHTMLContent">This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it. (click it to start interacting with it).</div>
<pre class="prettyprint lang-html"> <pre class="prettyprint lang-html">
&lt;div id="visualization"&gt;&lt;/div&gt; &lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt; &lt;script type="text/javascript"&gt;

+ 30
- 0
npm-debug.log View File

@ -0,0 +1,30 @@
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'watch-dev' ]
2 info using npm@1.4.14
3 info using node@v0.10.29
4 verbose node symlink C:\Program Files\nodejs\\node.exe
5 verbose run-script [ 'prewatch-dev', 'watch-dev', 'postwatch-dev' ]
6 info prewatch-dev vis@3.7.2-SNAPSHOT
7 info watch-dev vis@3.7.2-SNAPSHOT
8 verbose unsafe-perm in lifecycle true
9 info vis@3.7.2-SNAPSHOT Failed to exec watch-dev script
10 error vis@3.7.2-SNAPSHOT watch-dev: `gulp watch --bundle`
10 error Exit status 8
11 error Failed at the vis@3.7.2-SNAPSHOT watch-dev script.
11 error This is most likely a problem with the vis package,
11 error not with npm itself.
11 error Tell the author that this fails on your system:
11 error gulp watch --bundle
11 error You can get their info via:
11 error npm owner ls vis
11 error There is likely additional logging output above.
12 error System Windows_NT 6.1.7601
13 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch-dev"
14 error cwd C:\Dropbox\Almende\Projects\JavaScript\vis
15 error node -v v0.10.29
16 error npm -v 1.4.14
17 error code ELIFECYCLE
18 verbose exit [ 1, true ]

+ 0
- 0
showcase/images/antworks_1.png.crdownload View File


BIN
showcase/images/antworks_pfizer.png View File

Before After
Width: 900  |  Height: 400  |  Size: 307 KiB

BIN
showcase/images/antworks_proto.png View File

Before After
Width: 900  |  Height: 400  |  Size: 297 KiB

BIN
showcase/images/antworks_tesla.png View File

Before After
Width: 900  |  Height: 400  |  Size: 165 KiB

+ 103
- 27
showcase/index.html View File

@ -7,7 +7,7 @@
<title>Feature Requests</title> <title>Feature Requests</title>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- 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:// --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@ -18,15 +18,15 @@
<style> <style>
a {
text-decoration: none;
}
body { body {
padding:10px;
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important; font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
} }
a:link {color: #ffaf12;}
a:visited {color: #ffaf12;}
a:hover {color: #ffaf12;}
a:active {color: #ffaf12;}
div.textHTMLContent { div.textHTMLContent {
display:block; display:block;
width:970px; width:970px;
@ -34,24 +34,29 @@
img.showcase { img.showcase {
position:relative; position:relative;
left:-50px;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius:20px;
width:900px;
border-radius:5px;
width:880px;
height:350px; height:350px;
margin:30px;
} }
div.description{ div.description{
width:880px;
text-align:justify;
max-width:880px;
position:relative; position:relative;
border-radius:20px;
border-radius:5px;
padding:20px; padding:20px;
text-decoration: none; text-decoration: none;
color:#ffffff; color:#ffffff;
background-color:#064880;
background-color: #455a6f;
margin-top:-80px; margin-top:-80px;
margin-left:20px;
z-index:2; z-index:2;
box-shadow: 0px 0px 8px #000000; box-shadow: 0px 0px 8px #000000;
min-height:140px;
max-height:160px;
overflow:auto;
} }
div.descriptionHeader { div.descriptionHeader {
@ -59,35 +64,106 @@
font-weight:bold; font-weight:bold;
padding-bottom:5px; padding-bottom:5px;
} }
img {
border:1px solid #dddddd;
width:250px;
height:250px;
border-radius:10px;
margin-top:10px;
}
div.exampleTitle {
position:relative;
top:-7px;
width:100%;
max-width:250px;
height:30px;
border: 1px solid #dddddd;
background-color: #6787a6;
color:#ffffff;
text-align:center;
vertical-align:middle;
line-height: 30px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Showcase projects</h1> <h1>Showcase projects</h1>
<div class="textHTMLContent">
<a href="./projects/midas/index.html">
<div class="showcase">
<img src="./images/midas.png" class="showcase">
<div class="description">
<div class="descriptionHeader">
M.I.D.A.S. : Manufacturing Incident Detection Agent Solution
</div>
<div class="descriptionContent">
MIDAS collects statistics of incidents during the production process.
<div class="container-fluid">
<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">&copy; 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. It analyses the manufacturing process and handles disruptive events during the ramp-up phase.
Almende developed the software tool especially for this project, based on the inhouse toolchain,
specifically Eve, AIM and vis.js.
</div>
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">&copy; 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>
<!--<br /><br /><br />-->
<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">&copy; 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 class="col-md-12 col-lg-6">
<a href="http://theantworks.herokuapp.com/industry-report/tesla/">
<img src="./images/antworks_proto.png" class="showcase img-responsive">
</a>
<div class="description">
<div class="descriptionHeader">
Upcoming project, <a href="http://www.theantworks.com">&copy; 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>
</a>
</div>
</div> </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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 --> <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

BIN
showcase/projects/theantworks/antworks_1.png View File

Before After
Width: 1918  |  Height: 1102  |  Size: 1.1 MiB

BIN
showcase/projects/theantworks/antworks_2.png View File

Before After
Width: 1921  |  Height: 1106  |  Size: 1.1 MiB

BIN
showcase/projects/theantworks/antworks_3.png View File

Before After
Width: 1920  |  Height: 1106  |  Size: 1.4 MiB

+ 12
- 0
showcase/projects/theantworks/index.html View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="./antworks_1.png">
<img src="./antworks_2.png">
<img src="./antworks_3.png">
</body>
</html>

+ 5
- 2
timeline_examples.html View File

@ -48,6 +48,7 @@
width:800px; width:800px;
} }
img { img {
border:1px solid #dddddd; border:1px solid #dddddd;
width:250px; width:250px;
@ -61,12 +62,14 @@
width:100%; width:100%;
max-width:250px; max-width:250px;
height:30px; height:30px;
background-color:#064880;
border: 1px solid #dddddd;
background-color: #526b84;
color:#ffffff; color:#ffffff;
text-align:center; text-align:center;
vertical-align:middle; vertical-align:middle;
line-height: 30px; line-height: 30px;
border-radius:10px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
} }
</style> </style>
<script language="JavaScript"> <script language="JavaScript">

Loading…
Cancel
Save