2f:Tca9,chart = { const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`) .style("font", "11px monospace") .style("background", "black") .style("fill", "white"); const g = svg.append("g").attr("transform", "translate(-200, 0)"); const radius = Math.min(width, height) * 0.35; const arcsIngredients = pie(dataIngredients); const arcIngredients = d3 .arc() .innerRadius(radius - 10) .outerRadius(radius - 1); const arcText = d3 .arc() .innerRadius(radius) .outerRadius(radius + 30); const groupIngredients = g.append("g").attr("class", "ingredients"); groupIngredients .selectAll(".arc") .data(arcsIngredients) .join("path") .attr("class", "arc") .attr("d", d => { const a = arcIngredients(d); console.log(a); return a; }); let minY = -1000; const minGap = 20; const targetXPos = 380; const textY = (d, arc) => { const c = arc.centroid(d); let y = c[1]; if (y < minY + minGap) { y = minY + minGap; } minY = y; return y; }; groupIngredients .selectAll(".label-connector") .data(arcsIngredients) .join("path") .attr("class", "label-connector") .attr("stroke", "white") .attr("d", d => { const c = arcText.centroid(d); const y = textY(d, arcText); return `M${c[0]} ${c[1]} L${targetXPos} ${y})`; }); minY = -1000; groupIngredients .selectAll(".label") .data(arcsIngredients) .join("text") .attr("class", "label") .text(d => d.data.name) .attr("transform", d => { const y = textY(d, arcText); return `translate(${targetXPos},${y})`; }) .call(stroke("white", "black", "10")); groupIngredients .selectAll(".line") .data(arcsIngredients) .join("text") .attr("class", "line"); const arcsModes = d3 .pie() .padAngle(0.05) .startAngle(-0.025) .endAngle(Math.PI + 0.025) .value(d => d.value) .sort(null)(dataModes); const arcModes = d3 .arc() .innerRadius(radius - 45) .outerRadius(radius - 20); const arcModesText = d3 .arc() .innerRadius(radius - 60) .outerRadius(radius - 60); const groupModes = g.append("g").attr("class", "modes"); groupModes .selectAll(".arc") .data(arcsModes) .join("path") .attr("class", "arc") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", "1") .attr("d", d => { const a = arcModes(d); console.log(a); return a; }); minY = -1000; groupModes .selectAll(".label-connector") .data(arcsModes) .join("path") .attr("class", "label-connector") .attr("stroke", "white") .attr("d", d => { const c = arcModesText.centroid(d); const y = textY(d, arcModesText); return `M${c[0]} ${y} L${0} ${y})`; }); minY = -1000; groupModes .selectAll(".label") .data(arcsModes) .join("text") .attr("class", "label") .text(d => d.data.name) .attr("transform", d => { const y = textY(d, arcModesText); return `translate(0,${y})`; }) .call(stroke("white", "black", "10")); return svg.node(); }30:[] 2d:{"title":"Shapers","cells":[{"id":0,"value":"md`# Shapers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof modesInput = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof ingredientsInput = form(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"dataIngredients = ingredients.map(d => ({\n name: d,\n value: ingredientsInput[d]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"dataModes = modes.map(d => ({ name: d, value: modesInput[d] }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"pie = d3\n .pie()\n .padAngle(0.01)\n .startAngle(-0.005)\n .endAngle(Math.PI + 0.005)\n .value(d => d.value)\n .sort(null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"color = d3.scaleOrdinal().range(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"stroke = (textColor, strokeColor, strokeWidth) => {\n return d => {\n d.attr(\"stroke\", strokeColor)\n .attr(\"stroke-width\", strokeWidth)\n .clone(true)\n .attr(\"stroke-width\", 0)\n .attr(\"fill\", textColor);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"colors = [\n '#409FC9',\n '#2970A6',\n '#2970A6',\n '#272049',\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"ingredients = [\n 'Integrating',\n 'Expanding',\n 'Intuiting',\n 'Navigating',\n 'Sensing',\n 'Noting',\n 'Giving',\n 'Relating',\n 'Discerning',\n 'Expressing',\n 'Trusting'\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"modes = [\n \"Learner\",\n \"Giver\",\n \"Coach\",\n \"Mobiliser\",\n \"Teacher\"\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"import {form} from \"@mbostock/form-input\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}