2b:null 2c:["$","title",null,{"children":"Untitled | sona | Observable"}] 31:T2421,//References: //--Basic donut chart: https://d3-graph-gallery.com/graph/donut_basic.html //--Quantize (for color scale): https://observablehq.com/@d3/d3-quantize //--Making an animated donut chart: https://medium.com/@kj_schmidt/making-an-animated-donut-chart-with-d3-js-17751fde4679 //--Updating chart: https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36 //--Getting chart to show up in Observable: https://observablehq.com/@stefanreifenberg/donut-chart-from-the-d3-js-graph-gallery //--Text wrap in tooltip (see CreateSVGText function in another section ton this page). //Thank you to: Aria Smith; Yan Holtz (https://www.yan-holtz.com/); Fil (https://observablehq.com/@fil); K.J. Schmidt (https://medium.com/@kj_schmidt); Christian Behrens (https://medium.com/@c_behrens); Evan Galloway (https://observablehq.com/@gallowayevan) for CreateSVGText. async function drawDonut() { var width = 500 var height = 500 var margin = 0 //The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin. var radius = Math.min(width, height) / 2 - margin // append div2 to the div called 'my_dataviz' //Setting the order of my divs so one button shows up to the left of the donut, one button to the right of the donut, and the tooltip furthest to the left. var div2 = d3.select("#my_dataviz") .append("div") .style("display","inline") .append("button") .attr("class", "previous round") .text("previous"); var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width) .attr("height", height) .style("display","inline") .attr("viewBox", [0,0,500,500]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") //Using quantize method to create a color scale. Quantize allows you to set two desired values and get all evenly distributed values in between based on x number. In this case, blue and #e3e7f9 (an off white color) are my start and end colors. Based on the number of artists in the circle for each school, I want an even distribution of shades from blue to #e3e7f9. var colorInterpolator = d3.interpolate("blue","#e3e7f9") var keys = []; for (var k in data[index].data) keys.push(k); //index has a value of 0 when the page is loaded. When a new school is selected from the dropdown, index is the index of whichever school is selected, which reloads the graph. var colors = d3.quantize(colorInterpolator,keys.length); var colorScale = d3.scaleOrdinal() .range(colors) .domain(data[index].data.map(d => d.artist)) // Compute the position of each group on the pie: var pie = d3.pie() //Because I want evenly sized sections of the donut (as opposed to sections that have a different sized based on a porportion, I commented out the line below that takes the value of each section from a number in the dataset and replaced the value of each section with 1. //.value(function(d) {return d.value; }) .value(d => 1); var div3 = d3.select("#my_dataviz") .append("div") .style("display","inline") .append("button") .attr("class", "next") .text("next"); var div = d3.select("#my_dataviz").append("div") .attr("class", "tooltip-donut") .style("inline-size", "250px") .style("display","inline") .style("opacity", 0) .style("position", "fixed") .style("right", "20px") //.style("top", "200px") .style("background", "white") .style('max-width', "100%") .style('height', "auto") //.style("border", "solid"); // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function. svg .selectAll('whatever') .data(pie(data[index].data)) .enter() .append('path') .attr('d', d3.arc() .innerRadius(180) // This is the size of the donut hole .outerRadius(radius) .padRadius(300) .padAngle(2 / 300) .cornerRadius(8) ) .attr("fill", d => { if (data[index].data.length > 1) { //Logic to account for when there is only one artist listed, (i.e., you can't have blue to off white color scale b/c there's only one value) return colorScale(d.data.artist) } else { return "rgb(151, 154, 251)" } }) .style("opacity", 0.5) .on('mouseover', function(event,i) { d3.select(this) .style('opacity', 1) console.log("mousing over", event, this) div.transition() .duration(50) .style("opacity", 1) .style("top",30); div.html(""+""+event.data["artist"]+""+'

'+"
Born: "+event.data["byear"]+createSVGtext({text:event.data["description"], x:20,y:20}).outerHTML.replace(/<\/br>/g, "")) //createSVGtext results in an object that I don't know how to parse, so I turn it into a string and remove the extra
.style("max-width","220px"); }) .on('mouseout', function(event) { d3.select(this) .style('opacity', .5); }) svg.append("text") .attr("text-anchor", "middle") .text(data[index].name) .attr("font-family", "sans-serif") .attr("font-size", 20); //Change function tells the chart what to do when new data and a new section of the donut is added to the chart, for example, when you click the "next" or "previous" button and there is one or more artist / section to represent in the donut. This function only acts on the new section/s. I know there is some repetition here which could be eliminated. function change(data) { var pie = d3.pie() .value(function (d) { return 1; }).sort(null)(data.data); var arc = d3.arc() .outerRadius(radius) .innerRadius(180) .padRadius(300) .padAngle(2 / 300) .cornerRadius(8); var path = d3.select("g") .selectAll("path") .data(pie); // Compute the new angles path.enter().append("path") .attr("d", arc) .attr('fill', function(d){ return(colorScale(d.data.artist)) }) .style("opacity", 0.5) .on('mouseover', function(event,i) { console.log("mouse over change", event, this); d3.select(this) .style('opacity', 1); div.transition() .duration(50) .style("opacity", 1); div.html(""+""+event.data["artist"]+""+'

'+"
Born: "+event.data["byear"]+createSVGtext({text:event.data["description"], x:20,y:20}).outerHTML.replace(/<\/br>/g, "")) }) .on('mouseout', function(event) { d3.select(this) .style('opacity', .5); // div.transition() // .duration(50) // .style("opacity", 0); }); path.transition().duration(500).attr("d", arc); // redrawing the path with a smooth transition path.exit().remove(); d3.select("path").selectAll("text").remove(); d3.select("svg").selectAll("text").remove(); } //Update takes the new donut (existing sections and new sections added) and updates them. In this case, the color scale has to be redone taking into account that there are now more or fewer sections / shades of blue to display. Some repetition in this function could be eliminated. function update(data) { var colorInterpolator2 = d3.interpolate("blue","#e3e7f9") var colors2 = d3.quantize(colorInterpolator2,data.data.length); var colorScale2 = d3.scaleOrdinal() .range(colors2) .domain(data.data.map(d => d.artist)) var pie = d3.pie() .value(function (d) { return 1; }).sort(null)(data.data); var path = d3.select("g") .selectAll("path") .data(pie) .style("opacity", .5) .attr("fill", d => { if (data.data.length > 1) { return colorScale2(d.data.artist) } else {return "rgb(151, 154, 251)"} }); svg.append("text") .attr("text-anchor", "middle") .text(data.name) .attr("font-family", "sans-serif") .attr("font-size", 20); } //Create an on click action for the "next" and "previous" var i = index d3.select("button.next") .on("click", function (event) { d3.select(this) i += 1 if (data[i]==null) { //loop back around to the first school when you reach the end of the list. i = 0 } change(data[i]) update(data[i]); }) d3.select("button.previous") .on("click", function (event) { d3.select(this) i -= 1 if (i <= -1) { i = data.length - 1 //go back to the last school when you reach the first school in the list. } change(data[i]) update(data[i]); }) }32:T9ff,//Imported from Evan Galloway (https://observablehq.com/@gallowayevan) notebook: https://observablehq.com/@gallowayevan/svg-word-wrap. Thanks to Evan Galloway. //Using this as a text wrap function for my tooltip text. What would normally be simple css styling seems to be complicated in Observable and requires some work arounds. This is the only work around I found that acts on a text string rather than a DOM element. function createSVGtext(config = {}) { let {text, x = 0, y = 0, fontSize = 14, fill = '#333', textAnchor = "left", maxCharsPerLine = 30, lineHeight = 1.3} = config; if (typeof config == "string") text = config; let svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); svgText.setAttributeNS(null, 'x', x); svgText.setAttributeNS(null, 'y', y); svgText.setAttributeNS(null, 'font-size', fontSize); svgText.setAttributeNS(null, 'fill', fill); svgText.setAttributeNS(null, 'text-anchor', textAnchor); let words = text.trim().split(/\s+/).reverse(), word, dy = 0, lineNumber = 0, line = []; while(word = words.pop()) { line.push(word); let testLineLength = line.join(" ").length; if (testLineLength > maxCharsPerLine){ line.pop(); //let svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); let svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'br'); //replaced line above to add
tags. I did this because I don't know how to parse the object that results from this function, so I turn it into text and add it as html to my tooltip. This results in

instead of , which provides two line breaks instead of one. I delete one line break above when I call the method and turn the result into a string. svgTSpan.setAttributeNS(null, 'x', x); svgTSpan.setAttributeNS(null, 'dy', dy + "em"); let tSpanTextNode = document.createTextNode(line.join(" ")); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); line = [word]; dy = lineHeight; } } //let svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan') let svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'br'); svgTSpan.setAttributeNS(null, 'x', x); svgTSpan.setAttributeNS(null, 'dy', dy + "em"); let tSpanTextNode = document.createTextNode(line.join(" ")); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); return svgText; }33:[{"id":"c37b42d26f2fe234eb15ffe555cf01ff65b304b2d60830a7052179e61d7204f9375df6570ec7da16d62e29bbc8b2ef88015a0367d05f0715a2b26cf75a4378c5","href":"https://static.observableusercontent.com/files/c37b42d26f2fe234eb15ffe555cf01ff65b304b2d60830a7052179e61d7204f9375df6570ec7da16d62e29bbc8b2ef88015a0367d05f0715a2b26cf75a4378c5","name":"data4@1.json","type":"application/json","lastModified":1683917780206.925,"size":356282},{"id":"1005ac9a7ee1fa80512cee4ae6e45ce210eda566c8e5b57154c04033930da40d84378c33d7153901a53dfdafec9bd96fc117a90aebbe3b82a3f2bfffaff1f655","href":"https://static.observableusercontent.com/files/1005ac9a7ee1fa80512cee4ae6e45ce210eda566c8e5b57154c04033930da40d84378c33d7153901a53dfdafec9bd96fc117a90aebbe3b82a3f2bfffaff1f655","name":"data5.json","type":"application/json","lastModified":1685561457563.511,"size":445706},{"id":"8b7436df1af4cb843597e3b0b200778e9f95da458d86b2de960122bb1c26971922c56c20f638c48a8842d620533f9628b4efe760b28ba1c6dd136576890ef789","href":"https://static.observableusercontent.com/files/8b7436df1af4cb843597e3b0b200778e9f95da458d86b2de960122bb1c26971922c56c20f638c48a8842d620533f9628b4efe760b28ba1c6dd136576890ef789","name":"data5@1.json","type":"application/json","lastModified":1685562355607.017,"size":445706},{"id":"a71c8882776d9f812cf6d607eb3e0032fc0ebf0575093dd2a4e56ebed82beb671a7b0acb5c819e3f3e2229ce55c2cc56c1174af99ac94f0bb3d4c172417084ce","href":"https://static.observableusercontent.com/files/a71c8882776d9f812cf6d607eb3e0032fc0ebf0575093dd2a4e56ebed82beb671a7b0acb5c819e3f3e2229ce55c2cc56c1174af99ac94f0bb3d4c172417084ce","name":"data5@2.json","type":"application/json","lastModified":1685565806009.889,"size":445615},{"id":"48d155fb06e2f2511fdb6b0b176e73d7cf40895ff437678f54d314945cb8570ccef397b871d339cd441bbb48e1d3fcbfe02134cd9adfba7e59d0c26f433ebba8","href":"https://static.observableusercontent.com/files/48d155fb06e2f2511fdb6b0b176e73d7cf40895ff437678f54d314945cb8570ccef397b871d339cd441bbb48e1d3fcbfe02134cd9adfba7e59d0c26f433ebba8","name":"schoolLocations_artistCounts.csv","type":"text/csv","lastModified":1685451833637.624,"size":41177},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1685451834680.61,"size":842177}] 2f:{"id":"4ed4dd247271da64","slug":null,"title":"","thumbnail":"81daf5515b4d9c031d5d43703c3704c0d5bb6045aa244309c2dc76588908afed","access_level":"public","create_time":"$D2023-05-12T18:56:20.206Z","update_time":"$D2023-06-01T16:33:22.949Z","view_time":null,"first_public_time":"$D2023-05-12T18:56:20.206Z","fork":{"id":"f8af29761d93bd06","slug":null,"title":"Where did the Women Artists within The Smithsonian American Art Museum Collection Go To School?","owner":{"id":"b444bbbd6982f688","login":"sonoet","name":"sona"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b444bbbd6982f688","login":"sonoet","name":"sona","avatar_url":"https://avatars-next.observableusercontent.com/ff37bbf61bb234e77b7649a6fe9fa84c42b1ddd5bda5d96e9792756528f6ed15","tier":"starter_2024"},"version":1558,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f68387689c69dd34","login":"sonoet","name":"sona","avatar_url":"https://avatars-next.observableusercontent.com/ff37bbf61bb234e77b7649a6fe9fa84c42b1ddd5bda5d96e9792756528f6ed15","tier":null}],"members":[{"type":"individual","id":"f68387689c69dd34","login":"sonoet","name":"sona","avatar_url":"https://avatars-next.observableusercontent.com/ff37bbf61bb234e77b7649a6fe9fa84c42b1ddd5bda5d96e9792756528f6ed15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":508,"value":"This is a modified version of a data visualization created by Aria Smith for the Smithsonian American Art Museum (SAAM) Advanced Internship Program 2022-2023.
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1244,"value":"//Thank you Jeremy Ashkenas (https://observablehq.com/@jashkenas) for inputs: https://observablehq.com/@jashkenas/inputs\n// Thank you also PostGraphics (https://observablehq.com/@washpostgraphics) for a simple example of how to use this without change event: https://observablehq.com/@washpostgraphics/state-plane-selector\nviewof dd1 = select({\n title: \"Schools\",\n //description: \"Select a school from this drop down list\",\n options: schools.sort(),\n value: \"Institute of American Indian Arts\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"//Thank you to Stefan Reifenberg: https://observablehq.com/@stefanreifenberg/donut-chart-from-the-d3-js-graph-gallery\n//For showing one approach to call my donut function and have it render in Observable.\n{\n yield html`\n

`;\n drawDonut();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"Data source: Wikidata (https://w.wiki/6a3a)

\nArtists who did not receive formal education, or whose educational history isn't yet recorded in Wikidata are not included. Of the approximately 1700 women whose artwork is held at SAAM, only 704 artists or 41% are represented above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"data = FileAttachment(\"data5@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"import {select} from \"@jashkenas/inputs\"\n//This powers the drop down menu of schools","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"//Thanks Kenji Kawano (https://observablehq.com/@kkawano) for showing me how to format the for loop in observable: https://observablehq.com/d/a1fca12f21f4df47\nschools = {\n const schools = []\n for ( var i = 0; i < data.length; i++) {\n schools.push(data[i].name)//.replace('\"',\"\"))\n }\n return schools\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"//Index of the item selected in the drop down menu.\nindex = data.map(function(o) { return o.name; }).indexOf(dd1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"