2b:null 2c:["$","title",null,{"children":"(Draft 3) Donut/Doughnut Economics | cknipe | Observable"}] 31:T25de,chartSlope_v4 = { // Values 70 and higher can be considered "within the donut" const threshhold = 70; // FYI: If you want to change the colors, make sure it's a color-blind accessible palette const green = '#5CDE35' const red = '#E51E1E' const gray = '#E0E0E0' const c = d3.scaleOrdinal() .domain([true, false, null]) // Green = we are in the safe zone (percentage >= threshhold = true) .range([green, red, gray]); const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const planet_outer_radius = (Math.min(width, height) / 2) ; const planet_inner_radius = planet_outer_radius * 0.65; const donut_outer_radius = planet_inner_radius; const donut_inner_radius = donut_outer_radius * 0.6; const donut_center_radius = (donut_outer_radius + donut_inner_radius) / 2; const human_outer_radius = donut_inner_radius; const human_inner_radius = human_outer_radius * 0.0; // ------------ Green inside-the-donut static stuff ------------ const stroke_width = 14; const donut_donut = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) // Center ring donut_donut.append("circle") .attr('r', donut_center_radius) .attr('fill', 'transparent') .attr('stroke', 'transparent') .attr('stroke-width', (donut_outer_radius - donut_inner_radius)); // "Ecological Ceiling" ring const ceilingRadius = donut_outer_radius - stroke_width/2; const ceilingStroke = donut_donut.append("circle") .attr('id', 'ecological_ceiling') .attr('r', ceilingRadius) .attr('fill', 'transparent') .attr('stroke', green) .attr('stroke-width', stroke_width); const labelFontSize = 12; const labelHeight = labelFontSize * 0.7; const ceilingTextRadius = ceilingRadius - 0.5 * labelHeight; donut_donut.append("path") .attr('id', 'eco_ceiling_curve') .attr('d', `M-${ceilingTextRadius},0 A${ceilingTextRadius},${ceilingTextRadius} 0 0,1 ${ceilingTextRadius},0`) .attr('fill', 'none') .attr('opacity', 0.3) donut_donut.append("text") .attr('font-family', 'sans-serif') .attr('font-size', labelFontSize) .attr('fill', 'white') .append("textPath") .attr('xlink:href', '#eco_ceiling_curve') .text("ECOLOGICAL CEILING") .attr('text-anchor', 'middle') .attr('startOffset', '50%') // "Social Foundation" ring const socialRadius = donut_inner_radius + stroke_width/2; const socialStroke = donut_donut.append("circle") .attr('id', 'social_foundation') .attr('r', socialRadius) .attr('fill', 'transparent') //hotpink for testing .attr('stroke', green) .attr('stroke-width', stroke_width); const socialTextRadius = socialRadius - 0.5 * labelHeight; donut_donut.append("path") .attr('id', 'social_foundation_curve') .attr('d', `M-${socialTextRadius},0 A${socialTextRadius},${socialTextRadius} 0 0,1 ${socialTextRadius},0`) .attr('fill', 'transparent') //hotpink for testing .attr('opacity', 0.3) donut_donut.append("text") .attr('font-family', 'sans-serif') .attr('font-size', labelFontSize) .attr('fill', 'white') .append("textPath") .attr('xlink:href', '#social_foundation_curve') .text("SOCIAL FOUNDATION") .attr('text-anchor', 'middle') .attr('startOffset', '50%') // ----------- Outer & Inner Data Driven Stuff ----------- const planet_outsideDonut_scale = d3.scaleLinear() .domain([threshhold-1, 0]) .range([planet_inner_radius, planet_outer_radius]); const human_outsideDonut_scale = d3.scaleLinear() .domain([0, threshhold]) .range([human_inner_radius, human_outer_radius - 1]); const planet_insideDonut_arc = d3.arc() .innerRadius(donut_center_radius + 1) .outerRadius(donut_outer_radius - stroke_width + 1) // TODO: sketchy pixel math? .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) const planet_outsideDonut_arc = d3.arc() .innerRadius(planet_inner_radius) .outerRadius(d => planet_outsideDonut_scale(d.data.percentage === null ? 0 : d.data.percentage)) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) const human_insideDonut_arc = d3.arc() .innerRadius(donut_inner_radius + stroke_width - 1) // TODO: sketchy pixel math? .outerRadius(donut_center_radius - 1) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) const human_outsideDonut_arc = d3.arc() .innerRadius(d => human_outsideDonut_scale(d.data.percentage === null? 0 : d.data.percentage)) .outerRadius(human_outer_radius) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) const planet_pie = d3.pie() .padAngle(0.00) .sort(null) .value(1) // Optional: value() sets value accessor that returns a numeric value for a given datum. // So we want to make this constant to make the arc length constant -- only arc height should be variable. const human_pie = d3.pie() .padAngle(0.00) .sort(null) .value(1) // TODO: Standardize on terminology. "Outer/Inner" or "Planetary/Human" or "Ecological/Social" or "Ceiling/Foundation" const planet_data = response.data.filter(d => d.inner_or_outer == "Outer"); const human_data = response.data.filter(d => d.inner_or_outer == "Inner"); const planet_arcs = planet_pie(planet_data); const human_arcs = human_pie(human_data); const planet_donut = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) const human_donut = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) planet_donut.selectAll('path') .data(planet_arcs) .join('path') .attr('fill', d => c(d.data.percentage === null ? null : d.data.percentage >= threshhold)) .attr('d', d => d.data.percentage === null ? planet_outsideDonut_arc(d) : d.data.percentage >= threshhold ? planet_insideDonut_arc(d) : planet_outsideDonut_arc(d)) // TODO: See todo ideas below for how to better display details from data .append('title') .text(d => { if (d.data.details === null) { return `Social: ${d.data.category} at ${d.data.percentage}%` } else return d.data.details; }); human_donut.selectAll('path') .data(human_arcs) .join('path') .attr('fill', d => c(d.data.percentage === null ? null : d.data.percentage >= threshhold)) .attr('d', d => d.data.percentage === null ? human_outsideDonut_arc(d) : d.data.percentage >= threshhold ? human_insideDonut_arc(d) : human_outsideDonut_arc(d)) .append('title') .text(d => { if (d.data.details === null) { return `Social: ${d.data.category} at ${d.data.percentage}%` } else return d.data.details; }); // ----------------------- Text Labels for "Ecological Ceiling" categories from data ----------------------- const planet_default_text_arc = d3.arc() .innerRadius(planet_inner_radius) .outerRadius(planet_outer_radius) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) planet_donut.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 12) .attr('text-anchor', 'middle') .selectAll('text') .data(planet_arcs) .join('text') .attr('transform', d => `translate(${planet_default_text_arc.centroid(d)})`) .call(text => text.append('tspan') .attr('y', '-0.4em') .attr('font-weight', 'bold') .text(d => d.data.category)) // If we want to show the percentage, but it seems arbitrary enough that I dunno if we would // .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 => d.data.percentage === null ? "no data" : d.data.percentage.toLocaleString() + "%")); // ----------------------- Text Labels for "Social Foundation" categories from data ----------------------- const human_text_radius = donut_inner_radius + stroke_width + 3; // TODO: sketchy pixel math const human_text_arc = d3.arc() .innerRadius(human_text_radius) .outerRadius(human_text_radius) const human_donut_text = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) human_donut_text.selectAll('path') .data(human_arcs) .join('path') .attr('id', function(d,i) {return "humanTextArc_"+i;}) .attr('fill', 'none') .attr('d', human_text_arc) human_donut_text.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 12) .selectAll('text') .data(human_arcs) .join('text') .append('textPath') .attr('xlink:href', function(d,i){return "#humanTextArc_"+i;}) .attr('text-anchor', 'middle') .attr('startOffset', '25%') .call(text => text.append('tspan') .attr('font-weight', 'bold') .text(d => d.data.category)) // If we want to show the percentage, but it seems arbitrary enough that I dunno if we would // .text(d => d.data.category + " " + // (d.data.percentage === null ? "no data" : d.data.percentage.toLocaleString() + "%"))) // TODO: How to get newlines on this? Ugh would you have to just make yet another arc to put it on? return svg.node() }32:T447,

TODOs:

Would be niiice:

Make layout category names look okay when they're long
Where to display the percent? Should we?
Figure out what to show in:
- Clicking a mark: maybe opens a side panel? Or maybe takes you to a detail page for that item?
- Hover on a mark:
  - Hover: Highlight the mark on hover
  - Hover: Allow mark to be hovered even when its text (or empty space?) is hovered
  - Or, If you don't wanna do the clicking behavior, perhaps show detail in hover tooltip? Or show the longer name in tooltip?
Confirm it's easy to embed
Write documentation

Optional:

Put "ecological ceiling" items' text on arc instead of horizontal
Decide if 0 is good or 100 is good (currently 100 is good)
Create a legend
Allow other ways of inputting data than a google spreadsheet
Transition on draw so the arcs grow

33:[] 2f:{"id":"e288267a6577745c","slug":null,"title":"(Draft 3) Donut/Doughnut Economics","thumbnail":"df4cb4a8c64c38928abd937b3b282f4a4f6171357f5392a7f16c893642edd2a3","access_level":"public","create_time":"$D2024-08-16T04:48:41.340Z","update_time":"$D2024-09-15T16:08:18.649Z","view_time":null,"first_public_time":"$D2024-08-16T04:48:41.340Z","has_unpublished_edits":null,"fork":{"id":"4edcbf4d28ed4fb4","slug":null,"title":"(Draft 3) Donut/Doughnut Economics","owner":{"id":"b4081c6fb2db2bfa","login":"cknipe-stuff","name":"cknipe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b4081c6fb2db2bfa","login":"cknipe-stuff","name":"cknipe","avatar_url":"https://avatars-next.observableusercontent.com/604e1e3a792816118fa9a5f2462acf298276baec730a19fce07db939449992ea","tier":"starter_2024"},"version":843,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa888413ed285ed9","login":"cknipe","name":"cknipe","avatar_url":"https://avatars-next.observableusercontent.com/090e61f9be89b164e673921a2b750f518cb245e2c58f95e8a8218de3aa152def","tier":null}],"members":[{"type":"individual","id":"fa888413ed285ed9","login":"cknipe","name":"cknipe","avatar_url":"https://avatars-next.observableusercontent.com/090e61f9be89b164e673921a2b750f518cb245e2c58f95e8a8218de3aa152def","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"(Draft 3) Donut/Doughnut Economics","cells":[{"id":0,"value":"md`# (Draft 3) Donut/Doughnut Economics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"

!!! FYI the most recent version is here !!! --> Donut Economics Seattle City Portrait

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

Paste a link to your google sheet below:

\nFor example:
\nhttps://docs.google.com/spreadsheets/d/1CCFffe9HGeQidmh3Fuf-TZltFqDP8xq3RwHBPKZUGvA/edit#gid=0

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"viewof sheetInput = Inputs.text({label: \"Link to your google sheet\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"{\n const div = d3.create(\"div\");\n if (response.errorHtml) {\n div.html(\"

Error: Are you sure this is a valid google doc with public viewing permissions?
Using the example sheet in this case.

\")\n return div.node(); \n }\n else { return div.node(); }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"md`

References:

\nFor donut economics: \nhttps://goodlife.leeds.ac.uk/national-trends/country-trends/#USA \nhttps://doughnuteconomics.org/Creating-City-Portraits-Methodology.pdf\n\nFor d3 stuff:\nhttps://www.d3-graph-gallery.com/donut.html \nhttps://observablehq.com/@d3/donut-chart \nhttps://observablehq.com/@nbremer/custom-cluster-force-layout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"response = {\n try {\n const url = getCsvUrl(sheetInput);\n const data = await d3.csv(url, d3.autoType);\n console.log(`Running with modified URL = ${url}`); // TODO: remove this\n return {data: data};\n } \n catch (error) {\n console.error(\"Error: Not a valid google doc with public viewing permissions\");\n const defaultSheet = \"https://docs.google.com/spreadsheets/d/1CCFffe9HGeQidmh3Fuf-TZltFqDP8xq3RwHBPKZUGvA/edit#gid=0\";\n const data = await d3.csv(getCsvUrl(defaultSheet), d3.autoType);\n return {data: data, \n errorHtml: \"

Error: Are you sure this is a valid google doc with public viewing permissions?
Using the example sheet in this case.

\"};\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"getCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"margin = ({left:20, right:20, top:20, bottom:20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"