3e:null 3f:["$","title",null,{"children":"Propeller chart | Ross Mills | Observable"}] 45:Te94,chart = { const outerWidth = 450; const margin = 16; // Specify the chart’s dimensions. const width = outerWidth - margin * 2; const height = Math.min(width, 900); // Distance of label from arc const labelOffset = 32; const innerRadius = 4; const outerRadius = Math.min(width, height) / 2 - labelOffset - 2; const ranges = { "url(#Gradient1)": [0, 50], "url(#Gradient2)": [50, 70], "url(#Gradient3)": [70, 100] }; const rangeKeys = Object.keys(ranges); function getColor(d) { const value = form[d.data]; let i = 0; for (let rangeKey of rangeKeys) { const range = invertRanges.length ? ranges[rangeKeys[rangeKeys.length - 1 - i]] : ranges[rangeKey]; if (value >= range[0] && value < range[1]) { return rangeKey; } i++; } } const scaleArcRadius = d3 .scaleLinear() .domain([1, 100]) .range([innerRadius, outerRadius]); // Create the pie layout and arc generator. const pie = d3 .pie() .sort(null) .value(1 / formKeys.length); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => { return d ? scaleArcRadius(form[d.data]) : 0; }); const labelRadius = arc.outerRadius()() * 0.8; // A separate arc generator for labels. const arcLabel = d3 .arc() .innerRadius(outerRadius) .outerRadius(outerRadius + labelOffset); const arcs = pie(formKeys); // Create the SVG container. const svg = d3 .create("svg") .attr("width", outerWidth) .attr("height", outerWidth) .attr("viewBox", [-outerWidth / 2, -outerWidth / 2, outerWidth, outerWidth]) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); svg.html( ` ` ); const vis = svg.append("g").classed("vis", true); // Add a sector path for each value. vis .append("g") .attr("stroke", "white") .style("filter", "url(#shadow)") .selectAll() .data(arcs) .join("path") .attr("fill", (d) => getColor(d)) .attr("stroke", "black") .attr("d", arc) .append("title") .text((d) => `${d}: ${form[d]}`); // Create a new arc generator to place a label close to the edge. // The label shows the value if there is enough room. vis .append("g") .attr("text-anchor", "middle") .selectAll() .data(arcs) .join("text") .attr("transform", (d) => `translate(${arcLabel.centroid(d)})`) .call((text) => text .append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text((d, i) => labels[i]) ) .call((text) => text .filter((d) => d.endAngle - d.startAngle > 0.25) .append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text((d) => form[d.data]) ); return svg.node(); }46:[] 43:{"id":"f7e203b6155d7e6b","slug":null,"title":"Propeller chart","thumbnail":"80c50447ff281a841fdf998b34f231551254b10a31bdaa52cfe0699d8f526dfe","access_level":"public","create_time":"$D2023-07-21T08:56:14.949Z","update_time":"$D2024-01-25T12:31:00.904Z","view_time":null,"first_public_time":"$D2024-01-25T11:58:48.753Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":209,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a1e9d12acb8e1d55","slug":"ui-prototypes","title":"UI Prototypes","owner":{"id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills"}},"type":"notebook","body":{"titling":"auto","title":"Propeller chart","cells":[{"id":0,"value":"# Propeller chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof numKpis = Inputs.range([1, 8], { label: \"Num KPIs\", step: 1, value: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof form = {\n const kpiInputs = {};\n for (let i = 1; i <= numKpis; i++) {\n kpiInputs[\"kpi\" + i] = Inputs.range([1, 100], {\n label: \"KPI \" + i,\n value: Math.floor(Math.random() * 100),\n step: 5\n });\n }\n return Inputs.form(kpiInputs);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof invertRanges = Inputs.checkbox([\"Invert Ranges\"], {\n value: [\"Invert Ranges\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"labels = [\n \"Tooling Cost\",\n \"Part Cost\",\n \"Quality\",\n \"Issues\",\n \"Schedule\",\n \"Customer Satisfaction\",\n \"Resourcing\",\n \"Suppliers\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"formKeys = Object.keys(form)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"