2b:null 2c:["$","title",null,{"children":"(Draft 4) Donut/Doughnut Economics | cknipe | Observable"}] 31:T1294,legend = { const human_data = response.data.filter(d => d.inner_or_outer == "Inner"); const fontSize = 10 const human_legendWidth = 200; const human_legendHeight = human_data.length * (fontSize + 4) + 20; const svg = d3.create('svg') .attr('height', human_legendHeight + 300) .attr('width', human_legendWidth + 300) .style('font-family', 'sans-serif') .style('font-size', fontSize) const legend = svg .append("g") .attr("class", "legend"); legend.append("rect") .attr("width", human_legendWidth) .attr("height", human_legendHeight) .attr("fill", "whitesmoke") // Prototype: Make categories clickable from the legend (later generalize it for the viz) const sidePanel = svg.append("g") .attr("id", "side-panel") .attr("transform", `translate(${svg.attr("width") - 300}, 20)`) // Position it on the right side .style("display", "none"); sidePanel.append("rect") .attr("width", 300) // Set the width of the panel .attr("height", svg.attr("height") - 40) // Set the height of the panel .attr("fill", "pink") // Background color .attr("stroke", "#ccc") // Border color .attr("stroke-width", 2) .attr("rx", 10) // Rounded corners (optional) .attr("ry", 10) .attr("x", 0) .attr("y", 0) .style("box-shadow", "2px 2px 5px rgba(0, 0, 0, 0.1)"); // Step 3: Add text elements for the title and description sidePanel.append("text") .attr("id", "panel-title") .attr("x", 20) .attr("y", 40) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Panel Title"); sidePanel.append("text") .attr("id", "panel-description") .attr("x", 20) .attr("y", 70) .attr("font-size", "14px") .text("Details about the selected icon..."); // Step 4: Add a close button as a text element sidePanel.append("text") .attr("id", "close-panel") .attr("x", 270) // Position on the right side of the panel .attr("y", 30) .attr("font-size", "14px") .attr("cursor", "pointer") .text("X") .on("click", function() { sidePanel.style("display", "none"); // Hide the panel when clicked }); // ATTEMPT 1, but would prefer not to use div on the body. would rather use g on the svg. // const body = d3.select("body") // const sidePanel = body.append("div") // .attr("id", "side-panel") // .style("position", "fixed") // .style("top", "20px") // .style("right", "0") // .style("width", "300px") // .style("height", "90%") // .style("background-color", "pink") // .style("border-left", "2px solid #ccc") // .style("box-shadow", "-2px 0 5px rgba(0, 0, 0, 0.1)") // .style("padding", "20px") // .style("transform", "translateX(100%)") // Start off-screen // .style("transition", "transform 0.3s ease") // Smooth sliding effect // .style("display", "none"); // Initially hidden // // Add a close button to the panel // sidePanel.append("button") // .attr("id", "close-panel") // .text("Close") // .style("margin-bottom", "20px") // .on("click", function() { // sidePanel.style("transform", "translateX(100%)").style("display", "none"); // }); // // Add other content to the panel (title, paragraph) // sidePanel.append("h3").text("Panel Title"); // sidePanel.append("p").text("Details about the selected icon..."); // // Put this in onMarkClick // sidePanel.select("h3").text(d["category"]); // Example: Use the appropriate field for your data // sidePanel.select("p").text(d["details"]); // Example: Use the appropriate field for your data // sidePanel.style("transform", "translateX(0)").style("display", "block"); const onMarkClick = (event) => { const d = event.srcElement.__data__ console.log(d) // Update side panel content sidePanel.select("#panel-title").text(d["category"]); sidePanel.select("#panel-description").text(d["details"]); // Show the side panel sidePanel.style("display", "block"); } legend.append("g") .selectAll("text") .data(human_data) .join("text") .attr("x", 5) .attr("y", (d, i) => i * (fontSize + 4) + 20 + 5) .attr("dy", 7) .call((text) => {text.append('tspan') .attr('class', 'material-symbols-outlined') .style('font-size', 20) .text(d => d["category_icon"])}) .style("cursor", "pointer") .on("click", onMarkClick) // Ugh I wanna use makeMuiIcon but the data is in some different format legend.append("g") .selectAll("text") .data(human_data) .join("text") .attr("x", 40) .attr("y", (d, i) => i * (fontSize + 4) + 20 + 5) .text((d) => d["category"]) .attr("fill", "grey"); return svg.node() } 32:T4fdd,chartSlope_v4 = { // 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 hoverColor = '#5AAAEE' const c = d3.scaleOrdinal() .domain([true, false, null]) // Green = we are in the safe zone .range([green, red, gray]); const svg = d3.create('svg') .attr('height', canvasHeight) .attr('width', canvasWidth) .style('font-family', 'sans-serif') .style('font-size', 12) const planet_outer_radius = (Math.min(width, height) / 2) ; // Worst overshoot const planet_inner_radius = planet_outer_radius * 0.65; // Smallest overshoot 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; // Smallest unmet need const human_inner_radius = human_outer_radius * 0.0; // Worst unmet need // ------------ 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 ----------- // How far do the red arcs go in or out const planet_outsideDonut_scale = d3.scaleLinear() .domain([100, 300]) .range([planet_inner_radius, planet_outer_radius]) .unknown(planet_outer_radius) // Null data is drawn at max -- also requires logic further down to use the outsideDonut scale .clamp(true); // Cap the max const human_outsideDonut_scale = d3.scaleLinear() .domain([0, 99]) .range([human_inner_radius, human_outer_radius - 1]); // Null data is drawn at 0 by default, no need to special-case that 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)) .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})`) const isGoodForOuter = (value) => { // True = green = good ("within the donut") = 100 or less return value === null ? null : value <= 100; } const getHoverText = (d) => { const heading = `---${d.data.category}---` const percent = `${d.data.percentage}%` const details = `${d.data.details ?? ""}` return `${heading}\n${percent}\n\n${details}`; } const planet_marks = planet_donut.selectAll('path') .data(planet_arcs) .join('path') .attr('fill', d => c(isGoodForOuter(d.data.percentage))) .attr('d', d => { const isGood = isGoodForOuter(d.data.percentage); return isGood === null || isGood === false ? planet_outsideDonut_arc(d) : planet_insideDonut_arc(d)}); // Hover text on the shapes // TODO: See todo ideas below for how to better display details from data // OPTION 1: This works, just the default hover styling // .append('title') // .text(getHoverText); // OPTION 2: Not working so far // Hmm the tooltip isn't showing, but the console.log works (when you remove the 'title' thing above) :| const tooltip = planet_marks.append("div") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "visible") .style("background", "#000") .text("a simple tooltip"); // const mouseover = (d) => { // tooltip.style("opacity", 1) // d3.select(this) // .style("stroke", "black") // .style("opacity", 1) // console.log(d); // } // planet_marks.on("click", mouseover) // OPTION 3: // planet_marks.enter().append("div") // .style("width", (d) => { return "100px"}) // .text("testtext") // .on("mouseover", d => {tooltip.text(d); return tooltip.style("visibility", "visible");}) // .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");}) // .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) const isGoodForInner = (value) => { // True = green = good ("within the donut") = 100 or more return value === null ? null : value >= 100; } const human_marks = human_donut.selectAll('path') .data(human_arcs) .join('path') .attr('fill', d => c(isGoodForInner(d.data.percentage))) .attr('d', d => { const isGood = isGoodForInner(d.data.percentage); return isGood === null ? human_outsideDonut_arc(d) : isGood ? human_insideDonut_arc(d) : human_outsideDonut_arc(d)}) // .append('title') // .text(getHoverText); // Outline marks on hover // TODO: Prevent the category label text from disrupting it // FYI: append('title') is not compatible with this const changeMarkOnMouseover = (event) => { const d = event.srcElement.__data__ d3.select(event.currentTarget) //.attr("fill", hoverColor) .style("stroke", "black") .style("stroke-width", 3); console.log(event); } const changeMarkOnMouseout = (event) => { const d = event.srcElement.__data__ d3.select(event.currentTarget) //.attr("fill", c(isGoodForOuter(d.data.percentage))) // ^ would need to use different functions for inner/outer .style("stroke-width", 0); } planet_marks .on("mouseover", changeMarkOnMouseover) .on("mouseout", changeMarkOnMouseout) human_marks .on("mouseover", changeMarkOnMouseover) .on("mouseout", changeMarkOnMouseout) // ----------------------- 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) const planet_labels = 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 ----------------------- // Approach 4: Use Google MUI Icons const makeMuiIcon = (text) => text.append('tspan') //.attr('class', 'material-symbols-outlined') .attr("class", "human_label") .style('font-size', 26) .text(d => d.data.category_icon) const human_default_text_arc = d3.arc() .innerRadius(human_outer_radius + stroke_width) .outerRadius(donut_center_radius) .padRadius(0.5 * human_outer_radius) .padAngle(2/(0.65 * human_inner_radius)) .cornerRadius(0) const human_labels = human_donut.append('g') .attr('font-family', 'Material Symbols Outlined', 'sans-serif') .attr('font-size', 50) .attr('text-anchor', 'middle') .selectAll('text') .data(human_arcs) .join('text') .attr('transform', d => `translate(${human_default_text_arc.centroid(d)})`) .call((text) => {return makeMuiIcon(text).attr('y', '0.5em')}) // Approach 3: Use images directly (NOT READY) // const human_default_image_arc = d3.arc() // .innerRadius(human_outer_radius) // .outerRadius(human_outer_radius + stroke_width*3) // I don't understand why *3 but ok // .padRadius(0.5 * human_outer_radius) // .padAngle(2/(0.65 * human_inner_radius)) // .cornerRadius(0) // human_donut.append('g') // .selectAll('image') // .data(human_arcs) // .join('image') // .attr('transform', d => `translate(${human_default_text_arc.centroid(d)})`) // .call(image => image.append('tspan') // .attr('y', '0.4em') // .attr('xlink:href', ) // .text(d => d.data.category_abbrev)) // Approach 2: Use text with abbreviations and/or different fonts // const human_default_text_arc = d3.arc() // .innerRadius(human_outer_radius) // .outerRadius(human_outer_radius + stroke_width*3) // I don't understand why *3 but ok // .padRadius(0.5 * human_outer_radius) // .padAngle(2/(0.65 * human_inner_radius)) // .cornerRadius(0) // human_donut.append('g') // // TODO: Replace 'Sofia' with your desired font here and in html above the viz // .attr('font-family', 'Sofia', 'sans-serif') // .attr('font-size', 12) // .attr('text-anchor', 'middle') // .selectAll('text') // .data(human_arcs) // .join('text') // .attr('transform', d => `translate(${human_default_text_arc.centroid(d)})`) // .call(text => text.append('tspan') // .attr('y', '0.4em') // .text(d => d.data.category_abbrev)) // Approach 1 (Old, from v3): This is from when the text rotated with the arc // 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', "Sofia", '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? // ----------------------------------------- Side panel --------------------------------------------- // Opened by onMarkClick, defined above const sidePanelWidth = 300; const sidePanelHeight = 300; const sidePanel = svg.append("foreignObject") .attr("id", "side-panel") .attr("width", sidePanelWidth) // Set the width of the panel .attr("height", sidePanelHeight) // Set the height of the panel .attr("x", 4) .attr("y", 4) .style("display", "block"); // .style("display", "none"); const panelContent = sidePanel.append("xhtml:div") .attr("xmlns", "http://www.w3.org/1999/xhtml") // Necessary for HTML inside SVG .style("width", sidePanelWidth) // Set the width of the panel .style("height", sidePanelHeight) // Set the height of the panel .style("background-color", "whitesmoke") // Background color .style("overflow", "auto") .style("padding", "20px") //.style("box-shadow", "2px 2px 5px rgba(0, 0, 0, 0.1)") //.style("border", "2px solid #ccc") // Add text elements for the icon, title, and description const topBar = panelContent.append("div") .style("display", "flex") .style("flex", 1) .style("align-items", "flex-start") .style("justify-content", "space-between"); const title = topBar.append("div") .style("display", "flex") .style("align-items", "flex-start"); const titleIcon = title.append("div") titleIcon.append('h2') .attr("id", "panel-icon") .attr('class', 'material-symbols-outlined') .style('font-size', 26) .style('margin-right', '10px') .text('') const titleText = title.append("div") titleText.append('h2') .attr("id", "panel-title") .text("Title hereeeeee aeealskdjfoisdf ijasdfj iii ii") const closeButtonArea = topBar.append("div") const closeButton = closeButtonArea.append("button") .attr("id", "close-panel") .style("font-size", "14px") .style("cursor", "pointer") .style('margin-left', '10px') .text("X") .on("click", function() { sidePanel.style("display", "none");}); // Hide the panel when clicked panelContent.append("p") .attr("id", "panel-details") // TODO: Consolidate onMarkClick and onLegendClick const onMarkClick = (event) => { const d = event.srcElement.__data__.data console.log(d); sidePanel.select("#panel-icon").text(d["category_icon"]); sidePanel.select("#panel-title").text(d["category"]); const panelDetails = sidePanel.select("#panel-details"); panelDetails.selectAll("div").remove(); const detailsLines = d["details"].split("\n"); detailsLines.forEach(line => { panelDetails.append("div").text(line); }); sidePanel.style("display", "block"); } const onLegendClick = (event) => { console.log(event); const d = event.srcElement.__data__ console.log(d["details"]); // Update side panel content sidePanel.select("#panel-icon").text(d["category_icon"]); sidePanel.select("#panel-title").text(d["category"]); const panelDetails = sidePanel.select("#panel-details"); panelDetails.selectAll("div").remove(); const detailsLines = d["details"].split("\n"); detailsLines.forEach(line => { panelDetails.append("div").text(line); }); // const detailsWithNewlines = d["details"].replace(/\n/g, "
"); // sidePanel.select("#panel-detils").html(detailsWithNewlines); // // FYI Because this uses html, other stuff in the data would be interpreted as html // // This is a security risk, so either sanitize beforehand or do something else // Show the side panel sidePanel.style("display", "block"); } human_labels.style("cursor", "pointer").on("click", onMarkClick) planet_labels.style("cursor", "pointer").on("click", onMarkClick) human_marks.style("cursor", "pointer").on("click", onMarkClick) planet_marks.style("cursor", "pointer").on("click", onMarkClick) // ------------------------------------------- Legend -------------------------------------------- const human_legendWidth = 200; const human_legendHeight = human_data.length * 23 + 20; const xLegendOffset = 20; const yLegendOffset = canvasHeight - human_legendHeight - 20; // // TODO: Use this and confirm if this works // const insertLineBreaks = (d) => { // const el = d3.select(this).text(); // const words = d.split(' '); // el.text(''); // for (let i = 0; i < words.length; i++) { // const tspan = el.append('tspan').text(words[i]); // if (i > 0) // tspan.attr('x', 0).attr('dy', '15'); // } // } const legend = svg .append("g") .attr("transform", `translate(${xLegendOffset},${yLegendOffset})`) .attr("class", "legend"); legend.append("rect") .attr("width", human_legendWidth) .attr("height", human_legendHeight) .attr("fill", "whitesmoke") legend.append("text") .text("SOCIAL FOUNDATION") legend.append("g") .selectAll("text") .data(human_data) .join("text") .attr("x", 5) .attr("y", (d, i) => i * 23 + 20 + 5) .attr("dy", 7) // Ugh I wanna use makeMuiIcon but the data is in some different format: .call((text) => {text.append('tspan') .attr('font-family', 'Material Symbols Outlined', 'sans-serif') .style('font-size', 26) .text(d => d["category_icon"])}) .style("cursor", "pointer") .on("click", onLegendClick) legend.append("g") .selectAll("text") .data(human_data) .join("text") .attr("x", 40) .attr("y", (d, i) => i * 23 + 20 + 5) .text((d) => d["category"]) .attr("fill", "grey"); return svg.node() }33:T4b3,

TODOs:

Requests

1. Put icons instead of text for the inner labels
2.

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

34:[] 2f:{"id":"dd265e014eef0652","slug":null,"title":"(Draft 4) Donut/Doughnut Economics","thumbnail":"cb8b17d6a4533d4efeeb9e00b5890a4f62c5443bec4b3ac3f680955a1e35bccd","access_level":"public","create_time":"$D2024-08-16T04:48:59.509Z","update_time":"$D2024-09-15T16:07:33.864Z","view_time":null,"first_public_time":"$D2024-08-16T04:48:59.509Z","has_unpublished_edits":null,"fork":{"id":"e288267a6577745c","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":1472,"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":2,"collection":null,"type":"notebook","body":{"title":"(Draft 4) Donut/Doughnut Economics","cells":[{"id":0,"value":"md`# (Draft 4) Donut/Doughnut Economics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"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=27969826#gid=27969826

","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":845,"value":"html`\n // LINK YOUR FONT HERE\n\n\n \n\n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1123,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$32","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":"$33","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=27969826#gid=27969826\";\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":1146,"value":"canvasWidth = width + 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"canvasHeight = height + 400","pinned":true,"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, 800)","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":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"