2e:null 2f:["$","title",null,{"children":"Draggable Pie/Donut Chart | Julien Barnier | Observable"}] 34:Td45,chart = { const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const t = svg .transition() .duration(transition_speed) .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 (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("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)) ), 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)) ) ); } //update(pie_data); return Object.assign(svg.node(), { update }); }35:[{"id":"bee673b386dd058ab8d2cf353acbedc6aa01ebd1e6f63e2a9ab1b4273c7e6efd1eeea526345e4be7f0012d5db3ec743ef39ad9e6a043c196670bf9658cb02e79","href":"https://static.observableusercontent.com/files/bee673b386dd058ab8d2cf353acbedc6aa01ebd1e6f63e2a9ab1b4273c7e6efd1eeea526345e4be7f0012d5db3ec743ef39ad9e6a043c196670bf9658cb02e79","name":"population-by-age.csv","type":"application/octet-stream","lastModified":1595926981872.074,"size":273}] 32:{"id":"e039bf153c406e38","slug":"draggable-pie-donut-chart","title":"Draggable Pie/Donut Chart","thumbnail":"1e87dce8c7ba1e90e0ae857038d1bbaa6ac06bf80669005df52460f6b30ff356","access_level":"public","create_time":"$D2020-07-28T09:03:01.872Z","update_time":"$D2020-07-29T12:00:01.573Z","view_time":null,"first_public_time":"$D2020-07-28T16:27:57.010Z","has_unpublished_edits":null,"fork":{"id":"50064204b82fdf22","slug":"pie-chart-component","title":"Pie chart component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":27,"starred":false,"owner":{"type":"team","id":"1a55a189adb52dd7","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":"starter_2024"},"version":898,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef385df54c3fe400","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":null}],"members":[{"type":"individual","id":"ef385df54c3fe400","login":"juba","name":"Julien Barnier","avatar_url":"https://avatars-next.observableusercontent.com/39220b21cbf7eff8318ad71b8f1f1b73aaaa40953e51c89e2bf097d8e901318c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":25,"collection":{"id":"7ce57e5117a4f35d","slug":"robservable","title":"robservable","owner":{"id":"1a55a189adb52dd7","login":"juba","name":"Julien Barnier"}},"type":"notebook","body":{"title":"Draggable Pie/Donut Chart","cells":[{"id":0,"value":"md`# Draggable Pie/Donut Chart\n\nAdapted from Mike Bostock's [Pie Chart](https://observablehq.com/@d3/pie-chart) notebook and David Buezas's [Pie Chart Labels](http://bl.ocks.org/dbuezas/9572040) block.\n\nSlices are draggable.\n\n[robservable](https://juba.github.io/robservable/) users can call it from R with something like the following. Use the input named list to customize the [settings](#sec_settings) :\n\n\\`\\`\\`r\n## Data must be a data frame with 'name' and 'value' columns\ndf <- data.frame(table(mtcars$cyl))\nnames(df) <- c(\"name\", \"value\")\n## Call to robservable\nrobservable(\n \"https://observablehq.com/d/e039bf153c406e38\", \n include = c(\"chart\", \"draw\"),\n hide = \"draw\",\n input = list(\n data = df\n )\n)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"draw = chart.update(pie_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"sec_settings = md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"md`Set donut_proportion to 0 to make a pie chart, and to a number between 0 and 1 to make a donut chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"donut_proportion = 0.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"md`Set dragging to false to disable slice dragging.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"dragging = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"palette = \"schemePaired\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"transition_speed = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"data = d3.csvParse(await FileAttachment(\"population-by-age.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`## Notebook code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"mutable debug = null","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":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":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":35,"value":"color = d3.scaleOrdinal(d3[palette])\n .domain(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"outer_radius = Math.min(width, height) / 2 - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"inner_radius = outer_radius * 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"outer_pie_radius = outer_radius * 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"inner_pie_radius = outer_pie_radius * donut_proportion","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] = outer_radius * 0.95 * (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] = outer_radius * (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)\n .outerRadius(outer_pie_radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"arcLabel = d3\n .arc()\n .innerRadius(outer_radius * 0.95)\n .outerRadius(outer_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, outer_pie_radius * 0.8))\n .outerRadius(outer_pie_radius)","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":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"