This viz represents the each office and the rogue ones who havent filled the timesheet
-
-
Save senthilthyagarajan/bfa1b611c0e91b1a304c0b8f32555daf to your computer and use it in GitHub Desktop.
The Rogue One's
This file contains hidden or 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
| width: 820 | |
| height: 730 |
This file contains hidden or 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
| #chart { | |
| width: 800px; | |
| /* height: 620px; */ | |
| margin: 0 auto; | |
| padding-top: 30px; | |
| font-size: 12px; | |
| overflow-wrap: break-word; | |
| } | |
| text { | |
| pointer-events: none; | |
| } | |
| .grandparent text { | |
| font-weight: bold; | |
| } | |
| rect { | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| } | |
| rect.parent, | |
| .grandparent rect { | |
| stroke-width: 2px; | |
| } | |
| .children rect.parent, | |
| .grandparent rect { | |
| cursor: pointer; | |
| } | |
| .children rect.child { | |
| opacity: 0; | |
| } | |
| .children:hover rect.child { | |
| opacity: 1; | |
| stroke-width: 1px; | |
| } | |
| .children:hover rect.parent { | |
| opacity: 0; | |
| } |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="index.css"> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| var log = console.log; | |
| var margin = {top: 30, right: 0, bottom: 0, left: 0}; | |
| var width = 800; | |
| var height = 670 - margin.top - margin.bottom; | |
| var transitioning; | |
| // x axis scale | |
| var x = d3.scale.linear() | |
| .domain([0, width]) | |
| .range([0, width]); | |
| // y axis scale | |
| var y = d3.scale.linear() | |
| .domain([0, height]) | |
| .range([0, height]); | |
| // treemap layout | |
| var treemap = d3.layout.treemap() | |
| .children(function(d, depth) { return depth ? null : d._children; }) | |
| .sort(function(a, b) { return a.value - b.value; }) | |
| .ratio(height / width * 0.5 * (1 + Math.sqrt(5))) | |
| .value(d=>d.sum) | |
| .round(false); | |
| // define svg | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.bottom + margin.top) | |
| .style("margin-left", -margin.left + "px") | |
| .style("margin.right", -margin.right + "px") | |
| .append("g") | |
| .attr("transform", `translate(${margin.left},${margin.top})`) | |
| .style("shape-rendering", "crispEdges"); | |
| // top gray rectangle | |
| var grandparent = svg.append("g") | |
| .attr("class", "grandparent"); | |
| // Add grandparent rect | |
| grandparent.append("rect") | |
| .attr("y", -margin.top) | |
| .attr("width", width) | |
| .attr("height", margin.top) | |
| .style("fill", "#d9d9d9"); | |
| // Add grandparent text | |
| grandparent.append("text") | |
| .attr("class", "title") | |
| .attr("x", 6) | |
| .attr("y", 6 - margin.top) | |
| .attr("dy", ".75em"); | |
| // custom root initializer | |
| function initialize(root) { | |
| root.x = root.y = 0; | |
| root.dx = width; | |
| root.dy = height; | |
| root.depth = 0; | |
| }; | |
| // Aggregate the values for internal nodes. This is normally done by the | |
| // treemap layout, but not here because of our custom implementation. | |
| // We also take a snapshot of the original children (_children) to avoid | |
| // the children being overwritten when when layout is computed. | |
| // Alteration made for function to be iterative | |
| function accumulateVal(d, attr) { | |
| return accumulate(d); | |
| function accumulate(d) { | |
| return (d._children = d.children) | |
| // recursion step, note that p and v are defined by reduce | |
| ? d[attr] = d.children.reduce(function(p, v) {return p + accumulate(v); }, 0) | |
| : d[attr]; | |
| }; | |
| }; | |
| // Compute the treemap layout recursively such that each group of siblings | |
| // uses the same size (1×1) rather than the dimensions of the parent cell. | |
| // This optimizes the layout for the current zoom state. Note that a wrapper | |
| // object is created for the parent node for each group of siblings so that | |
| // the parent’s dimensions are not discarded as we recurse. Since each group | |
| // of sibling was laid out in 1×1, we must rescale to fit using absolute | |
| // coordinates. This lets us use a viewport to zoom. | |
| function layout(d) { | |
| if (d._children) { | |
| // treemap nodes comes from the treemap set of functions as part of d3 | |
| treemap.nodes({_children: d._children}); | |
| d._children.forEach(function(c) { | |
| c.x = d.x + c.x * d.dx; | |
| c.y = d.y + c.y * d.dy; | |
| c.dx *= d.dx; | |
| c.dy *= d.dy; | |
| c.parent = d; | |
| // recursion | |
| layout(c); | |
| }); | |
| } | |
| }; | |
| d3.csv("Public_Grants_2010-2012(July-28-2018).csv", treeMapZoomable); | |
| function treeMapZoomable(error, grants) { | |
| if (error) throw error; | |
| // Define color scale | |
| var allValues = grants.map(function(d) { return [d["GRANT_PROGRAM"], d["YEAR"]]; }) | |
| .reduce(function(acc, curVal) { return acc.concat(curVal); }, []); | |
| var scaleOrdNames = [...new Set(allValues)]; | |
| var colorScale = d3.scale.ordinal().domain(scaleOrdNames) | |
| .range(['#66c2a5','#fc8d62','#8da0cb','#e78ac3','#a6d854','#ffd92f','#e5c494']); | |
| // Define aggregrated grant programs | |
| var aggGrantPrograms = d3.nest().key(function(d) { return d.YEAR; }) | |
| .key(function(d) { return d["GRANT_PROGRAM"]; }) | |
| .entries(grants) | |
| .map(function(d) { | |
| var dValues = d.values.map(function(g){ | |
| var gValues = g.values; | |
| var sum = gValues.map(function(p) { return p["GRANT_AWARD"]; }) | |
| .reduce(function(acc, curVal) { return acc + (+curVal); }, 0); | |
| return { | |
| name: g.key, | |
| value: gValues.length, | |
| sum: sum | |
| }; | |
| }); | |
| return { | |
| name: d.key, | |
| children: dValues | |
| }; | |
| }); | |
| // Root for hierarchy | |
| var rootObject = {name: "Office", children: aggGrantPrograms}; | |
| initialize(rootObject); | |
| ["value", "sum"].forEach(function(d) { accumulateVal(rootObject, d); }); | |
| layout(rootObject); | |
| display(rootObject); | |
| function display(d) { | |
| // Grandparent when clicked transitions the children out to parent | |
| grandparent | |
| .datum(d.parent) | |
| .on("click", transition) | |
| .select("text.title") | |
| .text(name(d)); | |
| grandparent | |
| .datum(d.parent) | |
| .select("rect"); | |
| var g1 = svg.insert("g", ".grandparent") | |
| .datum(d) | |
| .attr("class", "depth"); | |
| var g = g1.selectAll("g") | |
| .data(d._children) | |
| .enter().append("g"); | |
| // When parent is clicked transitions to children | |
| g.filter(function(d) { return d._children; }) | |
| .classed("children", true) | |
| .on("click", transition); | |
| g.selectAll(".child") | |
| .data(function(d) { return d._children || [d]; }) | |
| .enter().append("rect") | |
| .attr("class", "child") | |
| .call(rect); | |
| g.append("rect") | |
| .attr("class", "parent") | |
| .call(rect) | |
| .append("title") | |
| .text(function(d) { return `Audience Segment: ${d.name}`; }); | |
| // functiom to wrap text | |
| function stringDivider(str, width, spaceReplacer) { | |
| if (str.length>width) { | |
| var p=width | |
| for (;p>0 && str[p]!=' ';p--) { | |
| } | |
| if (p>0) { | |
| var left = str.substring(0, p); | |
| var right = str.substring(p+1); | |
| return left + spaceReplacer + stringDivider(right, width, spaceReplacer); | |
| } | |
| } | |
| return str; | |
| } | |
| // Appending year, grants, and sum texts for each g | |
| var textClassArr = [ | |
| {class: "year", accsor: function(d) { return d.name; }}, | |
| {class: "sum", accsor: function(d) { return stringDivider(`${d.sum.toLocaleString()}`, 12, "<br/>\n") ; }} | |
| ]; | |
| textClassArr.forEach(function(p, i) { | |
| g.append("text") | |
| .attr("class", p.class) | |
| .attr("dy", ".5em") | |
| .text(p.accsor) | |
| .call(rectText(i)); | |
| }); | |
| function transition(d) { | |
| if (transitioning || !d) return; | |
| transitioning = true; | |
| var g2 = display(d); | |
| var t1 = g1.transition().duration(750); | |
| var t2 = g2.transition().duration(750); | |
| // Update the domain only after entering new elements. | |
| x.domain([d.x, d.x + d.dx]); | |
| y.domain([d.y, d.y + d.dy]); | |
| // Enable anti-aliasing during the transition. | |
| svg.style("shape-rendering", null); | |
| // Draw child nodes on top of parent nodes. | |
| svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; }); | |
| // Fade-in entering text. | |
| g2.selectAll("text").style("fill-opacity", 0); | |
| // Transition to the new view. | |
| textClassArr.forEach(function(d, i) { | |
| var textClass = `text.${d.class}`; | |
| var textPlacmt = rectText(i); | |
| t1.selectAll(textClass).call(textPlacmt).style("fill-opacity", 0); | |
| t2.selectAll(textClass).call(textPlacmt).style("fill-opacity", 1); | |
| }); | |
| t1.selectAll("rect").call(rect); | |
| t2.selectAll("rect").call(rect); | |
| // Remove the old node when the transition is finished. | |
| t1.remove().each("end", function() { | |
| svg.style("shape-rendering", "crispEdges"); | |
| transitioning = false; | |
| }); | |
| }; | |
| return g; | |
| }; | |
| function rectText(i) { | |
| return grantText; | |
| function grantText(text) { | |
| return text.attr("x", function(d) { return x(d.x) + 6; }) | |
| .attr("y", function(d) { return y(d.y) + (25 + (i * 18)); }) | |
| .attr("fill", "black"); | |
| }; | |
| }; | |
| function rect(rect) { | |
| rect.attr("x", function(d) { return x(d.x); }) | |
| .attr("y", function(d) { return y(d.y); }) | |
| .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); }) | |
| .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); }) | |
| .attr("fill", function(d) { return colorScale(d.name);}); | |
| }; | |
| function name(d) { | |
| return d.parent | |
| ? `${name(d.parent)}.${d.name} - Total Segments: ${d.value} - | |
| Sample Size: ${d.sum.toLocaleString()}` | |
| : d.name; | |
| }; | |
| }; |
This file contains hidden or 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
| YEAR | GRANT_PROGRAM | GRANT_AWARD | |
|---|---|---|---|
| CHI | Amy Henning | 1 | |
| CHI | Andreas Aristides | 1 | |
| CHI | Jamie Stark | 1 | |
| CHI | Thom Williams | 1 | |
| NYC | Abigail Hoeflinger | 1 | |
| NYC | Adwait Pitkar | 1 | |
| NYC | Alexandria Grasso | 1 | |
| NYC | Alina Zhen | 1 | |
| NYC | Andrew Ogburn | 1 | |
| NYC | Andrew Ulmer | 2 | |
| NYC | Asher Stamell | 1 | |
| NYC | Ben Phillips | 1 | |
| NYC | Blake Jones | 1 | |
| NYC | Brad Kranjec | 2 | |
| NYC | Brad Ure | 2 | |
| NYC | Brendan Gahan | 2 | |
| NYC | Bryan Davis | 4 | |
| NYC | Christine Morelli | 2 | |
| NYC | Connor Addario | 2 | |
| NYC | David Horowitz | 3 | |
| NYC | Dayna Uyeda | 1 | |
| NYC | Earl Lee | 1 | |
| NYC | Emily Swenson | 3 | |
| NYC | Emma Swanson | 2 | |
| NYC | Grace Hwang | 2 | |
| NYC | Jillian Goger | 1 | |
| NYC | John McNulty | 1 | |
| NYC | Juan Pacheco | 2 | |
| NYC | Justin Foster | 1 | |
| NYC | Justin Jimenez | 1 | |
| NYC | Kara Coyle | 2 | |
| NYC | Katie Bourgeois | 1 | |
| NYC | Kristina McCauley | 2 | |
| NYC | Leah McGlone | 1 | |
| NYC | Lissa Pinkas | 2 | |
| NYC | Liza Ramos | 2 | |
| NYC | McKenzie Badger | 3 | |
| NYC | Meagan Cotruvo | 1 | |
| NYC | Megan Enneking | 2 | |
| NYC | Nick Ambolino | 1 | |
| NYC | Samantha Score | 2 | |
| NYC | Scott Mai | 1 | |
| NYC | Taylor Chrien | 1 | |
| NYC | Tim Noble | 2 | |
| NYC | Todd Feitlin | 2 | |
| NYC | Tor Edwards | 3 | |
| NYC | Zach Fleming | 1 | |
| SEA | Aimee Brodbeck | 1 | |
| SEA | Ana Sabarots | 1 | |
| SEA | Anna Rainwater | 1 | |
| SEA | Josh Druding | 1 | |
| SEA | Jourdan Huys | 2 | |
| SF | Anne Cathcart | 1 | |
| SF | Janice Cuaresma | 1 | |
| SF | Jasmin Sun | 2 | |
| SF | Jen Miller | 2 | |
| SF | Laura Wimer | 1 | |
| SF | Lexi Whelan | 1 | |
| SF | Mike Weiss | 1 | |
| SF | Mills Adams | 1 | |
| SF | Stephanie Lassar | 1 | |
| SF | Thomas Kropp | 1 | |
| SF | Tom Coates | 2 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment