jfsiii · June 2, 2016 00:32
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/barchart.css b/barchart.css
 .bar rect {
  fill: steelblue;
  shape-rendering: crispEdges;
 }

 .bar text {
 	fill: #fff;
 }

 .axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }
diff --git a/barchart.js b/barchart.js
 function BarChart() {
  var margin = {top: 25, right: 25, bottom: 25, left: 25},
    xValue = function(d) { return d.x; },
    yValue = function(d) { return d.y; },
    tickFormat = function(d, i) { return d3.format(".1s")(d) },
    xScale = d3.scaleLinear(),
    yScale = d3.scaleLinear(),
    xAxis = d3.axisBottom().scale(xScale).tickSize(6, 0),
    yAxis = d3.axisLeft().scale(yScale);

  function chart(selection) {
    selection.each(function(data) {
      var el = d3.select(this).node();
      width = el.clientWidth - margin.left - margin.right;
      height = el.clientHeight - margin.top - margin.bottom;      

      var dx = (data[0].dx === undefined)
      	? function() { return width/data.length - 1 }
      	: function(d){ return xValue(d.dx) - 1 };

      // Update the x-scale.
      var xDomain = d3.extent(data, xValue);

      xScale
          .domain(xDomain)
          .range([0, width]);

      // Update the y-scale.
      var yDomain = [0, d3.max(data, yValue)];

      yScale
          .domain(yDomain)
          .range([height, 0]);

      // Enter svg
      var svg = d3.select(this).selectAll("svg").data([data]),
      gEnter = svg.enter().append("svg")
      	.append("g")
      	.classed("plot",true);

      // Enter Axes
      gEnter.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      gEnter.append("g")
        .attr("class", "y axis")
        .call(yAxis)

      //Enter Bars
      var bar = gEnter.selectAll(".bar").data(data),
      barEnter = bar.enter().append("g")
        .attr("class", "bar");

      barEnter.append("rect");
      barEnter.append("text");

      // Update the outer dimensions.
      svg
        .attr("width", width + margin.left + margin.right)
 				.attr("height", height + margin.top + margin.bottom);

      // Update the inner dimensions.
      var g = svg.select("g.plot")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");                

      // Update the x-axis.
      g.select(".x.axis")
          .attr("transform", "translate(0," + yScale.range()[0] + ")")
          .call(xAxis);

      // Update the bars
      g.selectAll("g.bar")
        .attr("transform", function(d){
        		return "translate(" + xScale(xValue(d)) + "," 
 				       + yScale(yValue(d)) + ")"
      	});
      g.selectAll(".bar rect")	
        .attr("width", dx)
        .attr("height", function(d) { return height - yScale(yValue(d)); })

      g.selectAll(".bar text")
        .attr("dy", ".75em")
        .attr("x", function(d) { return  .5*dx(d); })
        .attr("y", 6) //stand off from top of bar
        .attr("text-anchor", "middle")
        .text(d => tickFormat(yValue(d)));
    });
  }

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return chart;
  };

  chart.xScale = function (_) {
    if (!arguments.length) return xScale;
    xScale = _;
    return chart;
  };
  
  chart.yScale = function (_) {
    if (!arguments.length) return yScale;
    yScale = _;
    return chart;
  };
  
  chart.xAxis = function (_) {
    if (!arguments.length) return xAxis;
    xAxis = _;
    return chart;
  };
  
  chart.yAxis = function (_) {
    if (!arguments.length) return yAxis;
    yAxis = _;
    return chart;
  };

  return chart;
 }
diff --git a/dashboard.js b/dashboard.js
 // change to any of the .CSV files (latency, duration, etc)
 // e.g. blocked, connected, duration, latency, req_body, res_body, rx, service, tx
 var dataPath = "latency.csv";
 var heatmap = Heatmap();
 var barChart = BarChart()

 var parseDate = d3.timeParse("%Y-%m-%d-%H");
 var formatDate = d3.timeFormat("%m/%d @ %H");
 function coerceTypes(d) {
  d.date = parseDate(d.date);
  d.bucket = +d.bucket;
  d.count = +d.count;
 }

 d3.csv(dataPath, function(error, rows) { window.rows = rows
  if (error) throw error;

  // Coerce the CSV data to the appropriate types.
  rows.forEach(coerceTypes);

  var keys = {
    bucket: d => d.bucket,
    date: _.flow(d => d.date, formatDate)
  };

  var nest = {
    byBucket: d3.nest().key(keys.bucket),
    byDate: d3.nest().key(keys.date)
  };

  var map = {
    byBucket: nest.byBucket.map(rows, d3.map),
    byDate: nest.byDate.map(rows, d3.map)
  };

 	d3.select('.heatmap-container')
    .datum(rows)
    .call(heatmap)
  
  var histoContainer = d3.select('.histogram-container')
  var tooltip = heatmap.svg().append('text')
    .attr("transform", "translate(" + (heatmap.width()+70) + ", 200)")
    .attr("text-anchor", "end")

  heatmap.chart()
    .on('mouseover', function (d, i, all) {
      var histogram = map.byDate.get(keys.date(d))
      var data2 = histogram.map(d => ({x: d.bucket, y: d.count }))

      histoContainer
        .datum(data2)
        .call(barChart);

      var message = d.count + ' of ' + all.length + ' @ ' + d.bucket
      tooltip.text(message); 
    })
    .on('mouseout', function (d) { tooltip.text('') })

 });
diff --git a/heatmap.js b/heatmap.js
 function Heatmap() {
  var margin = {
    top: 20, right: 100, bottom: 20, left: 50
  };

  var formatDate = d3.timeFormat("%m/%d @ %H"),
      tickFormat = d3.format(".1s")

  var x = d3.scaleTime(),
      y = d3.scaleLinear(),
      z = d3.scaleLinear();

  var xValue = function(d) { return d.date; },
      binAccessor = function(d) { return d.bucket; },
      yValue = function(d) { return d.count; };

  var xAxis = d3.axisBottom(x).tickFormat(formatDate);
  var yAxis = d3.axisLeft(y).tickFormat(tickFormat);
 	var width, height, svg, chart;

  // The size of the buckets in the CSV data file.
  // This could be inferred from the data if it weren't sparse.
  var dayMs = 864e5,
      xStep = dayMs/24;

  function drawChart(data) {

    var el = d3.select(this).node();
    width = el.clientWidth - margin.left - margin.right;
    height = el.clientHeight - margin.top - margin.bottom;      

    // Compute the scale domains.
    x.domain(d3.extent(data, xValue));
    y.domain(d3.extent(data, binAccessor))
    z.domain(d3.extent(data, yValue));

    // Extend the x-domain to fit the last bucket.
    x.domain([x.domain()[0], +x.domain()[1] + xStep]);

    x.range([0, width])
    y.range([height, 0])
    z.range(["white", "steelblue"])

    xAxis.tickSize(-height)
    yAxis.tickSize(-width)

    svg = d3.select(this)
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + (3*margin.bottom))
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");      

    // Display the tiles for each non-zero bucket.
    chart = svg.selectAll(".tile")
        .data(data)
      .enter().append("rect")
        .attr("class", "tile")
        .attr("x", _.flow(xValue, x))
        .attr("y", _.flow(binAccessor, y))
        .attr("width", x(xStep) - x(0))
        .attr("height", y(0) - y(100))
        .style("fill", _.flow(yValue, z))
      ;

    // Add a legend for the color values.
    var legend = svg.selectAll(".legend")
        .data(z.ticks(6).slice(1).reverse())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { 
          return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; 
        });

    legend.append("rect")
        .attr("width", 20)
        .attr("height", 20)
        .style("fill", z);

    legend.append("text")
        .attr("x", 26)
        .attr("y", 10)
        .attr("dy", ".35em")
        .text(tickFormat);

    svg.append("text")
        .attr("class", "label")
        .attr("x", width + 20)
        .attr("y", 10)
        .attr("dy", ".35em")
        .text("Count");
    
    // Add an x-axis with label.
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .attr("text-anchor", "end")
        .text("Date");

    // Add a y-axis with label.
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("class", "label")
        .attr("y", 6)
        .attr("dy", ".71em")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-90)")
        .text("Milliseconds")
    ;

  }

  function chart(selection) {
    selection.each(drawChart);
  }

  chart.chart = function (_) {
    if (!arguments.length) return chart;
    chart = _;
    return chart;
  }
  chart.svg = function (_) {
    if (!arguments.length) return svg;
    svg = _;
    return svg;
  };
 	
  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return chart;
  };

  chart.xScale = function (_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };
  
  chart.yScale = function (_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };
  
  chart.xAxis = function (_) {
    if (!arguments.length) return xAxis;
    xAxis = _;
    return chart;
  };
  
  chart.yAxis = function (_) {
    if (!arguments.length) return yAxis;
    yAxis = _;
    return chart;
  };
  
  return chart;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="barchart.css" />
 	</head>
  <body>
    <div class="heatmap-container"></div>
    <div class="histogram-container"></div>

    <script src="//d3js.org/d3.v4.0.0-alpha.44.js"></script>
    <script src="//npmcdn.com/lodash/lodash.min.js"></script>
    <script src="barchart.js"></script>
    <script src="heatmap.js"></script>
    <script src="dashboard.js"></script>
  </body>
 </html>
diff --git a/latency.csv b/latency.csv
diff --git a/styles.css b/styles.css
 body {
  font: 10px sans-serif;
 }

 .heatmap-container, .histogram-container {
  height: 50vh;
 	width: 100vw;
  border: 1px dashed black;
 }

 .label {
  font-weight: bold;
 }

 .tile {
  shape-rendering: crispEdges;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }
	.bar rect {
	fill: steelblue;
	shape-rendering: crispEdges;
	}

	.bar text {
	fill: #fff;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	function BarChart() {
	var margin = {top: 25, right: 25, bottom: 25, left: 25},
	xValue = function(d) { return d.x; },
	yValue = function(d) { return d.y; },
	tickFormat = function(d, i) { return d3.format(".1s")(d) },
	xScale = d3.scaleLinear(),
	yScale = d3.scaleLinear(),
	xAxis = d3.axisBottom().scale(xScale).tickSize(6, 0),
	yAxis = d3.axisLeft().scale(yScale);

	function chart(selection) {
	selection.each(function(data) {
	var el = d3.select(this).node();
	width = el.clientWidth - margin.left - margin.right;
	height = el.clientHeight - margin.top - margin.bottom;

	var dx = (data[0].dx === undefined)
	? function() { return width/data.length - 1 }
	: function(d){ return xValue(d.dx) - 1 };

	// Update the x-scale.
	var xDomain = d3.extent(data, xValue);

	xScale
	.domain(xDomain)
	.range([0, width]);

	// Update the y-scale.
	var yDomain = [0, d3.max(data, yValue)];

	yScale
	.domain(yDomain)
	.range([height, 0]);

	// Enter svg
	var svg = d3.select(this).selectAll("svg").data([data]),
	gEnter = svg.enter().append("svg")
	.append("g")
	.classed("plot",true);

	// Enter Axes
	gEnter.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	gEnter.append("g")
	.attr("class", "y axis")
	.call(yAxis)

	//Enter Bars
	var bar = gEnter.selectAll(".bar").data(data),
	barEnter = bar.enter().append("g")
	.attr("class", "bar");

	barEnter.append("rect");
	barEnter.append("text");

	// Update the outer dimensions.
	svg
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	// Update the inner dimensions.
	var g = svg.select("g.plot")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Update the x-axis.
	g.select(".x.axis")
	.attr("transform", "translate(0," + yScale.range()[0] + ")")
	.call(xAxis);

	// Update the bars
	g.selectAll("g.bar")
	.attr("transform", function(d){
	return "translate(" + xScale(xValue(d)) + ","
	+ yScale(yValue(d)) + ")"
	});
	g.selectAll(".bar rect")
	.attr("width", dx)
	.attr("height", function(d) { return height - yScale(yValue(d)); })

	g.selectAll(".bar text")
	.attr("dy", ".75em")
	.attr("x", function(d) { return .5*dx(d); })
	.attr("y", 6) //stand off from top of bar
	.attr("text-anchor", "middle")
	.text(d => tickFormat(yValue(d)));
	});
	}

	chart.margin = function(_) {
	if (!arguments.length) return margin;
	margin = _;
	return chart;
	};

	chart.width = function(_) {
	if (!arguments.length) return width;
	width = _;
	return chart;
	};

	chart.height = function(_) {
	if (!arguments.length) return height;
	height = _;
	return chart;
	};

	chart.x = function(_) {
	if (!arguments.length) return xValue;
	xValue = _;
	return chart;
	};

	chart.y = function(_) {
	if (!arguments.length) return yValue;
	yValue = _;
	return chart;
	};

	chart.xScale = function (_) {
	if (!arguments.length) return xScale;
	xScale = _;
	return chart;
	};

	chart.yScale = function (_) {
	if (!arguments.length) return yScale;
	yScale = _;
	return chart;
	};

	chart.xAxis = function (_) {
	if (!arguments.length) return xAxis;
	xAxis = _;
	return chart;
	};

	chart.yAxis = function (_) {
	if (!arguments.length) return yAxis;
	yAxis = _;
	return chart;
	};

	return chart;
	}
	// change to any of the .CSV files (latency, duration, etc)
	// e.g. blocked, connected, duration, latency, req_body, res_body, rx, service, tx
	var dataPath = "latency.csv";
	var heatmap = Heatmap();
	var barChart = BarChart()

	var parseDate = d3.timeParse("%Y-%m-%d-%H");
	var formatDate = d3.timeFormat("%m/%d @ %H");
	function coerceTypes(d) {
	d.date = parseDate(d.date);
	d.bucket = +d.bucket;
	d.count = +d.count;
	}

	d3.csv(dataPath, function(error, rows) { window.rows = rows
	if (error) throw error;

	// Coerce the CSV data to the appropriate types.
	rows.forEach(coerceTypes);

	var keys = {
	bucket: d => d.bucket,
	date: _.flow(d => d.date, formatDate)
	};

	var nest = {
	byBucket: d3.nest().key(keys.bucket),
	byDate: d3.nest().key(keys.date)
	};

	var map = {
	byBucket: nest.byBucket.map(rows, d3.map),
	byDate: nest.byDate.map(rows, d3.map)
	};

	d3.select('.heatmap-container')
	.datum(rows)
	.call(heatmap)

	var histoContainer = d3.select('.histogram-container')
	var tooltip = heatmap.svg().append('text')
	.attr("transform", "translate(" + (heatmap.width()+70) + ", 200)")
	.attr("text-anchor", "end")

	heatmap.chart()
	.on('mouseover', function (d, i, all) {
	var histogram = map.byDate.get(keys.date(d))
	var data2 = histogram.map(d => ({x: d.bucket, y: d.count }))

	histoContainer
	.datum(data2)
	.call(barChart);

	var message = d.count + ' of ' + all.length + ' @ ' + d.bucket
	tooltip.text(message);
	})
	.on('mouseout', function (d) { tooltip.text('') })

	});
	function Heatmap() {
	var margin = {
	top: 20, right: 100, bottom: 20, left: 50
	};

	var formatDate = d3.timeFormat("%m/%d @ %H"),
	tickFormat = d3.format(".1s")

	var x = d3.scaleTime(),
	y = d3.scaleLinear(),
	z = d3.scaleLinear();

	var xValue = function(d) { return d.date; },
	binAccessor = function(d) { return d.bucket; },
	yValue = function(d) { return d.count; };

	var xAxis = d3.axisBottom(x).tickFormat(formatDate);
	var yAxis = d3.axisLeft(y).tickFormat(tickFormat);
	var width, height, svg, chart;

	// The size of the buckets in the CSV data file.
	// This could be inferred from the data if it weren't sparse.
	var dayMs = 864e5,
	xStep = dayMs/24;

	function drawChart(data) {

	var el = d3.select(this).node();
	width = el.clientWidth - margin.left - margin.right;
	height = el.clientHeight - margin.top - margin.bottom;

	// Compute the scale domains.
	x.domain(d3.extent(data, xValue));
	y.domain(d3.extent(data, binAccessor))
	z.domain(d3.extent(data, yValue));

	// Extend the x-domain to fit the last bucket.
	x.domain([x.domain()[0], +x.domain()[1] + xStep]);

	x.range([0, width])
	y.range([height, 0])
	z.range(["white", "steelblue"])

	xAxis.tickSize(-height)
	yAxis.tickSize(-width)

	svg = d3.select(this)
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + (3*margin.bottom))
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Display the tiles for each non-zero bucket.
	chart = svg.selectAll(".tile")
	.data(data)
	.enter().append("rect")
	.attr("class", "tile")
	.attr("x", _.flow(xValue, x))
	.attr("y", _.flow(binAccessor, y))
	.attr("width", x(xStep) - x(0))
	.attr("height", y(0) - y(100))
	.style("fill", _.flow(yValue, z))
	;

	// Add a legend for the color values.
	var legend = svg.selectAll(".legend")
	.data(z.ticks(6).slice(1).reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) {
	return "translate(" + (width + 20) + "," + (20 + i * 20) + ")";
	});

	legend.append("rect")
	.attr("width", 20)
	.attr("height", 20)
	.style("fill", z);

	legend.append("text")
	.attr("x", 26)
	.attr("y", 10)
	.attr("dy", ".35em")
	.text(tickFormat);

	svg.append("text")
	.attr("class", "label")
	.attr("x", width + 20)
	.attr("y", 10)
	.attr("dy", ".35em")
	.text("Count");

	// Add an x-axis with label.
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.attr("text-anchor", "end")
	.text("Date");

	// Add a y-axis with label.
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("y", 6)
	.attr("dy", ".71em")
	.attr("text-anchor", "end")
	.attr("transform", "rotate(-90)")
	.text("Milliseconds")
	;

	}

	function chart(selection) {
	selection.each(drawChart);
	}

	chart.chart = function (_) {
	if (!arguments.length) return chart;
	chart = _;
	return chart;
	}
	chart.svg = function (_) {
	if (!arguments.length) return svg;
	svg = _;
	return svg;
	};

	chart.margin = function(_) {
	if (!arguments.length) return margin;
	margin = _;
	return chart;
	};

	chart.width = function(_) {
	if (!arguments.length) return width;
	width = _;
	return chart;
	};

	chart.height = function(_) {
	if (!arguments.length) return height;
	height = _;
	return chart;
	};

	chart.x = function(_) {
	if (!arguments.length) return xValue;
	xValue = _;
	return chart;
	};

	chart.y = function(_) {
	if (!arguments.length) return yValue;
	yValue = _;
	return chart;
	};

	chart.xScale = function (_) {
	if (!arguments.length) return x;
	x = _;
	return chart;
	};

	chart.yScale = function (_) {
	if (!arguments.length) return y;
	y = _;
	return chart;
	};

	chart.xAxis = function (_) {
	if (!arguments.length) return xAxis;
	xAxis = _;
	return chart;
	};

	chart.yAxis = function (_) {
	if (!arguments.length) return yAxis;
	yAxis = _;
	return chart;
	};

	return chart;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="styles.css" />
	<link rel="stylesheet" href="barchart.css" />
	</head>
	<body>
	<div class="heatmap-container"></div>
	<div class="histogram-container"></div>

	<script src="//d3js.org/d3.v4.0.0-alpha.44.js"></script>
	<script src="//npmcdn.com/lodash/lodash.min.js"></script>
	<script src="barchart.js"></script>
	<script src="heatmap.js"></script>
	<script src="dashboard.js"></script>
	</body>
	</html>
	body {
	font: 10px sans-serif;
	}

	.heatmap-container, .histogram-container {
	height: 50vh;
	width: 100vw;
	border: 1px dashed black;
	}

	.label {
	font-weight: bold;
	}

	.tile {
	shape-rendering: crispEdges;
	}

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