2b:null 2c:["$","title",null,{"children":"(Draft 2) Donut/Doughnut Economics | cknipe | Observable"}] 31:T2621,chartSlope_v4 = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const threshhold = 70; // Values 70 and higher can be considered "within the donut" // TODO: Maybe have gradient of colors within red and green? const green = '#689F38' const red = '#B71C1C' const gray = 'lightgray' const c = d3.scaleOrdinal() .domain([true, false, null]) // Green = we are in the safe zone (percentage >= threshhold = true) .range([green, red, gray]); 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; // TODO: Choose something that looks ok // ------------ 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)) // TODO: How does this padAngle relate to the pie padAngle? .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)) // TODO: How does this padAngle relate to the pie padAngle? .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. // Make this constant to make the arc length constant and arc height 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 = data_new.filter(d => d.inner_or_outer == "Outer"); const human_data = data_new.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})`) // Attempt 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)) .append('title') .text(d => `Ecological: ${d.data.category} at ${d.data.percentage}%`); // TODO: Better hover tooltip text // TODO: allow hovering on the text 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 => `Social: ${d.data.category} at ${d.data.percentage}%`); // TODO: Better hover tooltip text // TODO: allow hovering on the text, and maybe hovering even outside the mark boundaries? // ----------------------- Text Labels for "Ecological Ceiling" items ----------------------- 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)) // TODO: uhh is this right? .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" items ----------------------- 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 + " " + (d.data.percentage === null ? "no data" : d.data.percentage.toLocaleString() + "%"))) // .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() + "%")); // 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:T2621,chartSlope_v3 = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const threshhold = 70; // Values 70 and higher can be considered "within the donut" // TODO: Maybe have gradient of colors within red and green? const green = '#689F38' const red = '#B71C1C' const gray = 'lightgray' const c = d3.scaleOrdinal() .domain([true, false, null]) // Green = we are in the safe zone (percentage >= threshhold = true) .range([green, red, gray]); 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; // TODO: Choose something that looks ok // ------------ 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)) // TODO: How does this padAngle relate to the pie padAngle? .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)) // TODO: How does this padAngle relate to the pie padAngle? .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. // Make this constant to make the arc length constant and arc height 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 = data_new.filter(d => d.inner_or_outer == "Outer"); const human_data = data_new.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})`) // Attempt 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)) .append('title') .text(d => `Ecological: ${d.data.category} at ${d.data.percentage}%`); // TODO: Better hover tooltip text // TODO: allow hovering on the text 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 => `Social: ${d.data.category} at ${d.data.percentage}%`); // TODO: Better hover tooltip text // TODO: allow hovering on the text, and maybe hovering even outside the mark boundaries? // ----------------------- Text Labels for "Ecological Ceiling" items ----------------------- 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)) // TODO: uhh is this right? .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" items ----------------------- 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 + " " + (d.data.percentage === null ? "no data" : d.data.percentage.toLocaleString() + "%"))) // .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() + "%")); // TODO: How to get newlines on this? Ugh would you have to just make yet another arc to put it on? return svg.node() }33:T3116,chartSlope_v2 = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const threshhold = 70; // Values 70 and higher can be considered "within the donut" // TODO: Maybe have gradient of colors within red and green? const c = d3.scaleOrdinal() .domain([true, false, null]) // Green = we are in the safe zone (percentage >= threshhold = true) .range(['green', 'red', 'lightgray']); 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; // TODO: Choose something that looks ok // ------------ Green donut ------------ 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', 'lightgreen') .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 ----------- // Attempt 2 const planet_insideDonut_scale = d3.scaleLinear() .domain([100, threshhold]) .range([donut_outer_radius - stroke_width + 1, donut_outer_radius - stroke_width +1 ]); // TODO: Sketchy pixel math const planet_outsideDonut_scale = d3.scaleLinear() .domain([threshhold-1, 0]) .range([planet_inner_radius, planet_outer_radius]); // Attempt 1: Green marks should go "in the donut" and red marks should go "out of the donut" // const planet_outerScale = d3.scaleLinear() // .domain([100, threshhold, threshhold-1, 0]) // .range([donut_center_radius + 1, donut_outer_radius - stroke_width, donut_outer_radius, planet_outer_radius]); // // .range([planet_inner_radius + 1, planet_outer_radius]); // TODO: Change sketchy pixel math const human_innerScale = d3.scaleLinear() .domain([0, 100]) .range([human_inner_radius, human_outer_radius - 1]); // TODO: Change sketchy pixel math??? // Attempt 2 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 planet_insideDonut_arc = d3.arc() .innerRadius(donut_center_radius + 1) .outerRadius(d => planet_insideDonut_scale(d.data.percentage === null ? 0 : d.data.percentage)) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) // Attempt 1 // const planet_arc = d3.arc() // .innerRadius(donut_center_radius + 1) // .outerRadius(d => planet_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 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) const human_arc = d3.arc() .innerRadius(d => human_innerScale(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)) // TODO: How does this padAngle relate to the pie padAngle? .cornerRadius(0) // Attempt 1 to put text on an arc const human_default_text_arc = d3.arc() .innerRadius(donut_inner_radius) .outerRadius(donut_outer_radius) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) // TODO: How to display the human text?? // Attempt 1 // const human_default_text_arc_tooSquished = d3.arc() // .innerRadius(human_inner_radius) // .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. // Make this constant to make the arc length constant and arc height variable? const human_pie = d3.pie() .padAngle(0.00) .sort(null) .value(1) const planet_data = data_new.filter(d => d.inner_or_outer == "Outer"); //const planet_insideDonut_data = data_new.filter(d => d.inner_or_outer == "Outer" && d.percentage >= threshhold); //const planet_outsideDonut_data = data_new.filter(d => d.inner_or_outer == "Outer" && (d.percentage < threshhold || d.percentage === null)); const human_data = data_new.filter(d => d.inner_or_outer == "Inner"); const planet_arcs = planet_pie(planet_data); //const planet_insideDonut_arcs = planet_pie(planet_insideDonut_data); //const planet_outsideDonut_arcs = planet_pie(planet_outsideDonut_data); const human_arcs = human_pie(human_data); const planet_donut = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) // Sets the center to not (0, 0) const human_donut = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) // Attempt 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)) // Attempt 1 // planet_donut.selectAll('path') // .data(planet_arcs) // .join('path') // .attr('fill', d => c(d.data.percentage === null ? null : d.data.percentage > threshhold)) // .attr('d', planet_arc) // .append('title') // .text(d => "Planet/Outside"); // TODO: This is hover tooltip text, but I don't love it because you can't hover on the text human_donut.selectAll('path') .data(human_arcs) .join('path') .attr('id', function(d,i) {return "humanDrawnArc_"+i;}) .attr('fill', d => c(d.data.percentage === null ? null : d.data.percentage > threshhold)) .attr('d', human_arc) .append('title') .text(d => "Human/Inside"); // Attempt 2: Do we also need to dulicate for .data(planet_arcs) ? 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)) // TODO: uhh is this right? .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() + "%")); // Attempting to put text in the place for "Social Foundation" data categories // Attempt 2: Make ur own arcs so they're all the same length // If ur gonna make separate pies for text, make sure pie is deterministic so the labels go in the right places const human_text_radius = donut_inner_radius + stroke_width + 3; // TODO: sketchy pixel math const human_text_arc_attempt2 = d3.arc() .innerRadius(human_text_radius) .outerRadius(human_text_radius) const human_text_arc = human_text_arc_attempt2; const human_text_donut = svg.append('g') .attr('transform', `translate(${width/2},${height/2})`) human_text_donut.selectAll('path') .data(human_arcs) .join('path') .attr('id', function(d,i) {return "humanTextArc_"+i;}) .attr('fill', 'none') .attr('d', human_text_arc) human_text_donut.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('y', '-0.4em') .attr('font-weight', 'bold') .text(d => d.data.category)) // TODO: uhh is this right? // .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() + "%")); // TODO: How to get newlines on this? Ugh would you have to just make yet another arc to put it on? // Attempt 1 // human_donut.append('g') // .attr('font-family', 'sans-serif') // .attr('font-size', 12) // .attr('text-anchor', 'middle') // .selectAll('text') // .data(human_arcs) // .join('text') // //.attr('transform', d => `translate(${human_label_center(d).x, human_label_center(d).y})`) // This doesn't work // .attr('transform', d => `translate(${human_default_text_arc.centroid(d)})`) // //.attr('transform', d => `translate(${human_arc.centroid(d)})`) // .call(text => text.append('tspan') // .attr('y', '-0.4em') // .attr('font-weight', 'bold') // .text(d => d.data.category)) // TODO: uhh is this right? // .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append('tspan') // TODO: Uhhhh // .attr('x', 0) // .attr('y', '0.7em') // .attr('fill-opacity', 0.7) // .text(d => d.data.percentage === null ? "no data" : d.data.percentage.toLocaleString() + "%")); // Ehhh this doesn't work but I was trying to find the total allowable length of the text arcs // const length = document.getElementById('humanArc_1').getTotalLength(); // svg.append('text').attr('x',0).attr('y',0).append('tspan').text(`asdfasdf: ${length}`) return svg.node() }34:T1646,chartSlope_v1 = { if (data_new === null) { return "Fix your google sheet plz"; } const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const threshhold = 70; // Values higher than 70 can be considered "within the donut" // TODO: Maybe have gradient of colors within red and green? const c = d3.scaleOrdinal() .domain([true, false]) // Green = we are in the safe zone (percentage >= threshhold = true) .range(['green', 'red']); //d3.scaleOrdinal() //.domain(data.map(d => d.name)) //.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse()) const planet_outer_radius = (Math.min(width, height) / 2) ; const planet_inner_radius = planet_outer_radius * 0.5; const human_outer_radius = planet_inner_radius * 0.9; const human_inner_radius = human_outer_radius * 0.5; // TODO: Choose something that looks ok const planet_outerScale = d3.scaleLinear() .domain([100, 0]) .range([planet_inner_radius + 1, planet_outer_radius]); // TODO: Change sketchy pixel math const human_innerScale = d3.scaleLinear() .domain([0, 100]) .range([human_inner_radius, human_outer_radius - 1]); // TODO: Change sketchy pixel math??? const planet_arc = d3.arc() .innerRadius(planet_inner_radius) .outerRadius(d => planet_outerScale(d.data.percentage)) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) 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) const human_arc = d3.arc() .innerRadius(d => human_innerScale(d.data.percentage)) .outerRadius(human_outer_radius) .padRadius(0.5 * planet_outer_radius) .padAngle(2/(0.65 * planet_outer_radius)) .cornerRadius(0) const human_default_text_arc = d3.arc() .innerRadius(human_inner_radius) .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. // Make this constant to make the arc length constant and arc height variable? const human_pie = d3.pie() .padAngle(0.00) .sort(null) .value(1) const planet_data = data_new.filter(d => d.inner_or_outer == "Outer").filter(d => d.percentage !== null); const human_data = data_new.filter(d => d.inner_or_outer == "Inner").filter(d => d.percentage !== null); 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})`) // Sets the center to not (0, 0) 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 > threshhold)) .attr('d', planet_arc) .append('title') .text(d => "Planet/Outside"); // TODO: This is hover tooltip text, but I don't love it because you can't hover on the text human_donut.selectAll('path') .data(human_arcs) .join('path') .attr('fill', d => c(d.data.percentage > threshhold)) .attr('d', human_arc) .append('title') .text(d => "Human/Inside"); 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)) // TODO: uhh is this right? .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.category + "\n" + d.data.percentage.toLocaleString())); // Ok I really have no idea what I'm doing here // const human_label_center = (arc) => { // return { // x: (arc.startAngle() + arc.endAngle()) / 2, // y: (arc.innerRadius() + arc.outerRadius()) / 2 // }; // //[(arc.startAngle + arc.endAngle) / 2, (arc.innerRadius + arc.outerRadius) / 2]; // } human_donut.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 12) .attr('text-anchor', 'middle') .selectAll('text') .data(human_arcs) .join('text') //.attr('transform', d => `translate(${human_label_center(d).x, human_label_center(d).y})`) // This doesn't work .attr('transform', d => `translate(${human_default_text_arc.centroid(d)})`) //.attr('transform', d => `translate(${human_arc.centroid(d)})`) .call(text => text.append('tspan') .attr('y', '-0.4em') .attr('font-weight', 'bold') .text(d => d.data.category)) // TODO: uhh is this right? .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append('tspan') // TODO: Uhhhh .attr('x', 0) .attr('y', '0.7em') .attr('fill-opacity', 0.7) .text(d => d.data.category + "\n" + d.data.percentage.toLocaleString())); return svg.node() }35:[] 2f:{"id":"42772bd61901c5da","slug":null,"title":"(Draft 2) Donut/Doughnut Economics","thumbnail":"e03ebad16dfde6cc7e5f71ffdc020d5b0db11df9c676c4b9ad305fa9eb405d0b","access_level":"public","create_time":"$D2024-02-13T21:36:32.993Z","update_time":"$D2024-09-15T16:08:32.043Z","view_time":null,"first_public_time":"$D2024-02-13T21:36:32.993Z","has_unpublished_edits":null,"fork":{"id":"d40eb09c86789429","slug":null,"title":"(Draft 1) 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":744,"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"},{"type":"team","id":"b4081c6fb2db2bfa","login":"cknipe-stuff","name":"cknipe","avatar_url":"https://avatars-next.observableusercontent.com/604e1e3a792816118fa9a5f2462acf298276baec730a19fce07db939449992ea","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"(Draft 2) Donut/Doughnut Economics","cells":[{"id":733,"value":"md`# (Draft 2) Donut/Doughnut Economics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"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":224,"value":"

TODOs:

\n\n\nWould really like to do:\n

~~Allow user to input their own link to a google sheet~~
Hover\n
- Hover: Highlight the mark on hover
- Hover: Allow mark to be hovered even when its text (or empty space?) is hovered
\n
Where to display the percent? Should we?
Figure out what to show in:\n
- Hover on a mark: Tooltip
- Clicking a mark: maybe takes you to a detail page for that item? Or maybe opens a side panel?
\n
Confirm it's easy to embed
Write documentation

\n \n\n\n\nOptional:\n

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

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"md`# (Draft 2) Donut/Doughnut Economics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":725,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$33","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":624,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"errorHtml = {\n if (data_new === null) {\n const div = d3.create(\"div\");\n div.html(\"

Error: Are you sure this is a valid google doc with public viewing permissions?

\")\n return div.node(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"viewof sheetInput = Inputs.text({label: \"Link to your google sheet\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"data_new = {\n const 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 };\n\n try {\n const data = await d3.csv(getCsvUrl(sheetInput), d3.autoType);\n return data;\n } \n catch (error) {\n console.error(\"Error: Are you sure this is a valid google doc with public viewing permissions?\");\n return null;\n }\n\n // return d3.csv(getCsvUrl(\"https://docs.google.com/spreadsheets/d/1CCFffe9HGeQidmh3Fuf-TZltFqDP8xq3RwHBPKZUGvA/edit#gid=0\"), d3.autoType)\n // data_new = d3.csvParse(await FileAttachment(\"d3-donut-sample.csv\").text(), d3.autoType)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"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":true,"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":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":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"