31:T401,viewof emotionTreeText = Inputs.textarea({ rows: 20, resize: true, spellcheck: true, value: ` joyful excited daring vibrant fascinating energetic stimulating cheerful amused creative playful hopeful optimistic powerful aware surprised proud successful respected worthwhile appreciated valuable important intelligent faithful confident peaceful nurturing thankful trusting secure loving serene intimate responsive thoughtful pensive content relaxed sad tired sleepy bored apathetic lonely isolated depressed miserable ashamed foolish guilty remorseful mad hurt jealous hostile sarcastic angry furious frustrated irritated selfish distant critical skeptical scared confused bewildered rejected discouraged helpless insignificant submissive inadequate insecure embarrassed anxious overwhelmed `.trim()});32:T868,{ const figureWidth = width; const figureHeight = figureWidth; const figure = svg` `; const g = d3.select(figure).select("g"); const treeData = addNodeAngles(emotionTree); const totalRadius = (figureWidth / 2) - 2; const levels = maxDepth(treeData); const radiusPerLevel = totalRadius / levels; function drawNode(node, depth, innerRadius, color) { const outerRadius = innerRadius + radiusPerLevel; const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(node.startAngle + Math.PI / 2) .endAngle(node.endAngle + Math.PI / 2); const midAngle = (node.startAngle + node.endAngle) / 2; const legibleAngle = Math.abs(midAngle - Math.PI) < Math.PI / 2 ? midAngle + Math.PI : midAngle; const textAngle = depth == 0 ? 0 : legibleAngle; const midRadius = (innerRadius + outerRadius) / 2; const textRadius = depth == 0 ? midRadius * 1.30 : midRadius; const textAnchor = [ textRadius * Math.cos(midAngle), textRadius * Math.sin(midAngle), ]; g.append("path") .attr("class", "slice") .attr("color", color.formatRgb()) .attr("d", arc); g.append("text") .attr("class", "label") .text(node.label) .attr("transform", ` translate(${textAnchor[0]} ${textAnchor[1]}) rotate(${textAngle * 180 / Math.PI}) `); for (const child of node.children) { drawNode(child, depth + 1, outerRadius, color.brighter(brighteningFactor)); } } for (const i in treeData.children) { drawNode(treeData.children[i], 0, 0, coreColors[i]); } return figure; }33:T473,function parseTreeText(text) { const lines = text.split("\n"); function parseNode(next, parentIndent) { // Get the next non-blank line let match; while (match == null && next < lines.length) { match = lines[next].match("^(\\s*)([^\\s].*)"); next++; } if (match == null) { // Must be at end return [null, next]; } // Determine whether this is really a child of the parent const indent = match[1].length; if (indent <= parentIndent) { return [null, next - 1]; } const label = match[2]; let children; [children, next] = parseChildren(next, indent); const node = { label, children, } return [node, next]; } function parseChildren(next, parentIndent) { const children = []; let childNode; while (next < lines.length) { [childNode, next] = parseNode(next, parentIndent); if (childNode == null) { break; } children.push(childNode); } return [children, next]; } const [children, _] = parseChildren(0, -1); return { label: null, children, }; }34:[{"id":"2cbab6c8cd54556159da3b48e676efadce677286f23fd9d0421b9ab0e2bd4bbeddf7e19a08e691f092946b4ec9f248c7aad119ae59db2cee7c8ed5633dd7c4ca","href":"https://static.observableusercontent.com/files/2cbab6c8cd54556159da3b48e676efadce677286f23fd9d0421b9ab0e2bd4bbeddf7e19a08e691f092946b4ec9f248c7aad119ae59db2cee7c8ed5633dd7c4ca","name":"Screen Shot 2021-08-14 at 5.07.48 PM.png","type":"image/png","lastModified":1628978894333.971,"size":144040}] 2f:{"title":"Customizable Feeling Wheel","cells":[{"id":0,"value":"# Customizable Feeling Wheel","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"$${await helpImage()}\n\nThe Feeling Wheel is an emotion chart created by Gloria Wilcox. It can help increase emotional vocabulary or uncover core emotions. Over the years, it has been adapted and expanded into many forms. The version here was tailored for middle school students.\n\nThis notebook is an editable and scalable version of the wheel. Hover over the chart and click the “︙” menu to the left to download an SVG file suitable for printing.","pinned":false,"hidden":false,"mode":"md"},{"id":317,"value":"Edit the text below to change or add to the wheel. You can even create more levels by adding additional spaces before the word.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"For more control over the font and colors, use the selectors below.","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"viewof fontFamily = Inputs.select([\n `\"Gill Sans\"`,\n `\"Futura\"`,\n `\"Helvetica\", \"Arial\"`,\n `\"Helvetica Neue\"`,\n `\"Rockwell\"`,\n `\"Chalkboard SE\", \"Chalkboard\"`,\n `\"Comic Sans\", \"Comic Sans MS\"`,\n], {\n label: \"Font\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof fontSize = Inputs.range([12, 28], {\n value: 18,\n label: \"Font Size\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"viewof lightness = Inputs.range([0, 100], {\n label: \"Lightness\",\n value: 75,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"viewof chrominance = Inputs.range([0, 100], {\n label: \"Chrominance\",\n value: 60,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"viewof brighteningFactor = Inputs.range([0, 2.0], {\n label: \"Brightening\",\n value: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"### References\n\n

\nGloria Willcox (1982) The Feeling Wheel: A Tool for Expanding Awareness of Emotions and Increasing Spontaneity and Intimacy, _Transactional Analysis Journal_, 12:4, 274–276, DOI: 10.1177/036215378201200411\n

","pinned":false,"hidden":false,"mode":"md"},{"id":369,"value":"### Code","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":331,"value":"async function helpImage() {\n const image = await FileAttachment(\"Screen Shot 2021-08-14 at 5.07.48 PM.png\").image();\n image.classList.add(\"help-image\");\n image.width = image.naturalWidth * 1 / 3;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"coreColors = {\n const l = lightness;\n const c = chrominance;\n return [\n d3.lch(l, c, 90), // yellow\n d3.lch(l, c, 60), // orange\n d3.lch(l, c, 140), // green\n d3.lch(l, c, 280), // blue\n d3.lch(l, c, 30), // red\n d3.lch(l, c, 325), // purple\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function addNodeAngles(node, startAngle = 0, totalAngle = Math.PI * 2) {\n const endAngle = startAngle + totalAngle;\n const childAngle = totalAngle / node.children.length;\n const children = node.children.map((c, i) => addNodeAngles(c, startAngle + childAngle * i, childAngle));\n\n return {\n ...node,\n children,\n startAngle,\n endAngle,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function maxDepth(node) {\n if (node.children.length == 0)\n return 0;\n \n return 1 + Math.max(...node.children.map(maxDepth));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"emotionTree = parseTreeText(emotionTreeText)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}