Last active
August 17, 2017 10:44
-
-
Save ChandrakantThakkarDigiCorp/24a6b6c27b160e265cc4ecd5a19ad953 to your computer and use it in GitHub Desktop.
D3 Nest Examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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&A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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