36:["$","title",null,{"children":"Project Coverage | kalmdown | Observable"}] 3e:T4e0,3f:T494,function totals_donut() { // viewof totals_donut = { // const createElement = function() { const container = d3.create("div").attr("class", "totals"); const cells = container .selectAll("div") .data(peoples_projects) .enter() .filter((d) => d.name == `Totals`) .append("svg") .attr("viewBox", [-width / 2, -height / 2, width + 2, height + 2]); cells .append("g") .attr("class", "shadow") .selectAll("path") .data((d) => pie(d.projects)) .join("path") .attr("class", d => cleanName(d.data.project)) // .attr("class", d => {return cleanName(d.data.project) + " toolTip"}) .attr("fill", d => color(d.data.project)) .attr("d", arc(size)) .on("mousemove", (event, d) => { arcMouseOver(d.data.project, Math.round(d.data.value / total * 100, 0), event.pageX, event.pageY); }) .on("mouseover", hover) .on("mouseout", mouseOut) cells .append("text") .attr("class", "totalsLabel") .attr("x", 0) .attr("y", 0) .attr("dy", "0.25em") .text((d) => d.name) .attr("text-anchor", "middle"); container.selectAll(".label").call(wrap, 11); return container.node(); }40:T4a9,function legend() { const div = d3.create("div").attr("viewBox", [0, 0, width, height]); // .style("background", "white"); const legend = div .append("div"); legend .selectAll(null) .data(totals_arcs) .enter() .append("div") .attr("class", d => {return cleanName(d.name) + " legend"}) // .attr("class", d => cleanName(d.name)) .on("mouseover", hover) .on("mouseout", mouseOut) .call(function(parent){ parent.append("span") .attr(`class`, `shadow`) .style('width', `${labelHeight + 4}px`) .style('height', `${labelHeight + 4}px`) .style(`display`, `block`) .style(`float`, `left`) .style(`margin-top`,`3px`) .style(`margin-right`, `5px`) .style(`margin-left`, `3px`) .style('background', d => color(d.name)) .style("pointer-events", "none"); parent.append("span") .text(d => d.name) .style(`white-space`, `pre-line`) .style('font-family', 'sans-serif') .style('font-size', `${labelHeight}px`) .style("pointer-events", "none"); }) return div.node(); } // https://stackoverflow.com/questions/13203897/d3-nested-appends-and-data-flow41:T4f2,function multiples() { const size = 80; const container = d3.create("div").attr("class", "multiples"); const cells = container .selectAll("div") .data(peoples_projects) .enter() .filter((d) => d.name != `Totals`) .append("div") .attr("id", d => cleanName(d.name)) .attr("class", "cell") .append("svg") .attr("width", size) .attr("height", size) .attr("viewBox", [-size / 2, -size / 2, size + 2, size + 2]); cells .append("g") .attr("class", "shadow") .selectAll("path") .data((d) => pie(d.projects)) .join("path") // .attr("class", (d) => {return cleanName(d.data.project) + " toolTip"}) .attr("class", (d) => cleanName(d.data.project)) .attr("fill", (d) => color(d.data.project)) .attr("d", arc(size)) .on("mousemove", (event, d) => { arcMouseOver(d.data.project, d.data.value, event.pageX, event.pageY); }) .on("mouseover", hover) .on("mouseout", mouseOut) cells .append("text") .attr("class", "label") .attr("x", 0) .attr("y", 0) .attr("dy", -0.35) .text((d) => d.name) .attr("text-anchor", "middle"); container.selectAll(".label").call(wrap, 9); return container.node(); }42:[{"id":"208bb4282d99a34ecf25fe1cd032cd3a8e5ffde9b41911724c253de2cf69bd39f1f358570f671051aa5b7d61fffd9c62404e7ec597442e6ba3840d41926390ba","href":"https://static.observableusercontent.com/files/208bb4282d99a34ecf25fe1cd032cd3a8e5ffde9b41911724c253de2cf69bd39f1f358570f671051aa5b7d61fffd9c62404e7ec597442e6ba3840d41926390ba","name":"UX Coverage by Star Wars.csv","type":"text/csv","lastModified":1625695952190.111,"size":1351}] 3a:{"id":"c14bf26e0c1f63de","slug":"ux-coverage/2","title":"Project Coverage","thumbnail":"8d96588be6350735e56406b8a1d7c60eb8089621c52bb624b9292758a576d6ee","access_level":"public","create_time":"$D2021-06-26T01:37:43.974Z","update_time":"$D2022-03-22T17:49:49.837Z","view_time":null,"first_public_time":"$D2021-07-06T19:25:13.926Z","has_unpublished_edits":null,"fork":{"id":"db3cfa993e4246c8","slug":"ux-coverage","title":"UX Coverage","owner":{"id":"5139cef5fca98dea","login":"kalmdown","name":"kalmdown"}},"stars":2,"starred":false,"owner":{"type":"team","id":"5139cef5fca98dea","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":"starter_2024","bio":"Learning...","followed_by_you":false,"follows_you":false},"version":2073,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc77e0cd5faff006","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":null,"bio":"Learning...","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"bc77e0cd5faff006","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Project Coverage","cells":[{"id":22,"value":"# Project Coverage\n\nThis visualization lets a user explore the percentage of a person's time they spend on different projects as well as the group's total percentage of time on projects.\n\nThe data is generated and so not representative of anything in the Star Wars universe...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"

\n \n

${totals_donut()}

${legend()}

${multiples()}

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"# Rendering","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"$3e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2042,"value":"# Interaction","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"function hover(event, d) {\n// debugger;\n const className = cleanName(d.name != null ? d.name : d.data.project); // This does not have to extract project from list of classes\n// const className = event.srcElement.nodeName == \"DIV\" ? event.target.className : event.srcElement.className.baseVal;\n// const classProject = whichProject(className);\n\n // Highlight arcs with stroke\n d3.selectAll(`path.${className}`)\n .attr(\"stroke\", \"rgba(255,255,255,1)\")\n .attr(\"stroke-width\", 2)\n\n // Shade selected project in Legend\n d3.selectAll(`div.${className}`)\n .style(\"background\", `rgba(0,0,0,.05`)\n\n const donutsThatDontHaveProject = d3.selectAll(`div.cell`).filter(d => {console.log(d); return donutDoesntHaveProject(d.projects, className)})\n \n //Fade donuts without project\n donutsThatDontHaveProject.classed(\"faded\", true)\n\n // Hide names for donuts without selections\n donutsThatDontHaveProject.selectAll(`text.label`).classed(\"gone\", true)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"function arcMouseOver(caption, value, pageX, pageY) {\n toolTip.style(\"left\", pageX + 18 + \"px\")\n .style(\"top\", pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(`${caption} ${value}%`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"function mouseOut(event, d) {\n\n// const className = event.srcElement.nodeName == \"DIV\" ? event.target.className : event.srcElement.className.baseVal;\n const className = cleanName(d.name != null ? d.name : d.data.project); // This does not have to extract project from list of classes\n\n // Remove stroke from selections\n d3.selectAll(`path.${className}`)\n .attr(\"stroke\", \"rgba(0,0,0,0\")\n\n // Remove shading from selected item in Legend \n d3.selectAll(`div.${className}`)\n .style(\"background\", \"rgba(0,0,0,0)\")\n\n // Hide tooltip \n toolTip.style(\"display\", \"none\"); // Hide toolTip\n\n const donutsThatDontHaveProject = d3.selectAll(`div.cell`).filter(d => donutDoesntHaveProject(d.projects, className))\n \n // Remove fade\n donutsThatDontHaveProject.classed(\"faded\", false)\n \n // Restore text\n donutsThatDontHaveProject.selectAll(`text`).classed(\"gone\", false)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"function donutDoesntHaveProject (donutProjects, projectName, personName)\n {\n let doesntHaveProject = true;\n // console.log(\"Test 0th\", cleanName(donutProjects[0].project))\n for (let i = 0; i < donutProjects.length; ++i) {\n if (cleanName(donutProjects[i].project) === projectName)\n doesntHaveProject = false;\n // console.log(\"in if\", hasProject)\n }\n // console.log(typeof hasProject) \n // console.log(\"In donutHasProject()\", personName, projectName, hasProject)\n return doesntHaveProject\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"# Data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"peoples_projects = data.map(d => {\n let myRec = {}\n // if (d.Individual === `Totals`) return myRec;\n myRec.name = d.Individual\n // myRec.total = d.Total\n let projects = []\n //console.log(Object.entries(d))\n for (const [key, value] of Object.entries(d)) {\n //console.log(`Pre-If = key: ${key}, value: ${value}`)\n if (key != `Individual` && key != `Total` && value != `Totals` && value != null && value != 0) {\n //console.log(`Post-If = key: ${key}, value: ${value}`)\n projects.push({ project: key, value: value })\n }\n }\n myRec.projects = projects\n return myRec\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"names = d3.map(data, d => d.Individual)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"cleanProjects = projects.map(d => cleanName(d)) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"projects = basics(Object.keys(data[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"totals = basics(Object.values(data[data.length - 1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"total = totals.reduce(add)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"totals_arcs = TwoArrsToArrOfObjs(projects, totals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"data = csv_data.filter(d => d.Individual != null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"csv_data = d3.csvParse(await FileAttachment(\"UX Coverage by Star Wars.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"### Tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"Projects = peoples_projects[0].projects[0].project","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"Person = peoples_projects[peoples_projects.length - 1].name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"# Utility Functions","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleOrdinal()\n .domain(totals_arcs.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * .8 + .1), totals_arcs.length).reverse()) //orignal values - .8 + 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"function basics(temp) {\n let remove_header = temp.shift(); \n let remove_total = temp.pop(); \n return temp;\n}\n\n// https://observablehq.com/@mmakutonin/lesson-17-let-and-const","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"add = (a,b) => a + b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"function TwoArrsToArrOfObjs(ids,values) {\n let ArrOfObj = ids.map((id, index) => {return {name: id, value: values[index]}});\n var columns = [\"name\",\"value\"];\n ArrOfObj.columns = columns || [];\n return ArrOfObj\n}\n\n// How do you combine two arrays into an array of objects in JavaScript?\n// Winner: https://stackoverflow.com/questions/40539591/how-to-create-an-array-of-objects-from-multiple-arrays","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"function cleanName(Name) { \n return Name.replace(/\\s*&?\\s*/g, '');\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"function wrap(text, width) {\n text.each(function () {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.2, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (line.join(\" \").length > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", y)\n .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n .text(word);\n }\n }\n if (lineNumber == 0) {\n tspan.attr(\"dy\", `${dy + lineHeight / 2}em`);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"function arc(size = 100) {\n const radius = size / 2;\n return d3.arc().innerRadius(radius * 0.67).outerRadius(radius - 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"pie = d3.pie()\n .padAngle(0.005)\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"# Constants","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"labelHeight = 14","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"size = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"height = size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"width = size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"gap = .1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`# Appendix, Includes, Imports and more`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"import {logging} from \"@kalmdown/altocumuluss-logging\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"Pie Multiples\n\nhttps://bl.ocks.org/Andrew-Reid/960819e98873bbaf035bbf6bd2774b40","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"Tooltips - https://observablehq.com/@benoldenburg/patterns-tooltip","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1"}} 35:null