akbertram/index.html

## index.html
<html>
<title>Dashboard</title>
<head>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.9.5"></script>
<style type="text/css">
.cell {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
  font-family: sans-serif;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  font-size: 10px;
}
button {
  font-size: 10px;
}
</style>

</head>
<body>
<div class='gallery' id='chart'>
  Color by: <select id='metric'>
    <option value="relExpPeriod">Scale of expenditure reporting period (%)</option>
    <option value="relStaffPeriod">Scale of time spending reporting period (%)</option>
    <option value="rateExp">Expenditure Scale Rating [-2,+2]</option>
    <option value="rateStaff">Time Rating [-2, +2]</option>
    <option value="rateProgress">Progress Level [-2, +2]</option>
    <option value="rateChange">Change Level [-2, +2]</option>
    <option value="rateProjRisk">Reputation Risk [-2, 0]</option>
    <option value="rateFinRisk">Financial Risk [-2, 0]</option>
    <option value="ratePartnerRisk">Partner Relation Risk [-2,0]</option>
    <option value="rateImplRisk">Implementation Risk [-2,0]</option>
  </select>
  Size by:
  <button class='first active' id='funding'>
    Funding Volume
  </button><button class='last' id='staff'>
    Total Staff Time
  </button>
<script src="treemap.js"></script>

</div>
</body>
</html>

## treemap.js
var width = 550,
    height = 400,
    color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.fields.yearFunding; });

var div = d3.select("#chart").append("div")
    .style("position", "relative")
    .style("width", width + "px")
    .style("height", height + "px");

var scriptBase = "https://script.google.com/a/macros/irc.nl/s/AKfycbyiqBcppT6nEo6FYVZQRAnGiKNnNrU_GqCgMqT6iyHo/dev";
var period = window.location.search.substring(1);

d3.json(scriptBase + "?action=treemap&period=" + period , function(json) {
  div.data([json])
      .selectAll("div")
      .data(treemap.nodes)
      .enter()
      .append("div")
      .attr("class", "cell")
      .call(cell)
      .text(function(d) { return d.children ? null : d.name; });

  d3.select("#staff").on("click", function() {
    div.selectAll("div")
        .data(treemap.value(function(d) { return d.fields.yearStaff; }))
        .transition()
        .duration(1500)
        .call(cell);

    d3.select("#funding").classed("active", true);
    d3.select("#staff").classed("active", false);
  });

  d3.select("#funding").on("click", function() {
    div.selectAll("div")
        .data(treemap.value(function(d) { return d.fields.yearFunding; }))
        .transition()
        .duration(1500)
        .call(cell);

    d3.select("#funding").classed("active", false);
    d3.select("#staff").classed("active", true);
  });

  var updateMetric = function() {
    var metricId = document.getElementById('metric').value;
    var scale = createScale(metricId);
    div.selectAll("div")
        .style("background", function(d) {
           if(d.fields) {
                value = d.fields[metricId];
                if(isNaN(parseFloat(value))) {
                   return null;
                } else {
	   	   return scale(value);
 		}
           }
         });
  };

  d3.select("#metric").on("change", updateMetric);

  updateMetric();
});

var relPctScale = function(pct) {
  if(pct > 1.5 || pct < 0.8) {
    return 'rgb(255,0,0)';
  } else if(pct > 1.1 || pct < 0.9) {
    return 'rgb(255,255,0)';
  } else {
    return 'rgb(0,255,0)';
  }
};

var rateScale = d3.scale.ordinal()
    .domain([-2, -1, 0, 1, 2])
    .range([ 	'rgb(255,   0,   0)',
  		'rgb(234, 153, 153)',
		'rgb(  0, 255,   0)',
		'rgb(  0, 255, 255)',
		'rgb(  0,   0, 255)']);


function createScale(fieldName) {
  if(fieldName.match(/rel(.*)/)) {
    return relPctScale;
  } else if(fieldName.match(/rate(.*)/)) {
    return rateScale;
  }
};

function cell() {
  this
      .style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
	<html>
	<title>Dashboard</title>
	<head>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.9.5"></script>
	<style type="text/css">
	.cell {
	border: solid 1px white;
	font: 10px sans-serif;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: 2px;
	font-family: sans-serif;
	}
	body {
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
	font-size: 10px;
	}
	button {
	font-size: 10px;
	}
	</style>

	</head>
	<body>
	<div class='gallery' id='chart'>
	Color by: <select id='metric'>
	<option value="relExpPeriod">Scale of expenditure reporting period (%)</option>
	<option value="relStaffPeriod">Scale of time spending reporting period (%)</option>
	<option value="rateExp">Expenditure Scale Rating [-2,+2]</option>
	<option value="rateStaff">Time Rating [-2, +2]</option>
	<option value="rateProgress">Progress Level [-2, +2]</option>
	<option value="rateChange">Change Level [-2, +2]</option>
	<option value="rateProjRisk">Reputation Risk [-2, 0]</option>
	<option value="rateFinRisk">Financial Risk [-2, 0]</option>
	<option value="ratePartnerRisk">Partner Relation Risk [-2,0]</option>
	<option value="rateImplRisk">Implementation Risk [-2,0]</option>
	</select>
	Size by:
	<button class='first active' id='funding'>
	Funding Volume
	</button><button class='last' id='staff'>
	Total Staff Time
	</button>
	<script src="treemap.js"></script>

	</div>
	</body>
	</html>
	var width = 550,
	height = 400,
	color = d3.scale.category20c();

	var treemap = d3.layout.treemap()
	.size([width, height])
	.sticky(true)
	.value(function(d) { return d.fields.yearFunding; });

	var div = d3.select("#chart").append("div")
	.style("position", "relative")
	.style("width", width + "px")
	.style("height", height + "px");

	var scriptBase = "https://script.google.com/a/macros/irc.nl/s/AKfycbyiqBcppT6nEo6FYVZQRAnGiKNnNrU_GqCgMqT6iyHo/dev";
	var period = window.location.search.substring(1);

	d3.json(scriptBase + "?action=treemap&period=" + period , function(json) {
	div.data([json])
	.selectAll("div")
	.data(treemap.nodes)
	.enter()
	.append("div")
	.attr("class", "cell")
	.call(cell)
	.text(function(d) { return d.children ? null : d.name; });

	d3.select("#staff").on("click", function() {
	div.selectAll("div")
	.data(treemap.value(function(d) { return d.fields.yearStaff; }))
	.transition()
	.duration(1500)
	.call(cell);

	d3.select("#funding").classed("active", true);
	d3.select("#staff").classed("active", false);
	});

	d3.select("#funding").on("click", function() {
	div.selectAll("div")
	.data(treemap.value(function(d) { return d.fields.yearFunding; }))
	.transition()
	.duration(1500)
	.call(cell);

	d3.select("#funding").classed("active", false);
	d3.select("#staff").classed("active", true);
	});

	var updateMetric = function() {
	var metricId = document.getElementById('metric').value;
	var scale = createScale(metricId);
	div.selectAll("div")
	.style("background", function(d) {
	if(d.fields) {
	value = d.fields[metricId];
	if(isNaN(parseFloat(value))) {
	return null;
	} else {
	return scale(value);
	}
	}
	});
	};

	d3.select("#metric").on("change", updateMetric);

	updateMetric();
	});

	var relPctScale = function(pct) {
	if(pct > 1.5 \|\| pct < 0.8) {
	return 'rgb(255,0,0)';
	} else if(pct > 1.1 \|\| pct < 0.9) {
	return 'rgb(255,255,0)';
	} else {
	return 'rgb(0,255,0)';
	}
	};

	var rateScale = d3.scale.ordinal()
	.domain([-2, -1, 0, 1, 2])
	.range([ 'rgb(255, 0, 0)',
	'rgb(234, 153, 153)',
	'rgb( 0, 255, 0)',
	'rgb( 0, 255, 255)',
	'rgb( 0, 0, 255)']);



	function createScale(fieldName) {
	if(fieldName.match(/rel(.*)/)) {
	return relPctScale;
	} else if(fieldName.match(/rate(.*)/)) {
	return rateScale;
	}
	};

	function cell() {
	this
	.style("left", function(d) { return d.x + "px"; })
	.style("top", function(d) { return d.y + "px"; })
	.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
	.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
	}