Experiment with timeline on the page.

Author: Carreau

_posts/2009-02-02-timeline.md

@@ -0,0 +1,9 @@
+---
+bg: 'white'
+fa-icon: calendar
+---
+
+#   Projects Timeline
+
+<div id="visualization"></div>
+

_posts/2010-01-04-sign.md

@@ -1,6 +1,7 @@
 ---
 title: sign
 fa-icon: pencil
+bg: lightgray
 ---
 
 # Sign the pledge

combo.css

@@ -3,3 +3,17 @@
 {% include css/base.css %}
 {% include css/skeleton.css %}
 {% include css/main.css %}
+
+.vis-item.py2 {
+      background-color: greenyellow;
+      border-color: green;
+}
+
+    /* create a custom sized dot at the bottom of the red item */
+.vis-item.red {
+      background-color: red;
+      border-color: darkred;
+      color: white;
+      font-family: monospace;
+      box-shadow: 0 0 10px gray;
+}

index.html

@@ -11,6 +11,8 @@
   <link rel="stylesheet" href="combo.css">
   <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
   {% if site.favicon %}<link rel="shortcut icon" href="{{ site.favicon }}" type="image/x-icon">{% endif %}
 	{% if site.touch_icon %}<link rel="apple-touch-icon" href="{{ site.touch_icon }}">{% endif %}
 </head>

site.js

@@ -91,5 +91,68 @@ $(document).ready(function (){
         }
 	});
 
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  var data = {
+    'cpython':[
+      {content:'Remaining Python 2.7 support', start: Date.now(), end: '2020-01-01'},
+    ],
+    'ipython':[
+      {content: 'ipython 5.x LTS', start: '2016-06-01', end:'2019-06-01', py2:true},
+      {content: 'ipython 6.x', start: '2017-01-01', end:'2018-01-01'},
+      {content: 'ipython 7.x', start: '2018-01-01', end:'2019-06-12'},
+      {content: 'ipython 8.x', start: '2019-06-12', end:'2020-06-01'},
+    ],
+    'matplotlib':[
+      {content: 'matplotlib 2.x', start: '2015-06-01', end:'2018-06-01', py2:true},
+      {content: 'matplotlib 3.x', start: '2018-6-12', end:'2019-12-01'},
+    ],
+    'scikit-bio':[
+      {content: '0.18', start: '2016-05-01', end:'2016-11-01', py2:true},
+      {content: '0.19', start: '2016-11-02', end:'2017-12-01'},
+    ]
+
+  
+  }
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+  ]);
+
+
+
+  var groups = new vis.DataSet();
+  g=0;
+  i=0;
+  for (var gname  in data) {
+    g++;
+    groups.add({id: g, content: gname});
+    gr = data[gname];
+    for(var k in gr){
+      i++;
+      gr[k].id = i;
+      gr[k].group = g;
+      if(gr[k].py2) gr[k].className ='py2'
+      items.add(gr[k])
+    }
+  }
+
+  // Configuration for the Timeline
+  var options = {};
+
+  var options = {
+    groupOrder: 'group'  // groupOrder can be a property name or a sorting function
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+  timeline.setGroups(groups);
+  timeline.setItems(items);
+  timeline.addCustomTime(Date.parse('2020-01-01'))
+  window.groups = groups;
+  window.items = items;
+  window.timeline = timeline;
+
 });