2d:null 2e:["$","title",null,{"children":"Pie/Donut Chart (with draggable slices) | Christophe Yamahata | Observable"}] 33:T10ef,chart = { const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const t = svg .transition() .ease(d3.easeLinear) .end(); const g_arcs = svg.append("g").attr("stroke", "white"); const g_labels = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle"); const g_lines = svg.append("g"); function update(dat) { let arcs = pie(dat); function dragstart(d, i) { g_arcs .selectAll("path") .attr("opacity", (dd, ii) => d.data.pie_key == dd.data.pie_key ? 1 : 0.3 ); } function drag(d, index) { if ( mutable current_order !== null && d.data.pie_order != mutable current_order ) { const new_order = mutable current_order; dat = dat.map(dd => { if (dd.pie_order == mutable current_order) { dd.pie_order = d.data.pie_order; } return dd; }); dat[index].pie_order = new_order; update(dat); } } function dragend(d, i) { d3.selectAll("path").attr("opacity", 1); } g_arcs .selectAll("path") .data(arcs, d => d.data.pie_key) .join( enter => enter.append("path").call(selection => { if (inputs_graph_2.dragging) { selection .call( d3 .drag() .on("start", dragstart) .on("drag", drag) .on("end", dragend) ) .style("cursor", "move"); } selection .attr("fill", d => color(d.data.name)) .attr("d", arc) .on("mouseover", pie_in) .on("mouseout", pie_out) .append("title") .text(d => `${d.data.name}\n${d.data.value.toLocaleString()}`); }), update => update.call(selection => selection.transition(t).attr("d", arc)) ); g_labels .selectAll("text") .data(arcs, d => d.data.pie_key) .join( enter => enter.append("text").call(selection => selection .attr("font-size", inputs_graph_2.font_size) .attr("dy", ".35em") .attr("transform", d => `translate(${label_position(d)})`) .style("text-anchor", d => label_anchor(d)) .call(text => text.append("tspan").text(d => d.data.name+" ("+ d.data.value + " " + chart_unit+")")) ), update => update.call(selection => selection .transition(t) .style("text-anchor", d => label_anchor(d)) .attr("transform", d => `translate(${label_position(d)})`) ) ); g_lines .selectAll("polyline") .data(arcs, d => d.data.pie_key) .join( enter => enter .append("polyline") .style("fill", "none") .style("opacity", 0.5) .style("stroke", "black") .style("stroke-width", "1px") .call(selection => selection.attr("points", d => line_position(d))), update => update.call(selection => selection.transition(t).attr("points", d => line_position(d)) ) ); } svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 32) .attr("text-anchor", "middle") .append("text") .call(text => text.append("tspan") .attr("y", "-0.8em") .attr("font-weight", "bold") .text(chart_title.line1)) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 20) .attr("text-anchor", "middle") .append("text") .call(text => text.append("tspan") .attr("y", "0.4em") .attr("font-weight", "bold") .text(chart_title.line2)) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 36) .attr("text-anchor", "middle") .append("text") .call(text => text.append("tspan") .attr("y", "2em") .attr("font-weight", "normal") .text(total+" "+chart_unit)) return Object.assign(svg.node(), { update }); }34:[] 31:{"id":"6295d716d36fad82","slug":"pie-donut-chart","title":"Pie/Donut Chart (with draggable slices)","thumbnail":"c24296bda799f3bab73387d111bafb0157449e65f47d2cb19b4ddfd15ccb1511","access_level":"public","create_time":"$D2023-04-16T15:00:30.099Z","update_time":"$D2023-04-18T21:37:48.700Z","view_time":null,"first_public_time":"$D2023-04-16T15:00:30.099Z","has_unpublished_edits":null,"fork":{"id":"e039bf153c406e38","slug":"draggable-pie-donut-chart","title":"Draggable Pie/Donut Chart","owner":{"id":"1a55a189adb52dd7","login":"juba","name":"Julien Barnier"}},"stars":2,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":2421,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ddde4e59d0fdf525","slug":"curves","title":"Curves, Graphs and Diagrams","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Pie/Donut Chart (with draggable slices)","cells":[{"id":0,"value":"

Pie/Donut Chart (with draggable slices)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1903,"value":"*Adapted from [@juba](https://observablehq.com/@juba)'s [Draggable Pie/Donut Chart](https://observablehq.com/@juba/draggable-pie-donut-chart) notebook.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1741,"value":"

This notebook provides an easy way to generate pie/donut charts by copy/paste.\n
Enter or copy/paste data in the following textarea window: ^(*)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1272,"value":"viewof textarea_data = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"

* Direct input: Data x; y separated by a semicolon. ⌨\n
Paste data: Copy/paste x and y data from a spreadsheet. 📝\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1494,"value":"viewof chart_title = columns({\n line1 : Inputs.text({label: \"Chart title (line 1):\", placeholder: \"Enter the title (line 1)\", value: \"Smartphone\"}),\n line2 : Inputs.text({label: \"Chart title (line 2):\", placeholder: \"Enter the title (subheading, line 2)\", value: \"Cost of fabrication\"}),\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"viewof chart_unit = Inputs.text({label: \"Unit:\", placeholder: \"Enter the unit (e.g., currency)\", value: \"$\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"

↳ Total calculated from the above data: ${total} ${chart_unit}.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1693,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2271,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2187,"value":"viewof inputs_graph_2 = columns({\n dragging : Inputs.toggle({label: \"Draggable slices\", value: true}),\n font_size : Inputs.range([10, 22], {value: 18, step: 1, label: \"Font size (labels)\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"viewof inputs_graph_1 = columns({\n palette : Inputs.select(new Map([[\"Custom colors\", \"myColors\"],\n [\"Spectrum\",\"schemeSpectral\"],[\"Red / Yellow / Blue\",\"schemeRdYlBu\"],[\"Red / Yellow / Green\", \"schemeRdYlGn\"],\n [\"Red / Grey\",\"schemeRdGy\"],[\"Red / Blue\",\"schemeRdBu\"],[\"Red / Yellow / Blue\",\"schemeRdYlBu\"], \n [\"Purple / Green (I)\",\"schemePiYG\"], [\"Purple / Green (II)\",\"schemePRGn\"], [\"Purple / Brown\",\"schemePuOr\"],\n [\"Brown / Green\",\"schemeBrBG\"],[\"Purples\",\"schemePurples\"],[\"Blues\",\"schemeBlues\"],[\"Greens\",\"schemeGreens\"],\n [\"Oranges\",\"schemeOranges\"],[\"Reds\",\"schemeReds\"]]), {value: \"schemeRdGy\", label: \"Color scheme\"}),\n donut_proportion : Inputs.range([0, 0.9], {value: 0.6, step: 0.05, label: \"Donut proportion\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1982,"value":" # Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1037,"value":" ## Data and settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2311,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"height = Math.min(width, 450)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"custom_colors = [\"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\", \"#8c564b\", \"#e377c2\", \"#7f7f7f\", \"#bcbd22\", \"#17becf\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"pie_radius = height/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"inner_pie_radius = pie_radius * inputs_graph_1.donut_proportion","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"total = {\n let sum = 0;\n for(let i=0; i< data.length; i++) {\n sum += data[i].value;\n }\n sum = Math.round(sum*10)/10;\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"data_x = {\n var data_x = [];\n var data_ = textarea_data.replaceAll(\";\",\"\\t\").split(\"\\n\");\n const n = data_.length;\n for(var i=2; i < n; i++){\n data_x.push(data_[i].split('\\t')[0]);\n }\n return data_x;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"data_y = {\n var data_y = [];\n var data_ = textarea_data.replaceAll(\";\",\"\\t\").split(\"\\n\");\n const n = data_.length;\n for(var i= 2; i < n; i++){\n data_y.push(parseFloat(data_[i].split('\\t')[1])); \n }\n return data_y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"data = {\n var data_curve = [];\n const n = data_x.length;\n for(var i = 0; i < n; i++) \n {\n data_curve.push({\"name\":data_x[i],\"value\":data_y[i]}); \n }\n return data_curve;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"pie_data = data.map((d, i) => Object.assign(d, { pie_key: i, pie_order: i }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"## Script","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1268,"value":"draw = chart.update(pie_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"mutable current_order = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"color = {\n let taint = [];\n if(inputs_graph_1.palette == \"myColors\") {\n taint = custom_colors;\n } else if (pie_data.length >= 3 && pie_data.length <=9) {\n taint = d3[inputs_graph_1.palette][pie_data.length];\n } else {\n taint = d3[inputs_graph_1.palette][9];\n }\n let color = d3.scaleOrdinal(taint); \n let reverted = taint; \n if(inputs_graph_1.palette == \"schemeBlues\" || inputs_graph_1.palette == \"schemeGreens\" || \n inputs_graph_1.palette == \"schemeReds\" || inputs_graph_1.palette == \"schemeOranges\" || inputs_graph_1.palette == \"schemePurples\"){\n reverted = [...taint].reverse();\n color = d3.scaleOrdinal(reverted);\n }\n return color;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"pie = d3\n .pie()\n .value(d => d.value)\n .sort((a, b) => {\n return a.pie_order - b.pie_order;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"pie_in = function(d, i) {\n mutable current_order = d.data.pie_order;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"pie_out = function(d, i) {\n mutable current_order = null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"line_position = function(d) {\n let pos = arcLabel.centroid(d);\n pos[0] = pie_radius * 0.98 * (midAngle(d) < Math.PI ? 1 : -1);\n return [arcLine.centroid(d), arcLabel.centroid(d), pos];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"label_anchor = function(d) {\n return midAngle(d) < Math.PI ? \"start\" : \"end\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"label_position = function(d) {\n let pos = arcLabel.centroid(d);\n pos[0] = pie_radius *1.08* (midAngle(d) < Math.PI ? 1 : -1);\n return pos;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"midAngle = d => d.startAngle + (d.endAngle - d.startAngle) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"arc = d3\n .arc()\n .innerRadius(inner_pie_radius*0.9)\n .outerRadius(pie_radius*0.9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"arcLabel = d3\n .arc()\n .innerRadius(pie_radius * 0.95)\n .outerRadius(pie_radius * 0.95)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"arcLine = d3\n .arc()\n .innerRadius(Math.max(inner_pie_radius*0.75, pie_radius*0.75))\n .outerRadius(pie_radius*1.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2165,"value":"// https://observablehq.com/@bcardiff/observable-columns\ncolumns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `width:200px; display: grid; grid-gap: 10px 100px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"