cato- · June 16, 2016 08:56
diff --git a/.block b/.block
 border: yes
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  font: 10px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }
 .tick line{
    opacity: 0.2;
  }

 </style>
 <body>
 <div id="graph-001"></div>
 <div id="graph-002"></div>

 <div id="graph-003"></div>
 <div id="graph-004"></div>

 <script src="//d3js.org/d3.v3.min.js"></script>
 <script>
 function showGraph(uri, elem, selector) {
  
  var format = d3.time.format("%Y-%m-%d %H:%M:%S");
  
  var container = d3.select(elem);
  var elemWidth = container.node().getBoundingClientRect().width;
  
  var margin = {top: 20, right: 30, bottom: 20, left: 40};
  var width = elemWidth - margin.left - margin.right;
  var height = elemWidth*3./5. - margin.top - margin.bottom;
  
  var x = d3.time.scale().range([0, width]);
  
  var y = d3.scale.linear().range([height, 0]);
  
  var color = d3.scale.category10();
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .innerTickSize(-height)
      .tickFormat(d3.time.format('%H:%M'));
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .innerTickSize(-width)
      .orient("left");
  
  var stack = d3.layout.stack()
      .offset("zero")
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.value; });
  
  var nest = d3.nest()
      .key(selector);
  
  var area = d3.svg.area()
      .interpolate("cardinal")
      .x(function(d) { return x(d.date); })
      .y0(function(d) { return y(d.y0); })
      .y1(function(d) { return y(d.y0 + d.y); });
  
  var svg = container.append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.y0 + d.y); });
  
  d3.tsv(uri, function(error, data) {
    if (error) throw error;
  
    data.forEach(function(d) {
      d.date = format.parse(d.stamp);
      d.value = +d.listener;
    });
  
    var layers = stack(nest.entries(data));
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Listener");
  
    var l = svg.selectAll(".layer").data(layers).enter();
  
    l.append("path")
        .attr("class", "layer")
        .attr("d", function(d) { return area(d.values); })
        .style("opacity", "0.8")
        .attr("fill", function(d, i) { return color(d.key); });
  
    l.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values); })
        .style("fill", "none")
        .style("stroke-width", "2px")
        .attr("stroke", function(d, i) { return color(d.key); });
  
    var legend = container
      .append("div")
        .style('margin-left', margin.left+"px")
        .style('margin-right', margin.right+"px")
        .style('width', width+"px")
        .selectAll('.legend')
        .data(color.domain()).enter()
        .append('div')
          .style('display','inline-block')
          .style('margin','0.5em')
          .attr('class', 'legend');
  
    legend.append('div')
      .style('width', '1.2em')
      .style('height', '1.2em')
      .style('float', 'left')
      .style('margin-right', '0.5em')
      .style('background-color', color);
  
    legend.append('span')
      .text(function(d) { return d; });
  });
 };

 showGraph("sample.tsv", "#graph-001", function(d) { return d.hostname; });
 showGraph("sample.tsv", "#graph-002", function(d) { return d.mount; });

 showGraph("sample2.tsv", "#graph-003", function(d) { return d.hostname; });
 showGraph("sample2.tsv", "#graph-004", function(d) { return d.mount; });


 </script>
 </body>
diff --git a/sample.tsv b/sample.tsv
diff --git a/sample2.tsv b/sample2.tsv

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.tick line{
	opacity: 0.2;
	}

	</style>
	<body>
	<div id="graph-001"></div>
	<div id="graph-002"></div>

	<div id="graph-003"></div>
	<div id="graph-004"></div>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	function showGraph(uri, elem, selector) {

	var format = d3.time.format("%Y-%m-%d %H:%M:%S");

	var container = d3.select(elem);
	var elemWidth = container.node().getBoundingClientRect().width;

	var margin = {top: 20, right: 30, bottom: 20, left: 40};
	var width = elemWidth - margin.left - margin.right;
	var height = elemWidth*3./5. - margin.top - margin.bottom;

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

	var y = d3.scale.linear().range([height, 0]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.innerTickSize(-height)
	.tickFormat(d3.time.format('%H:%M'));

	var yAxis = d3.svg.axis()
	.scale(y)
	.innerTickSize(-width)
	.orient("left");

	var stack = d3.layout.stack()
	.offset("zero")
	.values(function(d) { return d.values; })
	.x(function(d) { return d.date; })
	.y(function(d) { return d.value; });

	var nest = d3.nest()
	.key(selector);

	var area = d3.svg.area()
	.interpolate("cardinal")
	.x(function(d) { return x(d.date); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });

	var svg = container.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var line = d3.svg.line()
	.interpolate("cardinal")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.y0 + d.y); });

	d3.tsv(uri, function(error, data) {
	if (error) throw error;

	data.forEach(function(d) {
	d.date = format.parse(d.stamp);
	d.value = +d.listener;
	});

	var layers = stack(nest.entries(data));

	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Listener");

	var l = svg.selectAll(".layer").data(layers).enter();

	l.append("path")
	.attr("class", "layer")
	.attr("d", function(d) { return area(d.values); })
	.style("opacity", "0.8")
	.attr("fill", function(d, i) { return color(d.key); });

	l.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("fill", "none")
	.style("stroke-width", "2px")
	.attr("stroke", function(d, i) { return color(d.key); });

	var legend = container
	.append("div")
	.style('margin-left', margin.left+"px")
	.style('margin-right', margin.right+"px")
	.style('width', width+"px")
	.selectAll('.legend')
	.data(color.domain()).enter()
	.append('div')
	.style('display','inline-block')
	.style('margin','0.5em')
	.attr('class', 'legend');

	legend.append('div')
	.style('width', '1.2em')
	.style('height', '1.2em')
	.style('float', 'left')
	.style('margin-right', '0.5em')
	.style('background-color', color);

	legend.append('span')
	.text(function(d) { return d; });
	});
	};

	showGraph("sample.tsv", "#graph-001", function(d) { return d.hostname; });
	showGraph("sample.tsv", "#graph-002", function(d) { return d.mount; });

	showGraph("sample2.tsv", "#graph-003", function(d) { return d.hostname; });
	showGraph("sample2.tsv", "#graph-004", function(d) { return d.mount; });


	</script>
	</body>