Skip to content

Instantly share code, notes, and snippets.

@ChandrakantThakkarDigiCorp
Last active August 17, 2017 10:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ChandrakantThakkarDigiCorp/24a6b6c27b160e265cc4ecd5a19ad953 to your computer and use it in GitHub Desktop.
Save ChandrakantThakkarDigiCorp/24a6b6c27b160e265cc4ecd5a19ad953 to your computer and use it in GitHub Desktop.
D3 Nest Examples
id name priority who time status
CBT24 Organisation list in directory MUST Chandrakant Thakkar 5 Complete
CBT15 Make term Commissions customisable MUST Hetal Thakkar 6 Complete
CBT16 Comments popup on select rates MUST Harsh Thakkar 3 In Progress
CBT169 Upgrade Centos Box MUST Chandrakant Thakkar 2 In Progress
CBT13 Search in Documents on selected folder MUST Hetal Thakkar 6 In Progress
CBT14 Separate Document system for LA and Legals MUST Chandrakant Thakkar 9 In Progress
CBT17 Demo of Look and Feel of Documents front end MUST Hetal Thakkar 5 In Progress
CBT21 Fix error where forum filename is greater than 100chars MUST Harsh Thakkar 4 Not Started
CBT25 Fix admin so structure of categories displayed MUST Harsh Thakkar 2.5 Complete
CBT27 Reorganise git repos in Assembla MUST Chandrakant Thakkar 3 Not Started
CBT33 Tree not showing correctly in documents MUST Hetal Thakkar 1 In Progress
CBT52 Add Cacheing MUST Harsh Thakkar 1.5 Complete
CBT55 Allow custom ordering of document categories MUST Chandrakant Thakkar 0.5 Not Started
CBT56 Pressing enter on date button triggers cancel MUST Chandrakant Thakkar 1 Not Started
CBT57 Ajax not working on IE when selecting org MUST Hetal Thakkar 6 Not Started
CBT60 Send Reminder Email as required SHOULD Harsh Thakkar 3 Complete
CBT61 Attach Document to response in Forum SHOULD Chandrakant Thakkar 4 Not Started
CBT62 Forum thread notifications SHOULD Hetal Thakkar 9 Complete
CBT63 Group email notification SHOULD Harsh Thakkar 8 In Progress
CBT64 Admin can see Who is logged in SHOULD Chandrakant Thakkar 9 Not Started
CBT67 Extend Audit Trail SHOULD Hetal Thakkar 12 Complete
CBT68 Maintenance Links SHOULD Harsh Thakkar 4 Complete
CBT94 Browse prices button SHOULD Chandrakant Thakkar 6 Not Started
CBT95 Group email to be only available to the administrator SHOULD Hetal Thakkar 5 Complete
CBT96 Update cribsheet COULD Harsh Thakkar 2 Not Started
CBT103 Awarded missing from Estimated Tab COULD Chandrakant Thakkar 7 Complete
CBT105 New cribsheet COULD Hetal Thakkar 7 Not Started
CBT111 Document not being added on forum response COULD Harsh Thakkar 6 Not Started
CBT114 Can't delete users once active WISH Chandrakant Thakkar 3 Not Started
CBT125 Add course organiser on notification WISH Hetal Thakkar 2.5 In Progress
CBT126 Setup demonstration system for Demo MUST Chandrakant Thakkar 3 Not Started
CBT133 Fix forum pagination problem properly MUST Hetal Thakkar 3 Not Started
CBT145 In Directory, tickbox to select all filtered users MUST Chandrakant Thakkar 3 Complete
CBT146 Merge user and user profile in admin MUST Hetal Thakkar 2 Not Started
CBT147 Have multiple documents on an estimate MUST Harsh Thakkar 2 Not Started
<html>
<body>
<div style="height: 100%;overflow-y: auto;width: 100%;margin-left: 10px;">
<center><h1>D3 Nest examples</h1></center>
<h2>Single level nest</h2>
<b>I want to get list of tasks performed by persons</b><br /><br />
<samp>var nested_data = d3.nest()<br />
.key(function(d) { return d.who; })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex1" rows="15" cols="90"></textarea>
<h2>Two level nest</h2>
<b>I want to get list of tasks performed by persons based on task status</b><br /><br />
<samp>var nested_data = d3.nest()<br />
.key(function(d) { return d.who; })<br />
.key(function(d) { return d.status; })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex2" rows="15" cols="90"></textarea>
<h2>Use rollup to count leaves</h2>
<b>I want to count tasks performed by persons based on task status</b><br /><br />
<samp>var nested_data = d3.nest()<br />
.key(function(d) { return d.who; })<br />
.key(function(d) { return d.status; })<br />
.rollup(function(leaves) { return leaves.length; })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex3" rows="15" cols="90"></textarea>
<h2>Rollup does sums as well</h2>
<b>I want to count tasks and times taken by persons based on task status</b><br />
<p>Can't have two rollups, but can return an object/array</p>
<samp>var nested_data = d3.nest()<br />
.key(function(d) { return d.who; })<br />
.key(function(d) { return d.status; })<br />
.rollup(function(leaves) {
return {"length": leaves.length,
"total_time": d3.sum(leaves, function(d) {return parseFloat(d.time);})} })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex4" rows="15" cols="90"></textarea>
<h2>Rollup everything to get a grand total of number of lines</h2>
<b>I want to count numbers of records</b><br />
<p>No key</p>
<samp>var nested_data = d3.nest()<br />
.rollup(function(leaves) { return leaves.length; })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex9" rows="3" cols="90"></textarea>
<h2>Sorting</h2>
<p>Each level can be sorted by key - a simple ascending or descending...</p>
<samp>var nested_data = d3.nest()<br />
.key(function(d) { return d.who; }).sortKeys(d3.ascending)<br />
.key(function(d) { return d.status; }).sortKeys(d3.descending)<br />
.rollup(function(leaves) { return leaves.length; })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex5" rows="15" cols="90"></textarea>
<h2>Sorting - custom order</h2>
<p>Persons, fortuitously, can be sorted in straing ascending order, but Status requires a custom order. Create an list in the order you want and use indexOf to create the order comparaitor function.</p>
<samp>
var status_order = ['In Progress', "Complete", 'Not Started'];<br />
var nested_data = d3.nest()<br />
.key(function(d) { return d.who; }).sortKeys(d3.ascending)<br />
.key(function(d) { return d.status; }).sortKeys(function(a,b) { return status_order.indexOf(a) - status_order.indexOf(b); })<br />
.rollup(function(leaves) { return leaves.length; })<br />
.entries(data);<br />
</samp><br />
<textarea id="ex6" rows="15" cols="90"></textarea>
<h2>Sorting - sort the leaves as well</h2>
<p>Use sortValue to sort the leaves - sort by time with smallest first</p>
<samp>
var status_order = ['In Progress', "Complete", 'Not Started'];<br />
var nested_data = d3.nest()<br />
.key(function(d) { return d.who; }).sortKeys(d3.ascending)<br />
.key(function(d) { return d.status; }).sortKeys(function(a,b) { return status_order.indexOf(a) - status_order.indexOf(b); })<br />
.sortValues(function(a,b) { return parseFloat(a.time) - parseFloat(b.time); } }<br />
.entries(data);<br />
</samp><br />
<textarea id="ex7" rows="15" cols="90"></textarea>
<h2>Populate a Select list from csv data</h2>
<p>Use nest to get a unique list of people then create a select from it.</p>
<samp>
var nested_data = d3.nest()<br />
.key(function(d) { return d.who}).sortKeys(d3.ascending)<br />
.rollup(function(leaves) { return leaves.length; })<br />
.entries(data);<br />
<br />
var list = d3.select("#ex10").append("select")<br />
<br />
list.selectAll("option")<br />
.data(nested_data)<br />
.enter()<br />
.append("option")<br />
.attr("value", function(d) {return d.key;})<br />
.text(function(d) {<br />
return d.key; });<br />
<br />
</samp>
<br />
<div id="ex10">
</div>
<br />
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<a href="https://stackoverflow.com/users/7430694/chandrakant-thakkar" style="position: absolute;top: 6%;left: 75%;" target="_blank">
<img src="https://stackoverflow.com/users/flair/7430694.png" width="208" height="58" alt="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
</a>
<script>
var data=[{"id":"CBT24","name":"Organisation list in directory","priority":"MUST","who":"Chandrakant Thakkar","time":"5","status":"Complete"},{"id":"CBT15","name":"Make term Commissions customisable","priority":"MUST","who":"Hetal Thakkar","time":"6","status":"Complete"},{"id":"CBT16","name":"Comments popup on select rates","priority":"MUST","who":"Harsh Thakkar","time":"3","status":"In Progress"},{"id":"CBT169","name":"Upgrade Centos Box","priority":"MUST","who":"Chandrakant Thakkar","time":"2","status":"In Progress"},{"id":"CBT13","name":"Search in Documents on selected folder","priority":"MUST","who":"Hetal Thakkar","time":"6","status":"In Progress"},{"id":"CBT14","name":"Separate Document system for LA and Legals","priority":"MUST","who":"Chandrakant Thakkar","time":"9","status":"In Progress"},{"id":"CBT17","name":"Demo of Look and Feel of Documents front end","priority":"MUST","who":"Hetal Thakkar","time":"5","status":"In Progress"},{"id":"CBT21","name":"Fix error where forum filename is greater than 100chars","priority":"MUST","who":"Harsh Thakkar","time":"4","status":"Not Started"},{"id":"CBT25","name":"Fix admin so structure of categories displayed","priority":"MUST","who":"Harsh Thakkar","time":"2.5","status":"Complete"},{"id":"CBT27","name":"Reorganise git repos in Assembla","priority":"MUST","who":"Chandrakant Thakkar","time":"3","status":"Not Started"},{"id":"CBT33","name":"Tree not showing correctly in documents","priority":"MUST","who":"Hetal Thakkar","time":"1","status":"In Progress"},{"id":"CBT52","name":"Add Cacheing","priority":"MUST","who":"Harsh Thakkar","time":"1.5","status":"Complete"},{"id":"CBT55","name":"Allow custom ordering of document categories","priority":"MUST","who":"Chandrakant Thakkar","time":"0.5","status":"Not Started"},{"id":"CBT56","name":"Pressing enter on date button triggers cancel","priority":"MUST","who":"Chandrakant Thakkar","time":"1","status":"Not Started"},{"id":"CBT57","name":"Ajax not working on IE when selecting org","priority":"MUST","who":"Hetal Thakkar","time":"6","status":"Not Started"},{"id":"CBT60","name":"Send Reminder Email as required","priority":"SHOULD","who":"Harsh Thakkar","time":"3","status":"Complete"},{"id":"CBT61","name":"Attach Document to response in Forum","priority":"SHOULD","who":"Chandrakant Thakkar","time":"4","status":"Not Started"},{"id":"CBT62","name":"Forum thread notifications","priority":"SHOULD","who":"Hetal Thakkar","time":"9","status":"Complete"},{"id":"CBT63","name":"Group email notification","priority":"SHOULD","who":"Harsh Thakkar","time":"8","status":"In Progress"},{"id":"CBT64","name":"Admin can see Who is logged in ","priority":"SHOULD","who":"Chandrakant Thakkar","time":"9","status":"Not Started"},{"id":"CBT67","name":"Extend Audit Trail","priority":"SHOULD","who":"Hetal Thakkar","time":"12","status":"Complete"},{"id":"CBT68","name":"Maintenance Links","priority":"SHOULD","who":"Harsh Thakkar","time":"4","status":"Complete"},{"id":"CBT94","name":"Browse prices button","priority":"SHOULD","who":"Chandrakant Thakkar","time":"6","status":"Not Started"},{"id":"CBT95","name":"Group email to be only available to the administrator","priority":"SHOULD","who":"Hetal Thakkar","time":"5","status":"Complete"},{"id":"CBT96","name":"Update cribsheet","priority":"COULD","who":"Harsh Thakkar","time":"2","status":"Not Started"},{"id":"CBT103","name":"Awarded missing from Estimated Tab","priority":"COULD","who":"Chandrakant Thakkar","time":"7","status":"Complete"},{"id":"CBT105","name":"New cribsheet","priority":"COULD","who":"Hetal Thakkar","time":"7","status":"Not Started"},{"id":"CBT111","name":"Document not being added on forum response","priority":"COULD","who":"Harsh Thakkar","time":"6","status":"Not Started"},{"id":"CBT114","name":"Can't delete users once active","priority":"WISH","who":"Chandrakant Thakkar","time":"3","status":"Not Started"},{"id":"CBT125","name":"Add course organiser on notification","priority":"WISH","who":"Hetal Thakkar","time":"2.5","status":"In Progress"},{"id":"CBT126","name":"Setup demonstration system for Demo","priority":"MUST","who":"Chandrakant Thakkar","time":"3","status":"Not Started"},{"id":"CBT133","name":"Fix forum pagination problem properly","priority":"MUST","who":"Hetal Thakkar","time":"3","status":"Not Started"},{"id":"CBT145","name":"In Directory, tickbox to select all filtered users","priority":"MUST","who":"Chandrakant Thakkar","time":"3","status":"Complete"},{"id":"CBT146","name":"Merge user and user profile in admin","priority":"MUST","who":"Hetal Thakkar","time":"2","status":"Not Started"},{"id":"CBT147","name":"Have multiple documents on an estimate","priority":"MUST","who":"Harsh Thakkar","time":"2","status":"Not Started"}];
var nested_data = d3.nest()
.key(function(d) { return d.who; })
.entries(data);
$("#ex1").html(JSON.stringify(nested_data, null, 3));
var nested_data = d3.nest()
.key(function(d) { return d.who; })
.key(function(d) { return d.status; })
.entries(data);
$("#ex2").html(JSON.stringify(nested_data, null, 3));
var nested_data = d3.nest()
.key(function(d) { return d.who; })
.key(function(d) { return d.status; })
.rollup(function(leaves) { return leaves.length; })
.entries(data);
$("#ex3").html(JSON.stringify(nested_data, null, 3));
var nested_data = d3.nest()
.key(function(d) { return d.who; })
.key(function(d) { return d.status; })
.rollup(function(leaves) {
return {"length": leaves.length,
"total_time": d3.sum(leaves, function(d) {return parseFloat(d.time);})} })
.entries(data);
$("#ex4").html(JSON.stringify(nested_data, null, 3));
var nested_data = d3.nest()
.key(function(d) { return d.who; }).sortKeys(d3.ascending)
.key(function(d) { return d.status; }).sortKeys(d3.descending)
.rollup(function(leaves) { return leaves.length; })
.entries(data);
$("#ex5").html(JSON.stringify(nested_data, null, 3));
var status_order = ['In Progress', "Complete", 'Not Started'];
var nested_data = d3.nest()
.key(function(d) { return d.who; }).sortKeys(d3.ascending)
.key(function(d) { return d.status; }).sortKeys(function(a,b) { return status_order.indexOf(a) - status_order.indexOf(b); })
.rollup(function(leaves) { return leaves.length; })
.entries(data);
$("#ex6").html(JSON.stringify(nested_data, null, 3));
var status_order = ['In Progress', "Complete", 'Not Started'];
var nested_data = d3.nest()
.key(function(d) { return d.who; }).sortKeys(d3.ascending)
.key(function(d) { return d.status; }).sortKeys(function(a,b) { return status_order.indexOf(a) - status_order.indexOf(b); })
.sortValues(function(a,b) { return parseFloat(a.time) - parseFloat(b.time); } )
.entries(data);
$("#ex7").html(JSON.stringify(nested_data, null, 3));
var nested_data = d3.nest()
.rollup(function(leaves) { return leaves.length; })
.entries(data);
$("#ex9").html(JSON.stringify(nested_data, null, 3));
var nested_data = d3.nest()
.key(function(d) { return d.who}).sortKeys(d3.ascending)
.rollup(function(leaves) { return leaves.length; })
.entries(data);
var list = d3.select("#ex10").append("select")
list.selectAll("option")
.data(nested_data)
.enter()
.append("option")
.attr("value", function(d) {return d.key;})
.text(function(d) {
return d.key; });
</script>
</body>
</html>
<html>
<html>
<head>
<title>Chandrakant Thakkar D3 Nest Examples</title>
</head>
<body>
<iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin" src="./frame.html" marginwidth="0" marginheight="0" style="height:500px;width:100%" scrolling="no">
</iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment