eiri/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Random timelines with a bit a shadow.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: 'Josefin Sans', sans-serif;
}
.axis text {
  font-size: 11px;
}

.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<script>

var margin = 15;
var width = 960 -  2 * margin;
var height = 500 - 2 * margin;
var color = d3.scale.category20c();

var start = moment().startOf('day').toDate();
var end = moment().endOf('day').add('s',1).toDate();

var x = d3.time.scale()
  .domain([start, end])
  .range([0, width]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .ticks(d3.time.hours, 1)
  .tickFormat(d3.time.format("%H:%M"));

var data = [];
for (var i = 0; i <= 24; i++) {
  var hour = Math.floor((Math.random()*23)+1);
  var minute = Math.floor((Math.random()*59)+1);
  var start = moment({hour: hour, minute: minute});
  var stop = start.clone();
  stop.add('minute', Math.floor((Math.random() * 60 * 3)+1));
  data.push([start.toDate(), stop.toDate()]);
}

var svg = d3.select("body").append("svg")
    .attr("width", width + 2 * margin)
    .attr("height", height + 2 * margin)
  .append("g")
    .attr("transform", "translate(" + margin + "," + margin + ")");

var defs = svg.append('defs');
var filter = defs.append('filter')
    .attr('id', 'shadow');

filter.append('feOffset')
  .attr('result', 'offOut')
  .attr('in', 'SourceAlpha')
  .attr('dx', 2)
  .attr('dy', 3);

filter.append('feColorMatrix')
  .attr('in', 'SourceGraphic')
  .attr('type', 'hueRotate')
  .attr('values', '180');

filter.append('feGaussianBlur')
  .attr('result', 'blurOut')
  .attr('in', 'offOut')
  .attr('stdDeviation', 3);

filter.append('feBlend')
  .attr('in', 'SourceGraphic')
  .attr('in2', 'blurOut')
  .attr('mode', 'normal');

svg.selectAll(".timeline")
    .data(data)
  .enter().append("g")
    .attr("class", "timeline")
  .append("rect")
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("y", function(d, i) { return margin * i; })
    .attr("height", margin - 4)
    .attr("fill", function(d, i) { return color(i); })
    .attr("filter", "url(#shadow)")
svg.append("g")
  .attr("class", "x-axis axis")
  .attr("transform", "translate(0," + (height - margin) + ")")
  .call(xAxis);

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400' rel='stylesheet' type='text/css'>
	<style>
	body {
	font-family: 'Josefin Sans', sans-serif;
	}
	.axis text {
	font-size: 11px;
	}

	.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
	<script>

	var margin = 15;
	var width = 960 - 2 * margin;
	var height = 500 - 2 * margin;
	var color = d3.scale.category20c();

	var start = moment().startOf('day').toDate();
	var end = moment().endOf('day').add('s',1).toDate();

	var x = d3.time.scale()
	.domain([start, end])
	.range([0, width]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(d3.time.hours, 1)
	.tickFormat(d3.time.format("%H:%M"));

	var data = [];
	for (var i = 0; i <= 24; i++) {
	var hour = Math.floor((Math.random()*23)+1);
	var minute = Math.floor((Math.random()*59)+1);
	var start = moment({hour: hour, minute: minute});
	var stop = start.clone();
	stop.add('minute', Math.floor((Math.random() * 60 * 3)+1));
	data.push([start.toDate(), stop.toDate()]);
	}

	var svg = d3.select("body").append("svg")
	.attr("width", width + 2 * margin)
	.attr("height", height + 2 * margin)
	.append("g")
	.attr("transform", "translate(" + margin + "," + margin + ")");

	var defs = svg.append('defs');
	var filter = defs.append('filter')
	.attr('id', 'shadow');

	filter.append('feOffset')
	.attr('result', 'offOut')
	.attr('in', 'SourceAlpha')
	.attr('dx', 2)
	.attr('dy', 3);

	filter.append('feColorMatrix')
	.attr('in', 'SourceGraphic')
	.attr('type', 'hueRotate')
	.attr('values', '180');

	filter.append('feGaussianBlur')
	.attr('result', 'blurOut')
	.attr('in', 'offOut')
	.attr('stdDeviation', 3);

	filter.append('feBlend')
	.attr('in', 'SourceGraphic')
	.attr('in2', 'blurOut')
	.attr('mode', 'normal');

	svg.selectAll(".timeline")
	.data(data)
	.enter().append("g")
	.attr("class", "timeline")
	.append("rect")
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("y", function(d, i) { return margin * i; })
	.attr("height", margin - 4)
	.attr("fill", function(d, i) { return color(i); })
	.attr("filter", "url(#shadow)")
	svg.append("g")
	.attr("class", "x-axis axis")
	.attr("transform", "translate(0," + (height - margin) + ")")
	.call(xAxis);

	</script>