Timeline with 2 streams and events

forked from GitNoise's block: Timeline with 2 streams and events

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    
    
    .axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
  transform: rotate(45 0 0)
}

.events line, .events circle {
  stroke: darkslategray;
}

.events circle {
  fill: white;
}

.edu line, .work line {
  stroke: black;
  stroke-opacity: 0.4;
}

.edu rect, .work rect {
  fill-opacity: 0.8;
}

.events line {
  stroke-dasharray: 3mm;
  stroke-opacity: 0.5;
}

.txtBkgrnd rect {
  fill: white;
  fill-opacity: 0.8;
  stroke: black;
  stroke-width: 1px;
  stroke-opacity: 0.4;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.8em;
  
}
    
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg");
    
    d3.selection.prototype.moveToFront = function() {
			return this.each(function(){
				this.parentNode.appendChild(this);
			});
		};
		
		var adjustX = function(i) {
			return ((workEduTextDist - 25) + (i%3 * 25)) / Math.tan(Math.PI/4);
		};
		
		var eduData = [
			{
				start: new Date('2008-09-01'),
				end: new Date('2012-05-01'),
				text: 'Master, Disaster Management'
			},
			{
				start: new Date('2002-09-01'),
				end: new Date('2003-09-01'),
				text: 'MSc, Intelligent Systems'
			}
		];
		
		var workData = [
			{
				start: new Date('2004-02-01'),
				end: new Date('2005-01-01'),
				text: 'SFF - IT & Network admin'
			},
			{
				start: new Date('2005-02-01'),
				end: new Date('2005-05-01'),
				text: 'SodraFot - Web developer'
			},
			{
				start: new Date('2005-05-01'),
				end: new Date('2008-01-01'),
				text: 'Kentor - Consultant'
			},
			{
				start: new Date('2008-01-01'),
				end: new Date('2008-08-01'),
				text: 'Famento - Web developer'
			},
			{
				start: new Date('2009-05-01'),
				end: new Date('2011-10-01'),
				text: 'UNOPS - Web developer'
			},
			{
				start: new Date('2011-10-01'),
				end: new Date('2014-10-01'),
				text: 'Capgemini - Senior consultant'
			},
			{
				start: new Date('2014-10-01'),
				end: new Date(),
				text: 'Consid - Senior consultant'
			}
		];
		
		var eventData = [
			{ date: new Date('2006-04-20'), text: 'BizTalk 2006 course' },
			{ date: new Date('2012-04-20'), text: 'MSB Field staff, Disaster Response, induction course' },
			{ date: new Date('2013-03-10'), text: 'Expert Workshop - Bygg framtidens webb' },
			{ date: new Date('2014-08-15'), text: 'OpenKnowledge Festival' }];
		
		// configuration
		var config = {
			left: 50,
			right: 200,
			top: 50,
			bottom: 50,
			width: 1000,
			height: 500
		};

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js