smerchek/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script src="https://raw.github.com/timrwood/moment/1.6.2/min/moment.min.js"></script>
<style>
html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
}

.chart rect {
  fill: steelblue;
  stroke: white;
}

.container {
  padding: 20px 50px 20px 50px;
}


.number-container {
  width: 250px;
  padding: 20px 10px 20px 10px;
  text-align: center;
  float: left;
}

.number-container label {
  text-transform: uppercase;
  font-size: .7em;
}

.number {
  font-size: 3em;
  font-weight: bold;
}

.clear {
  clear: both;
}
.node circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
<body>
  <h1>Trello Development Board: Comment Activity Over Last 30 Days</h1>
  <div class="container">
    <div id="avg" class="number-container">
      <div class="number">0</div>
      <label>Average Length of a Comment</label>
    </div>
    <div id="totalUsers" class="number-container">
      <div class="number">0</div>
      <label>Number of Users who left a comment</label>
    </div>
    <div id="totalCards" class="number-container">
      <div class="number">0</div>
      <label>Number of cards that received a comment</label>
    </div>
    <div class="clear"></div>
    <div id="histogram" class="center-chart"></div>
  </div>
</body>
<script>
var since = moment().subtract('days', 30).format("YYYY-MM-DD");
var url = "https://api.trello.com/1/boards/4d5ea62fd76aa1136000000c/actions?key=1d0195792b82217972daec46b3c6bc2a&filter=commentCard&limit=1000&since=" + since;
var comments;
$.getJSON(url, function(data) {
  comments = data;
  var duration = 3000;
  var averageCommentLength = d3.sum(comments, function(d) { return d.data.text.length; }) / comments.length;
  var tweenFunction = function(d) {
      var i = d3.interpolateRound(this.textContent, d);
      return function(t) {
        this.textContent = i(t);
      };
    };

  d3.select("#avg .number")
    .datum(averageCommentLength)
    .transition().ease("cubic-in-out").duration(duration)
    .tween("text", tweenFunction);

  var memberNest = d3.nest()
    .key(function(d) { return d.idMemberCreator; })
    .rollup(function (leaves) { return leaves.length; })
    .sortValues(d3.descending)
    .entries(comments);

  var cardNest = d3.nest()
    .key(function(d) { return d.data.card.id; })
    .rollup(function (leaves) { return leaves.length; })
    .sortValues(d3.descending)
    .entries(comments);

  d3.select("#totalUsers .number")
    .data([memberNest.length])
    .transition().ease("cubic-in-out").duration(duration)
    .tween("text", tweenFunction);

  d3.select("#totalCards .number")
    .data([cardNest.length])
    .transition().ease("cubic-in-out").duration(duration)
    .tween("text", tweenFunction);

  var dateNest = d3.nest()
    .key(function(d) { return moment(d.date).format("YYYY-MM-DD"); })
    .rollup(function (leaves) { return leaves.length; })
    .entries(comments);

  var dayOfWeekNest = d3.nest()
    .key(function(d) { return moment(d.date).format("YYYY-MM-DD"); })
    .rollup(function (leaves) { return leaves.length; })
    .entries(comments);

  var w = 20;
  var h = 160;

  var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, w]);
  var y = d3.scale.linear()
    .domain([0, 100])
    .rangeRound([0, h]);

  var chart = d3.select(".container").append("svg")
    .attr("class", "chart")
    .attr("width", w * dateNest.length - 1)
    .attr("height", h);

  chart.selectAll("rect")
     .data(dateNest)
     .enter().append("rect")
     .attr("x", function(d, i) { return x(i) - .5; })
     .attr("y", function(d) { return h - .5;})
     .attr("width", w)
     .transition().duration(duration).attr("y", function(d) { return h - y(d.values) - .5; })
     .attr("height", function(d) { return y(d.values); });
});


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
	<script src="https://raw.github.com/timrwood/moment/1.6.2/min/moment.min.js"></script>
	<style>
	html {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	}

	.chart rect {
	fill: steelblue;
	stroke: white;
	}

	.container {
	padding: 20px 50px 20px 50px;
	}


	.number-container {
	width: 250px;
	padding: 20px 10px 20px 10px;
	text-align: center;
	float: left;
	}

	.number-container label {
	text-transform: uppercase;
	font-size: .7em;
	}

	.number {
	font-size: 3em;
	font-weight: bold;
	}

	.clear {
	clear: both;
	}
	.node circle {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	font: 10px sans-serif;
	pointer-events: none;
	}

	</style>
	<body>
	<h1>Trello Development Board: Comment Activity Over Last 30 Days</h1>
	<div class="container">
	<div id="avg" class="number-container">
	<div class="number">0</div>
	<label>Average Length of a Comment</label>
	</div>
	<div id="totalUsers" class="number-container">
	<div class="number">0</div>
	<label>Number of Users who left a comment</label>
	</div>
	<div id="totalCards" class="number-container">
	<div class="number">0</div>
	<label>Number of cards that received a comment</label>
	</div>
	<div class="clear"></div>
	<div id="histogram" class="center-chart"></div>
	</div>
	</body>
	<script>
	var since = moment().subtract('days', 30).format("YYYY-MM-DD");
	var url = "https://api.trello.com/1/boards/4d5ea62fd76aa1136000000c/actions?key=1d0195792b82217972daec46b3c6bc2a&filter=commentCard&limit=1000&since=" + since;
	var comments;
	$.getJSON(url, function(data) {
	comments = data;
	var duration = 3000;
	var averageCommentLength = d3.sum(comments, function(d) { return d.data.text.length; }) / comments.length;
	var tweenFunction = function(d) {
	var i = d3.interpolateRound(this.textContent, d);
	return function(t) {
	this.textContent = i(t);
	};
	};

	d3.select("#avg .number")
	.datum(averageCommentLength)
	.transition().ease("cubic-in-out").duration(duration)
	.tween("text", tweenFunction);

	var memberNest = d3.nest()
	.key(function(d) { return d.idMemberCreator; })
	.rollup(function (leaves) { return leaves.length; })
	.sortValues(d3.descending)
	.entries(comments);

	var cardNest = d3.nest()
	.key(function(d) { return d.data.card.id; })
	.rollup(function (leaves) { return leaves.length; })
	.sortValues(d3.descending)
	.entries(comments);

	d3.select("#totalUsers .number")
	.data([memberNest.length])
	.transition().ease("cubic-in-out").duration(duration)
	.tween("text", tweenFunction);

	d3.select("#totalCards .number")
	.data([cardNest.length])
	.transition().ease("cubic-in-out").duration(duration)
	.tween("text", tweenFunction);

	var dateNest = d3.nest()
	.key(function(d) { return moment(d.date).format("YYYY-MM-DD"); })
	.rollup(function (leaves) { return leaves.length; })
	.entries(comments);

	var dayOfWeekNest = d3.nest()
	.key(function(d) { return moment(d.date).format("YYYY-MM-DD"); })
	.rollup(function (leaves) { return leaves.length; })
	.entries(comments);

	var w = 20;
	var h = 160;

	var x = d3.scale.linear()
	.domain([0, 1])
	.range([0, w]);
	var y = d3.scale.linear()
	.domain([0, 100])
	.rangeRound([0, h]);

	var chart = d3.select(".container").append("svg")
	.attr("class", "chart")
	.attr("width", w * dateNest.length - 1)
	.attr("height", h);

	chart.selectAll("rect")
	.data(dateNest)
	.enter().append("rect")
	.attr("x", function(d, i) { return x(i) - .5; })
	.attr("y", function(d) { return h - .5;})
	.attr("width", w)
	.transition().duration(duration).attr("y", function(d) { return h - y(d.values) - .5; })
	.attr("height", function(d) { return y(d.values); });
	});


	</script>