akbertram · September 17, 2012 13:21
diff --git a/index.html b/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>
diff --git a/treemap.js b/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"; });
	}