3f:null 40:["$","title",null,{"children":"Motivational Pie Chart | Brett Adam | Observable"}] 46:T46b,# Motivational Pie Chart This is a technique I picked up during my early days at Zendesk^{[[1](#footnote1)]}. It's intended as a checkpoint / conversation starter between a manager and their direct report. The idea is that you ask the employee to think about their primary sources of motivation and the big things that matter to them. It could be one or two things or a handful. Most people seem to pick four to five. You then ask them to try to weight each source of motivation as a chunk out of 100 and draw a pie chart. The final, but most important, step is for them to color each segment green, yellow or red depending on whether that source of motivation is currently healthy, at risk or in trouble. I've tried to use Google Sheets and Excel for doing these in the past but it was always a pain to have to manually select each segment and set the color - there appears to be no way to set the color from a cell value.^{[[2](#footnote2)]} So here's a quick rehack of the [@d3/pie-chart](https://observablehq.com/@d3/pie-chart) example from Mike Bostock that explicitly allows the colors to be specified. 47:Tefc,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/pie-chart // modified @verveguy to allow color to be specified in data & options function PieChart( data, { name = ([x]) => x, // given d in data, returns the (ordinal) label value = ([, y]) => y, // given d in data, returns the (quantitative) value title, // given d in data, returns the title text width = 640, // outer width, in pixels height = 400, // outer height, in pixels innerRadius = 0, // inner radius of pie, in pixels (non-zero for donut) outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels labelRadius = innerRadius * 0.2 + outerRadius * 0.8, // center radius of labels format = ",", // a format specifier for values (in the label) names, // array of names (the domain of the color scale) colorfield = (d) => d.name, // given d in data, returns color name. Defaults to name colors, // Map of colors for color names stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths strokeWidth = 1, // width of stroke separating wedges strokeLinejoin = "round", // line join of stroke separating wedges padAngle = stroke === "none" ? 1 / outerRadius : 0 // angular separation between wedges } = {} ) { // Compute values. const N = d3.map(data, name); const V = d3.map(data, value); const C = colorfield ? d3.map(data, colorfield) : d3.map(data, name); const I = d3.range(N.length).filter((i) => !isNaN(V[i])); // Unique the color names. if (names === undefined) names = C; names = new d3.InternSet(names); let color = undefined; // Chose a default color scheme based on cardinality. if (colors === undefined) { colors = d3.schemeSpectral[names.size]; if (colors === undefined) colors = d3.quantize( (t) => d3.interpolateSpectral(t * 0.8 + 0.1), names.size ); // Construct scales. color = d3.scaleOrdinal(names, colors); } else { colors = new Map(colors); color = d3.scaleOrdinal().domain(colors.keys()).range(colors.values()); } // Compute titles. if (title === undefined) { const formatValue = d3.format(format); title = (i) => `${N[i]}\n${formatValue(V[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } // Construct arcs. const arcs = d3 .pie() .padAngle(padAngle) .sort(null) .value((i) => V[i])(I); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg .append("g") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .selectAll("path") .data(arcs) .join("path") .attr("fill", (d) => color(C[d.data])) .attr("d", arc) .append("title") .text((d) => title(d.data)); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 18) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", (d) => `translate(${arcLabel.centroid(d)})`) .selectAll("tspan") .data((d) => { const lines = `${title(d.data)}`.split(/\n/); return d.endAngle - d.startAngle > 0.25 ? lines : lines.slice(0, 1); }) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => (i ? null : "bold")) .text((d) => d); return Object.assign(svg.node(), { scales: { color } }); }48:[] 44:{"id":"09b5096ed8bb5f60","slug":"motivational-pie-chart","title":"Motivational Pie Chart","thumbnail":"c175d9e3ad20e605ece70e9b366224e76c6ca1e0ff175921c59e4036b4186577","access_level":"public","create_time":"$D2022-11-28T23:43:43.561Z","update_time":"$D2022-12-05T03:31:44.566Z","view_time":null,"first_public_time":"$D2022-11-30T03:59:05.340Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"f1772220349abc7b","login":"verveguy","name":"Brett Adam","avatar_url":"https://avatars-next.observableusercontent.com/60b8ad6a08b219b5b03c2b3b2f74808cb89eaf842bbb0054c9cca657145ba38f","tier":"starter_2024","bio":"Technology guy. Been around a while. Done a bunch of stuff. Mostly work in technical leadership / software architecture domains these days.","following":false},"version":199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f69806931c29947a","login":"verveguy","name":"Brett Adam","avatar_url":"https://avatars-next.observableusercontent.com/60b8ad6a08b219b5b03c2b3b2f74808cb89eaf842bbb0054c9cca657145ba38f","tier":null,"bio":"Technology guy. Been around a while. Done a bunch of stuff. Mostly work in technical leadership / software architecture domains these days.","following":false}],"members":[{"type":"individual","id":"f69806931c29947a","login":"verveguy","name":"Brett Adam","avatar_url":"https://avatars-next.observableusercontent.com/60b8ad6a08b219b5b03c2b3b2f74808cb89eaf842bbb0054c9cca657145ba38f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Motivational Pie Chart","cells":[{"id":0,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"## Using the chart\nSimply update the motivations array object and the chart will update. Fork this notebook to make your own motivation charts to share with friends, family and co-workers! You can also grab the SVG or embed the chart cell elsewhere.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"motivations = [\n { name: \"Travel\", value: 5, status: \"green\" },\n { name: \"Support for my mission\", value: 25, status: \"yellow\" },\n { name: \"Work/life balance\", value: 30, status: \"yellow\" },\n { name: \"Eating lots of cake\", value: 60, status: \"green\" },\n { name: \"Compensation\", value: 10, status: \"red\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof chart = PieChart(motivations, {\n name: (d) => d.name,\n value: (d) => d.value,\n colorfield: (d) => d.status,\n colors: [\n [\"green\", `#2dc937`],\n [\"yellow\", `#f7b416`],\n [\"red\", `#ff3636`]\n ],\n width,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"footnote1 = footnote(\n \"\",\n 1,\n `I believe that it was probably [David Hanrahan](https://www.linkedin.com/in/davidhanrahan/) that introduced the idea to me at Zendesk and that he took it from [Jennifer Dulski](https://www.linkedin.com/in/jdulski/), former COO of Change.org. [This article](https://www.huffpost.com/entry/the-end-of-worklife-balan_b_6808604) would tend to confirm that hypothesis.`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"footnote2 = footnote(\n \"\",\n 2,\n \"If you prefer paper tools, [here's a template](http://greatresultsteambuilding.net/wp-content/uploads/2014/11/The-Motivational-Pie-Chart.pdf)\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"---\nModified source from [original piechart example](https://observablehq.com/@d3/pie-chart) that allows color to be overridden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"footnote = (referencingCellName, number, text) => {\n return md`

^ ${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"