hubgit/app.js

## app.js
'use strict';

function ready(data){
	var nodes = document.querySelectorAll('script[type="text/eval+javascript"]');

	Array.prototype.forEach.call(nodes, function(node) {
		var script = node.innerHTML.trim();

		var figure = document.createElement('figure');
		node.parentNode.insertBefore(figure, node);
		node.parentNode.removeChild(node);

		var code = document.createElement('code');
		code.className = 'prettyprint lang-js';
		code.innerHTML = script;
		figure.appendChild(code);

		var samp = document.createElement('samp');
		figure.appendChild(samp);

		(function(script, node) {
			var output;

			try {
				var output = new Function('data', script)(data);

				if (output) {
					if (output instanceof HTMLElement) {
						samp.appendChild(output);
					} else {
						samp.textContent = JSON.stringify(output, null, 2);
					}
				}
			} catch (e) {
				samp.className = 'error';
				samp.textContent = e.message;
			}
		})(code.textContent, samp);
	});

	prettyPrint();
}

## data.csv

          
            id
            name
            priority
            who
            time
            status

            
              T-024
              Organisation list in directory
              MUST
              Joe
              5
              Complete

            
              T-015
              Make term Commissions customisable
              MUST
              Natasha
              6
              Complete

            
              T-016
              Comments popup on select rates
              MUST
              Mike
              3
              In Progress

            
              T-0169
              Upgrade Centos Box
              MUST
              Joe
              2
              In Progress

            
              T-013
              Search in Documents on selected folder
              MUST
              Natasha
              6
              In Progress

            
              T-014
              Separate Document system for LA and Legals
              MUST
              Joe
              9
              In Progress

            
              T-017
              Demo of Look and Feel of Documents front end
              MUST
              Natasha
              5
              In Progress

            
              T-021
              Fix error where forum filename is greater than 100chars
              MUST
              Mike
              4
              Not Started

            
              T-025
              Fix admin so structure of categories displayed
              MUST
              Mike
              2.5
              Complete

            
              T-027
              Reorganise git repos in Assembla
              MUST
              Joe
              3
              Not Started

            
              T-033
              Tree not showing correctly in documents
              MUST
              Natasha
              1
              In Progress

            
              T-052
              Add Cacheing
              MUST
              Mike
              1.5
              Complete

            
              T-055
              Allow custom ordering of document categories
              MUST
              Joe
              0.5
              Not Started

            
              T-056
              Pressing enter on date button triggers cancel
              MUST
              Joe
              1
              Not Started

            
              T-057
              Ajax not working on IE when selecting org
              MUST
              Natasha
              6
              Not Started

            
              T-060
              Send Reminder Email as required
              SHOULD
              Mike
              3
              Complete

            
              T-061
              Attach Document to response in Forum
              SHOULD
              Joe
              4
              Not Started

            
              T-062
              Forum thread notifications
              SHOULD
              Natasha
              9
              Complete

            
              T-063
              Group email notification
              SHOULD
              Mike
              8
              In Progress

            
              T-064
              Admin can see Who is logged in 
              SHOULD
              Joe
              9
              Not Started

            
              T-067
              Extend Audit Trail
              SHOULD
              Natasha
              12
              Complete

            
              T-068
              Maintenance Links
              SHOULD
              Mike
              4
              Complete

            
              T-094
              Browse prices button
              SHOULD
              Joe
              6
              Not Started

            
              T-095
              Group email to be only available to the administrator
              SHOULD
              Natasha
              5
              Complete

            
              T-096
              Update cribsheet
              COULD
              Mike
              2
              Not Started

            
              T-0103
              Awarded missing from Estimated Tab
              COULD
              Joe
              7
              Complete

            
              T-0105
              New cribsheet
              COULD
              Natasha
              7
              Not Started

            
              T-0111
              Document not being added on forum response
              COULD
              Mike
              6
              Not Started

            
              T-0114
              Can't delete users once active
              WISH
              Joe
              3
              Not Started

            
              T-0125
              Add course organiser on notification
              WISH
              Natasha
              2.5
              In Progress

            
              T-0126
              Setup demonstration system for Demo
              MUST
              Joe
              3
              Not Started

            
              T-0133
              Fix forum pagination problem properly
              MUST
              Natasha
              3
              Not Started

            
              T-0145
              In Directory, tickbox to select all filtered users
              MUST
              Joe
              3
              Complete

            
              T-0146
              Merge user and user profile in admin
              MUST
              Natasha
              2
              Not Started

            
              T-0147
              Have multiple documents on an estimate
              MUST
              Mike
              2
              Not Started

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 Nesting Examples</title>

<!-- styles -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<xmp class="container" theme="united">

<!-- elements -->

# D3 Nest examples

Group by status

<script type="text/eval+javascript">
return d3.nest().key(function(d)  {
	return d.status;
}).entries(data);
</script>

## Simple two level nest

Group by status then priority

<script type="text/eval+javascript">
return d3.nest().key(function(d) {
	return d.status;
}).key(function(d) {
	return d.priority;
}).entries(data);
</script>

## Use rollup to count leaves

The leaf level is replaced by a value at the parent level

<script type="text/eval+javascript">
return d3.nest().key(function(d) {
	return d.status;
}).key(function(d) {
	return d.priority;
}).rollup(function(leaves) {
	return leaves.length;
}).entries(data);
</script>

## Rollup does sums as well

Can't have two rollups, but can return an object/array

<script type="text/eval+javascript">
return d3.nest().key(function(d) {
	return d.status;
}).key(function(d) {
	return d.priority;
}).rollup(function(leaves) {
	return {
		length: leaves.length,
		total_time: d3.sum(leaves, function(d) {
			return parseFloat(d.time);
		})
	}
}).entries(data);
</script>

## Rollup everything to get a grand total of number of lines

No key

<script type="text/eval+javascript">
return d3.nest().rollup(function(leaves) {
	return leaves.length;
}).entries(data);
</script>

## Sorting

Each level can be sorted by key - a simple ascending or descending...

<script type="text/eval+javascript">
return d3.nest().key(function(d) {
	return d.status;
}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
}).sortKeys(d3.descending).rollup(function(leaves) {
	return leaves.length;
}).entries(data);
</script>

## Sorting - custom order

Status, fortuitously, can be sorted in ascending order, but Priority requires a custom order. Create an list in the order you want and use indexOf to create the order comparator function.

<script type="text/eval+javascript">
var priorities = ['MUST', 'SHOULD', 'COULD', 'WISH'];

return d3.nest().key(function(d) {
	return d.status;
}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
}).sortKeys(function(a,b) {
	return priorities.indexOf(a) - priorities.indexOf(b);
}).rollup(function(leaves) {
	return leaves.length;
}).entries(data);
</script>

## Sorting - sort the leaves as well

Use sortValue to sort the leaves - sort by time with smallest first

<script type="text/eval+javascript">
var priorities = ['MUST', 'SHOULD', 'COULD', 'WISH'];

return d3.nest().key(function(d) {
	return d.status;
}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
}).sortKeys(function(a,b) {
	return priorities.indexOf(a) - priorities.indexOf(b);
}).sortValues(function(a,b) {
	return parseFloat(a.time) - parseFloat(b.time);
}).entries(data);
</script>

## Sorting - sort the leaves as well

Use sortValue to sort the leaves - sort by person this time.

<script type="text/eval+javascript">
var priorities = ['MUST', 'SHOULD', 'COULD', 'WISH'];

return d3.nest().key(function(d) {
	return d.status;
}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
}).sortKeys(function(a,b) {
	return priorities.indexOf(a) - priorities.indexOf(b);
}).sortValues(function(a,b) {
	return a.who &lt; b.who ? -1 : 1;
}).entries(data);
</script>

## Populate a Select list from csv data

Use nest to get a unique list of people then create a select from it.

<script type="text/eval+javascript">
var items = d3.nest().key(function(d) {
	return d.who;
}).sortKeys(d3.ascending).rollup(function(leaves) {
	return leaves.length;
}).entries(data);

var output = document.createElement('div');
var select = d3.select(output).append('select');

select.selectAll('option').data(items).enter().append('option').attr('value', function(d) {
	return d.key;
}).text(function(d) {
	return d.key;
});

return output;
</script>

</xmp>

<!-- scripts -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
<script src="app.js"></script>
<script>d3.csv('data.csv', ready);</script>

## style.css
body {
	font-family: sans-serif;
}

xmp {
	display: none;
}

figure > code,
figure > samp {
	display: block;
	white-space: pre-wrap;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 10px 0;
	line-height: 1.4;
}

figure > samp {
	max-height: 20em;
	overflow-y: auto;
	font-size: 80%;
	line-height: 1;
	font-family: monospace;
}

figure > samp.error {
	border: 2px solid #f00;
}
	'use strict';

	function ready(data){
	var nodes = document.querySelectorAll('script[type="text/eval+javascript"]');

	Array.prototype.forEach.call(nodes, function(node) {
	var script = node.innerHTML.trim();

	var figure = document.createElement('figure');
	node.parentNode.insertBefore(figure, node);
	node.parentNode.removeChild(node);

	var code = document.createElement('code');
	code.className = 'prettyprint lang-js';
	code.innerHTML = script;
	figure.appendChild(code);

	var samp = document.createElement('samp');
	figure.appendChild(samp);

	(function(script, node) {
	var output;

	try {
	var output = new Function('data', script)(data);

	if (output) {
	if (output instanceof HTMLElement) {
	samp.appendChild(output);
	} else {
	samp.textContent = JSON.stringify(output, null, 2);
	}
	}
	} catch (e) {
	samp.className = 'error';
	samp.textContent = e.message;
	}
	})(code.textContent, samp);
	});

	prettyPrint();
	}
id	name	priority	who	time	status
T-024	Organisation list in directory	MUST	Joe	5	Complete
T-015	Make term Commissions customisable	MUST	Natasha	6	Complete
T-016	Comments popup on select rates	MUST	Mike	3	In Progress
T-0169	Upgrade Centos Box	MUST	Joe	2	In Progress
T-013	Search in Documents on selected folder	MUST	Natasha	6	In Progress
T-014	Separate Document system for LA and Legals	MUST	Joe	9	In Progress
T-017	Demo of Look and Feel of Documents front end	MUST	Natasha	5	In Progress
T-021	Fix error where forum filename is greater than 100chars	MUST	Mike	4	Not Started
T-025	Fix admin so structure of categories displayed	MUST	Mike	2.5	Complete
T-027	Reorganise git repos in Assembla	MUST	Joe	3	Not Started
T-033	Tree not showing correctly in documents	MUST	Natasha	1	In Progress
T-052	Add Cacheing	MUST	Mike	1.5	Complete
T-055	Allow custom ordering of document categories	MUST	Joe	0.5	Not Started
T-056	Pressing enter on date button triggers cancel	MUST	Joe	1	Not Started
T-057	Ajax not working on IE when selecting org	MUST	Natasha	6	Not Started
T-060	Send Reminder Email as required	SHOULD	Mike	3	Complete
T-061	Attach Document to response in Forum	SHOULD	Joe	4	Not Started
T-062	Forum thread notifications	SHOULD	Natasha	9	Complete
T-063	Group email notification	SHOULD	Mike	8	In Progress
T-064	Admin can see Who is logged in	SHOULD	Joe	9	Not Started
T-067	Extend Audit Trail	SHOULD	Natasha	12	Complete
T-068	Maintenance Links	SHOULD	Mike	4	Complete
T-094	Browse prices button	SHOULD	Joe	6	Not Started
T-095	Group email to be only available to the administrator	SHOULD	Natasha	5	Complete
T-096	Update cribsheet	COULD	Mike	2	Not Started
T-0103	Awarded missing from Estimated Tab	COULD	Joe	7	Complete
T-0105	New cribsheet	COULD	Natasha	7	Not Started
T-0111	Document not being added on forum response	COULD	Mike	6	Not Started
T-0114	Can't delete users once active	WISH	Joe	3	Not Started
T-0125	Add course organiser on notification	WISH	Natasha	2.5	In Progress
T-0126	Setup demonstration system for Demo	MUST	Joe	3	Not Started
T-0133	Fix forum pagination problem properly	MUST	Natasha	3	Not Started
T-0145	In Directory, tickbox to select all filtered users	MUST	Joe	3	Complete
T-0146	Merge user and user profile in admin	MUST	Natasha	2	Not Started
T-0147	Have multiple documents on an estimate	MUST	Mike	2	Not Started
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>D3 Nesting Examples</title>

	<!-- styles -->
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">

	<xmp class="container" theme="united">

	<!-- elements -->

	# D3 Nest examples

	Group by status

	<script type="text/eval+javascript">
	return d3.nest().key(function(d) {
	return d.status;
	}).entries(data);
	</script>

	## Simple two level nest

	Group by status then priority

	<script type="text/eval+javascript">
	return d3.nest().key(function(d) {
	return d.status;
	}).key(function(d) {
	return d.priority;
	}).entries(data);
	</script>

	## Use rollup to count leaves

	The leaf level is replaced by a value at the parent level

	<script type="text/eval+javascript">
	return d3.nest().key(function(d) {
	return d.status;
	}).key(function(d) {
	return d.priority;
	}).rollup(function(leaves) {
	return leaves.length;
	}).entries(data);
	</script>

	## Rollup does sums as well

	Can't have two rollups, but can return an object/array

	<script type="text/eval+javascript">
	return d3.nest().key(function(d) {
	return d.status;
	}).key(function(d) {
	return d.priority;
	}).rollup(function(leaves) {
	return {
	length: leaves.length,
	total_time: d3.sum(leaves, function(d) {
	return parseFloat(d.time);
	})
	}
	}).entries(data);
	</script>

	## Rollup everything to get a grand total of number of lines

	No key

	<script type="text/eval+javascript">
	return d3.nest().rollup(function(leaves) {
	return leaves.length;
	}).entries(data);
	</script>

	## Sorting

	Each level can be sorted by key - a simple ascending or descending...

	<script type="text/eval+javascript">
	return d3.nest().key(function(d) {
	return d.status;
	}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
	}).sortKeys(d3.descending).rollup(function(leaves) {
	return leaves.length;
	}).entries(data);
	</script>

	## Sorting - custom order

	Status, fortuitously, can be sorted in ascending order, but Priority requires a custom order. Create an list in the order you want and use indexOf to create the order comparator function.

	<script type="text/eval+javascript">
	var priorities = ['MUST', 'SHOULD', 'COULD', 'WISH'];

	return d3.nest().key(function(d) {
	return d.status;
	}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
	}).sortKeys(function(a,b) {
	return priorities.indexOf(a) - priorities.indexOf(b);
	}).rollup(function(leaves) {
	return leaves.length;
	}).entries(data);
	</script>

	## Sorting - sort the leaves as well

	Use sortValue to sort the leaves - sort by time with smallest first

	<script type="text/eval+javascript">
	var priorities = ['MUST', 'SHOULD', 'COULD', 'WISH'];

	return d3.nest().key(function(d) {
	return d.status;
	}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
	}).sortKeys(function(a,b) {
	return priorities.indexOf(a) - priorities.indexOf(b);
	}).sortValues(function(a,b) {
	return parseFloat(a.time) - parseFloat(b.time);
	}).entries(data);
	</script>

	## Sorting - sort the leaves as well

	Use sortValue to sort the leaves - sort by person this time.

	<script type="text/eval+javascript">
	var priorities = ['MUST', 'SHOULD', 'COULD', 'WISH'];

	return d3.nest().key(function(d) {
	return d.status;
	}).sortKeys(d3.ascending).key(function(d) {
	return d.priority;
	}).sortKeys(function(a,b) {
	return priorities.indexOf(a) - priorities.indexOf(b);
	}).sortValues(function(a,b) {
	return a.who < b.who ? -1 : 1;
	}).entries(data);
	</script>

	## Populate a Select list from csv data

	Use nest to get a unique list of people then create a select from it.

	<script type="text/eval+javascript">
	var items = d3.nest().key(function(d) {
	return d.who;
	}).sortKeys(d3.ascending).rollup(function(leaves) {
	return leaves.length;
	}).entries(data);

	var output = document.createElement('div');
	var select = d3.select(output).append('select');

	select.selectAll('option').data(items).enter().append('option').attr('value', function(d) {
	return d.key;
	}).text(function(d) {
	return d.key;
	});

	return output;
	</script>

	</xmp>

	<!-- scripts -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
	<script src="app.js"></script>
	<script>d3.csv('data.csv', ready);</script>
	body {
	font-family: sans-serif;
	}

	xmp {
	display: none;
	}

	figure > code,
	figure > samp {
	display: block;
	white-space: pre-wrap;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	margin: 10px 0;
	line-height: 1.4;
	}

	figure > samp {
	max-height: 20em;
	overflow-y: auto;
	font-size: 80%;
	line-height: 1;
	font-family: monospace;
	}

	figure > samp.error {
	border: 2px solid #f00;
	}