2b:null 2c:["$","title",null,{"children":"Donut chart with arced labels, step-wise tooltip, and dynamic text wrapping | Noble | Observable"}] 31:T1d92,function donutChart() { // TODO: remove when transferring out of Observable d3.select("#chart").selectAll("svg").remove() // defined via accessor functions var width, height, margin = { top: 10, right: 10, bottom: 10, left: 10 }, colour = d3.scaleOrdinal(d3.schemeCategory10), // colour scheme variable, // value in data that will dictate proportions on chart category, // compare data by padAngle, // effectively dictates the gap between slices floatFormat = d3.format('.4r'), cornerRadius, // sets how rounded the corners are on each slice percentFormat = d3.format(',.2%'), flipLabelsAfterAngle = null, tau = Math.PI * 2, showTooltip, tooltipSteps, tooltipEmphasizedTextDelimiter, tooltipReadingTime, emptyStateText = "Lorem ipsum" // defined internally var tooltip // generate chart function chart(selection) { selection.each(function(data) { // --- pie/arc generators ----------------------------------------- // set radius var radius = Math.min(width, height) / 2 // define pie generator var pie = d3.pie() .startAngle(-90 * Math.PI / 180) .endAngle(-90 * Math.PI / 180 + 2 * Math.PI) .value(d => floatFormat(d[variable])) .sort(null) // define arc generator difference between outer and inner raduis // dictates thickness of donut var innerRadius = radius * 0.7, outerRadius = radius * 0.8, arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .cornerRadius(cornerRadius) .padAngle(padAngle) // --- setup ------------------------------------------------------ // append the svg object to the selection var svg = selection.append('svg') .attr("font", "10px serif") .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') // g elements to keep elements within svg modular svg.append('g').attr('class', 'slices') svg.append('g').attr('class', 'sliceOuterLabels') svg.append('g').attr('class', 'hiddenArcs') // donut slices and hidden arcs for text labels to wrapText around var path = svg.select('.slices') .datum(data).selectAll('path') .data(pie) .enter().append('path') .attr('id', (d, i) => "slice" + i) .attr('stroke', (d) => colour(d.data[category])) .attr('stroke-width', '1px') .attr('fill', (d) => colour(d.data[category])) .attr('fill-opacity', 0.65) .attr('d', arc) .call(bindMouseEvents) .each(function(d, i) { // search pattern for everything between the start and the first capital L var firstArcSection = /(^.+?)L/ // grab everything up to the first Line statement var origArc = firstArcSection.exec(d3.select(this).attr("d"))[1] // replace all the commas so that IE can handle it var newArc = origArc.replace(/,/g, " ") // create new invisible arc that text can fit to d3.select('.hiddenArcs') .append("path") .attr("class", "hiddenArcs") .attr("id", "hiddenArc" + i) .attr("d", newArc) .style("fill", "none") }) // slice outer labels svg.select(".sliceOuterLabels") .datum(data).selectAll("text") .data(pie) .enter().append("text") .attr("dy", -12) .append("textPath") .attr("startOffset", "50%") .style("text-anchor", "middle") .attr("xlink:href",(d, i) => "#hiddenArc" + i) .text(d => d.data.label) // add tooltip if (showTooltip) { console.log(tooltipSteps) tooltip = stepwiseTooltip() .r(innerRadius - 10) .width(innerRadius * 2) .height(innerRadius * 2) .margin({ top: 0, left: 0, right: 0, bottom: 0 }) .steps(tooltipSteps) .emphasizedTextDelimiter(tooltipEmphasizedTextDelimiter) .readingTime(tooltipReadingTime) .scaleFactor(0.5) .lineHeight(16) .emptyStateText(emptyStateText) svg.call(tooltip) svg.select('.stepwise-tooltip') .attr('transform', `translate(-${innerRadius}, -${innerRadius})`) } }) } // --- helpers -------------------------------------------------- function bindMouseEvents(selection) { selection.each(function() { let _this = d3.select(this), datum = _this.datum(), label = datum.data.label // bind mouseover/mouseout functions _this .attr('cursor', (showTooltip && tooltipSteps && tooltipSteps[label]) ? 'pointer' : 'default') .on('mouseover', onMouseOver) .on('mouseout', onMouseOut) // on hover, show tooltip function onMouseOver() { if (showTooltip && tooltipSteps && tooltipSteps[label]) { tooltip .hide() .clear() .steps(tooltipSteps[label]) .update() .show() .start() } } // on unhover, hide tooltip function onMouseOut() { if (showTooltip && tooltipSteps && tooltipSteps[label]) { tooltip .hide() .clear() } } }) } // --- accessors ------------------------------------------------ chart.width = function(value) { if (!arguments.length) return width width = value return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.margin = function(value) { if (!arguments.length) return margin margin = value return chart } chart.padAngle = function(value) { if (!arguments.length) return padAngle padAngle = value return chart } chart.cornerRadius = function(value) { if (!arguments.length) return cornerRadius cornerRadius = value return chart } chart.colour = function(value) { if (!arguments.length) return colour colour = value return chart } chart.variable = function(value) { if (!arguments.length) return variable variable = value return chart } chart.category = function(value) { if (!arguments.length) return category category = value return chart } chart.flipLabelsAfterAngle = function(value) { if (!arguments.length) return flipLabelsAfterAngle flipLabelsAfterAngle = value return chart } chart.showTooltip = function(value) { if (!arguments.length) return showTooltip showTooltip = value return chart } chart.tooltipSteps = function(value) { if (!arguments.length) return tooltipSteps tooltipSteps = value return chart } chart.tooltipEmphasizedTextDelimiter = function(value) { if (!arguments.length) return tooltipEmphasizedTextDelimiter tooltipEmphasizedTextDelimiter = value return chart } chart.tooltipReadingTime = function(value) { if (!arguments.length) return tooltipReadingTime tooltipReadingTime = value return chart } chart.emptyStateText = function(value) { if (!arguments.length) return emptyStateText emptyStateText = value return chart } return chart } 32:T2fd0,function stepwiseTooltip() { let r = 100, width = 200, height = 200, margin = { top: 0, right: 0, left: 20, bottom: 20 }, backgroundColor = '#fff', ringBackgroundColor = '#eee', ringForegroundColor = '#1BCFD3', textColor = '#414141', orient = "bottom-left", emptyStateText = "", steps = [], emphasizedTextDelimiter, emphasizedTextColor = '#1BCFD3', readingTime = 1000, scaleFactor, lineHeight // defined internally let state = { i: -1, interval: null }, container, emptyState, g, circle, ringFg, wrapSize, stepElements, arc, tau = Math.PI * 2 function chart(selection) { selection.each(function() { // define arc generator to be used by progress ring arc = d3.arc() .outerRadius(r) .innerRadius(r - 1) .startAngle(0) // grab width and height of wrapping element to be used // in 'position' helper function wrapSize = { width: selection.attr('width'), height: selection.attr('height') } // define outer wrap group container = selection.append('g') .attr('class', 'stepwise-tooltip') .call(position) // add inner wrap for empty state centered within outer wrap emptyState = container.append('g') .attr('class', 'empty-state') .attr('transform', `translate(${width / 2}, ${height / 2})`) // add inner wrap for dynamic tooltip centered within outer wrap g = container.append('g') .attr('transform', `translate(${width / 2}, ${height / 2})`) // hide tooltip by default, must manually trigger visibility via // 'show' and 'hide' helper functions g.style('opacity', 0) // add bg circle circle = g.append('circle') .attr('class', 'underlay') .attr('r', r) .attr('fill', backgroundColor) // populate a group with elements whose visibility will be toggled // as we progress through the animation stepElements = g.append('g') .attr('class', 'step-elements') .call(addStepElements) // add progress ring background let ringBg = g.append('path') .attr('class', 'ring-background') .datum({ endAngle: tau }) .attr('d', arc) .style('stroke', ringBackgroundColor) .style('stroke-width', '2px') // add progress ring foreground addRingFg() emptyState.append('circle') .attr('r', r) .attr('fill', '#fbfbfb') .style('stroke', '#eee') .style('stroke-width', '2px') emptyState.append('text') .attr('y', 0) .attr('x', 0) .attr('dy', 0) .attr('fill', '#575555') .style('text-anchor', 'middle') .text(emptyStateText) .call(wrap, { scaleFactor: (scaleFactor) ? scaleFactor : 0.7, lineHeight: (lineHeight) ? lineHeight : 14 }) }) } // --- helpers ----------------------- function addRingFg() { ringFg = g.append('path') .attr('class', 'ring-foreground') .datum({ endAngle: 0 }) .attr('d', arc) .style('stroke', ringForegroundColor) .style('stroke-width', '2px') } function addStepElements(selection) { if (!steps) return chart selection.each(function() { let stepElements = selection.selectAll('g') .data(steps) .enter().append('g') .attr('class', 'step-element') .attr('index', (d, i) => i) .attr('text-anchor', 'middle') .style('opacity', 0) .append('text') .text(d => d) .each(function() { d3.select(this) .call(wrap, { scaleFactor: (scaleFactor) ? scaleFactor : 0.7, lineHeight: (lineHeight) ? lineHeight : 14 }) .call(emphasize) }) }) } function position(selection) { let translate if ("bottom-left" === orient) translate = `translate(${margin.left}, ${wrapSize.height - height - margin.bottom})` if ("bottom-right" === orient) translate = `translate(${wrapSize.width - width - margin.right}, ${wrapSize.height - height - margin.bottom})` if ("top-left" === orient) translate = `translate(${margin.left}, ${margin.top})` if ("top-right" === orient) translate = `translate(${wrapSize.width - width - margin.right}, ${margin.top})` selection.attr('transform', translate) } function arcTween(newAngle) { return function(d) { var interpolate = d3.interpolate(d.endAngle, newAngle) return function(t) { d.endAngle = interpolate(t) return arc(d) } } } function step() { let prevIndex = state.i, nextIndex = (steps.length - 1 === prevIndex) ? 0 : prevIndex + 1, prevEl = stepElements.selectAll('.step-element').filter(d => d === steps[prevIndex]), nextEl = stepElements.selectAll('.step-element').filter(d => d === steps[nextIndex]) // hide prev step element prevEl.transition() .duration(250) .style('opacity', 0) // show next step element nextEl.transition() .duration(250) .style('opacity', 1) // restart progress ring animation if (0 === nextIndex && -1 !== prevIndex) restartRingAnimation() // update state state.i = nextIndex } function restartRingAnimation() { let tweenDuration = readingTime * steps.length ringFg .datum({ endAngle: 0 }) .transition() .duration(tweenDuration) .ease(d3.easeLinear) .attrTween('d', arcTween(tau)) } function emphasize(selection) { if (!emphasizedTextDelimiter) return selection.selectAll('tspan') .each(function() { let text = d3.select(this).text() if (text.indexOf(emphasizedTextDelimiter) >= 0) { let buffer = text .split(emphasizedTextDelimiter) .map((str, i) => (i === 0) ? str + " " : str) d3.select(this).html("") .selectAll('tspan') .data(buffer) .enter().append('tspan') .text(d => d) .attr('fill', (d, i) => (0 === i) ? emphasizedTextColor : 'auto') } }) } function wrap(selection, params) { let scaleFactor = (params && params.scaleFactor) ? params.scaleFactor : 0.6, lineHeight = (params && params.lineHeight) ? params.lineHeight : 18, text = selection.text(), _words = words(text), _targetWidth = targetWidth(text), _lines = lines(_words, _targetWidth), _textRadius = textRadius(_lines) // split text into words function words(text) { let words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/ if (!words[words.length - 1]) words.pop(); if (!words[0]) words.shift(); return words; } // measure simulated text width function measureWidth(text) { const context = document.createElement("canvas").getContext("2d"); return context.measureText(text).width; } // calculate target width function targetWidth(text) { return Math.sqrt(measureWidth(text.trim()) * lineHeight) } // split text into lines function lines(words, targetWidth) { let line; let lineWidth0 = Infinity; const lines = []; for (let i = 0, n = words.length; i < n; ++i) { let lineText1 = (line ? line.text + " " : "") + words[i]; let lineWidth1 = measureWidth(lineText1); if ((lineWidth0 + lineWidth1) / 2 < targetWidth) { line.width = lineWidth0 = lineWidth1; line.text = lineText1; } else { lineWidth0 = measureWidth(words[i]); line = {width: lineWidth0, text: words[i]}; lines.push(line); } } return lines; } // calculate simulated text radius function textRadius(lines) { let radius = 0; for (let i = 0, n = lines.length; i < n; ++i) { const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight; const dx = lines[i].width / 2; radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2)); } return radius; } let wrappedText = selection.text("") .attr("transform", `scale(${r / _textRadius * scaleFactor})`) .selectAll("tspan") .data(_lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - _lines.length / 2 + 0.8) * lineHeight) .text(d => d.text) return selection } // --- updaters ---------------------- chart.update = function() { stepElements.remove() stepElements = g.append('g') .attr('class', 'step-elements') .call(addStepElements) return chart } chart.show = function(duration) { let fadeInDuration = duration || 250 g.transition() .duration(fadeInDuration) .style('opacity', 1) return chart } chart.hide = function(duration) { let fadeOutDuration = duration || 250 g.transition() .duration(fadeOutDuration) .style('opacity', 0) return chart } chart.start = function() { if (!steps) return chart // step to first item step() // only animate if there's more than one step, otherwise leave // this step visible indefinitely if (steps.length > 1) { // active progress ring animation restartRingAnimation() // step once each time the specified readingTime has passed state.interval = d3.interval(step, readingTime) } return chart } chart.stop = function() { state.interval.stop() return chart } chart.clear = function() { // stop interval if (state.interval) { state.interval.stop() } // update steps steps = [] stepElements.remove() // update ring foreground ringFg.remove() addRingFg() // reset state state = { interval: null, i: -1 } return chart } // --- accessors --------------------- chart.r = function(value) { if (!arguments.length) return r r = value return chart } chart.width = function(value) { if (!arguments.length) return width width = value return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.margin = function(value) { if (!arguments.length) return margin margin = value return chart } chart.backgroundColor = function(value) { if (!arguments.length) return backgroundColor backgroundColor = value return chart } chart.ringBackgroundColor = function(value) { if (!arguments.length) return ringBackgroundColor ringBackgroundColor = value return chart } chart.ringForegroundColor = function(value) { if (!arguments.length) return ringForegroundColor ringForegroundColor = value return chart } chart.textColor = function(value) { if (!arguments.length) return textColor textColor = value return chart } chart.orient = function(value) { if (!arguments.length) return orient orient = value return chart } chart.emptyStateText = function(value) { if (!arguments.length) return emptyStateText emptyStateText = value return chart } chart.steps = function(value) { if (!arguments.length) steps = [] steps = value return chart } chart.emphasizedTextDelimiter = function(value) { if (!arguments.length) return emphasizedTextDelimiter emphasizedTextDelimiter = value return chart } chart.emphasizedTextColor = function(value) { if (!arguments.length) return emphasizedTextColor emphasizedTextColor = value return chart } chart.readingTime = function(value) { if (!arguments.length) return readingTime readingTime = value return chart } chart.scaleFactor = function(value) { if (!arguments.length) return scaleFactor scaleFactor = value return chart } chart.lineHeight = function(value) { if (!arguments.length) return lineHeight lineHeight = value return chart } return chart }33:[] 2f:{"id":"6e190ce40dcceb92","slug":null,"title":"Donut chart with arced labels, step-wise tooltip, and dynamic text wrapping","thumbnail":"845162c65e8fdae6b32f965852d8c4c51bab2573d48222eee127a476244e0dbe","access_level":"public","create_time":"$D2023-10-27T23:23:59.744Z","update_time":"$D2023-10-27T23:23:59.744Z","view_time":null,"first_public_time":"$D2023-10-27T23:23:59.744Z","has_unpublished_edits":null,"fork":{"id":"46582871f26f2749","slug":"donut-chart-with-arced-labels-step-wise-tooltip-and-dynamic","title":"Donut chart with arced labels, step-wise tooltip, and dynamic text wrapping","owner":{"id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f1de0844e9cff86a","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":"starter_2024"},"version":848,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null}],"members":[{"type":"individual","id":"04c32d8a18696e81","login":"noble","name":"Noble","avatar_url":"https://avatars-next.observableusercontent.com/3bd89c10ca274fc7598152a62a193858ce1f1d1662a9dac1b180aa16b997b758","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Donut chart with arced labels, step-wise tooltip, and dynamic text wrapping","cells":[{"id":231,"value":"md`# Donut chart with arced labels, step-wise tooltip, and dynamic text wrapping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"md `CSV`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"viewof csv = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"md `Empty state text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"viewof emptyStateText = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"html`

Download

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"html`\n

\n Notes\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`\n ### Generalizing step-wise tooltip stages\n - stepwiseTooltip attribute should be changed from an array of strings to an array of objects:\n \\`\\`\\`\n {\n text: \"Lorem ipsum...\",\n icon: undefined || String, // renders an icon\n figure: undefined || Number, // renders a number instead of an icon\n formatFigure: undefined || Function // formats figure; for instance, to add the percentage char\n }\n \\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"html`\n

\n Setup\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"format = parsedCsv => parsedCsv.map(row => ({\n label: row.label,\n proportion: parseFloat(row.val) / 100\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"formattedData = format(d3.csvParse(csv))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chartConfig = ({\n width: 800,\n height: 800,\n margin: 64\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"download = d3.select('#download').on('click', () => {\n let size = d3.select(\"#chart\").node().getBoundingClientRect(),\n content = d3.select(\"#chart\").html(),\n cloneId = `clone-${Math.random()}`,\n filename = \"viz.png\"\n \n const div = d3.select('body').append('div')\n .html(content)\n .attr('class', 'clone')\n .attr('id', cloneId)\n .style('width', `${size.width * 3}px`)\n .style('height', `${size.height * 3}px`)\n .style('background', 'white')\n .style('display', 'flex')\n .style('justify-content', 'center')\n .style('align-items', 'center')\n\n div.select('svg').attr('transform', 'scale(3)')\n\n // download image\n domToImage\n .toBlob(div.node())\n .then((blob) => fileSaver.saveAs(blob, filename))\n .catch((err) => console.error(err))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html`\n

\n Chart\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"donut = donutChart()\n .width(chartConfig.width)\n .height(chartConfig.height)\n .cornerRadius(3)\n .padAngle(0.015)\n .flipLabelsAfterAngle(90)\n .variable('proportion')\n .category('label')\n .showTooltip(true)\n .tooltipSteps({\n \"Label 1\": [\"The first tooltip\", \"The second tooltip\", \"#3\"]\n })\n .tooltipEmphasizedTextDelimiter(\"::\")\n .tooltipReadingTime(2000)\n .emptyStateText(emptyStateText)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3.select(`#chart`)\n .datum(formattedData)\n .call(donut)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"html`\n

\n Imports\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"domToImage = require('https://bundle.run/dom-to-image')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"fileSaver = require('https://bundle.run/file-saver')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"