29:null 2a:["$","title",null,{"children":"Where did the Women Artists within The Smithsonian American Art Museum Collection Go To School? | sona | Observable"}] 2f:T623,//Thank you to Observable. This map was adapted from the following notebook: https://observablehq.com/@observablehq/plot-mapping and using techniques outlined in the tutorial https://observablehq.com/@observablehq/build-your-first-map-with-observable-plot? Plot.plot({ width: 960, height: 600, projection: "albers-usa", color: { // scheme: "blues" scheme: "YlGnBu" }, marks: [ Plot.density(schoollocations_artistcounts, { x: "longitude", y: "latitude", bandwidth: 12, fill: "density" }), Plot.dot(schoollocations_artistcounts, { x: "longitude", y: "latitude", r: 1, fill: "currentColor" }), Plot.text(schoollocations_artistcounts, { // Add text to the map using data from us_power_plants x: "longitude", // Place text horizontally at plant longitude y: "latitude", // Place text vertically at plant latitude text: "schoolLabel", // The text that appears is the value from the Plant_Name column, filter: (d) => d.number > 30, // Only add text for plants with capacity exceeding 3500 MW fontSize: 12, // Increased font size fontWeight: 700, // Increased font weight stroke: "white", // Adds white outer stroke to text (for readability) fill: "black", // Text fill color textAnchor: "start", // Left align text with the x- and y-coordinates dx: -15, // Shifts text to the right (starting from left alignment with coordinate) dy: 15 }), Plot.geo(statemesh, { strokeOpacity: 0.3 }), Plot.geo(nation) ] })30:T24e2,//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 //--Responsive donut (use of viewbox, max-height 100%, height auto): (https://observablehq.com/@d3/donut-chart) //--Text wrap in tooltip (see CreateSVGText function below in another cell on 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); Mike Bostock (https://observablehq.com/@mbostock); 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") .text("previous"); var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width) .attr("height", height) .style("display","inline") .attr("viewBox", [0,0, width, height]) .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", "380px") .style("background", "white") .style("z-index", "999") .style("box-shadow", "0px 4px 4px 0px #00000040") //.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]); }) }31: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; }32:T787,//Thank you to Observable. This map was generated using code and methods from this map tutorial: https://observablehq.com/@observablehq/build-your-first-map-with-observable-plot Plot.plot({ projection: "albers-usa", marks: [ Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }), Plot.dot(schoollocations_artistcounts, { x: "longitude", y: "latitude", r: "number", stroke: "number", strokeOpacity: .5, opacity: 1//d => 0.7, }), Plot.text(schoollocations_artistcounts, { // Add text to the map using data from us_power_plants x: "longitude", // Place text horizontally at plant longitude y: "latitude", // Place text vertically at plant latitude text: "schoolLabel", // The text that appears is the value from the Plant_Name column, filter: (d) => d.number > 30, // Only add text for plants with capacity exceeding 3500 MW fontSize: 12, // Increased font size fontWeight: 700, // Increased font weight stroke: "white", // Adds white outer stroke to text (for readability) fill: "black", // Text fill color textAnchor: "start", // Left align text with the x- and y-coordinates dx: 14, // Shifts text to the right (starting from left alignment with coordinate) dy: 15 }), Plot.density(schoollocations_artistcounts, { x: "longitude", y: "latitude", bandwidth: 10, thresholds: 10, stroke: "number", fill: "number", fillOpacity: 0.1, opacity: d => 0.7 , // (transparent unless source selected) mixBlendMode: "multiply", weight: "number" }) ], height: 500, width: 800, margin: 50, density: { domain: [100, 2000] }, r: { range: [1, 15], domain: d3.extent(schoollocations_artistcounts, (d) => d.number) }, color: { legend: true, label: "Density of artists" //scheme: "spectral", } })33:[{"id":"a71c8882776d9f812cf6d607eb3e0032fc0ebf0575093dd2a4e56ebed82beb671a7b0acb5c819e3f3e2229ce55c2cc56c1174af99ac94f0bb3d4c172417084ce","href":"https://static.observableusercontent.com/files/a71c8882776d9f812cf6d607eb3e0032fc0ebf0575093dd2a4e56ebed82beb671a7b0acb5c819e3f3e2229ce55c2cc56c1174af99ac94f0bb3d4c172417084ce","name":"data5.json","type":"application/json","lastModified":1685566599911.256,"size":445615},{"id":"48d155fb06e2f2511fdb6b0b176e73d7cf40895ff437678f54d314945cb8570ccef397b871d339cd441bbb48e1d3fcbfe02134cd9adfba7e59d0c26f433ebba8","href":"https://static.observableusercontent.com/files/48d155fb06e2f2511fdb6b0b176e73d7cf40895ff437678f54d314945cb8570ccef397b871d339cd441bbb48e1d3fcbfe02134cd9adfba7e59d0c26f433ebba8","name":"schoolLocations_artistCounts.csv","type":"text/csv","lastModified":1685126034959.138,"size":41177},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1685126103100.387,"size":842177},{"id":"c37b42d26f2fe234eb15ffe555cf01ff65b304b2d60830a7052179e61d7204f9375df6570ec7da16d62e29bbc8b2ef88015a0367d05f0715a2b26cf75a4378c5","href":"https://static.observableusercontent.com/files/c37b42d26f2fe234eb15ffe555cf01ff65b304b2d60830a7052179e61d7204f9375df6570ec7da16d62e29bbc8b2ef88015a0367d05f0715a2b26cf75a4378c5","name":"data4@1.json","type":"application/json","lastModified":1681826462488.341,"size":356282}] 2d:{"id":"f8af29761d93bd06","slug":null,"title":"Where did the Women Artists within The Smithsonian American Art Museum Collection Go To School?","thumbnail":"182ddc0d8a52ef14ec805971ff7704a361a42ce7298ba3bd99657aef912cf0bd","access_level":"public","create_time":"$D2023-02-14T13:35:37.376Z","update_time":"$D2023-06-16T13:16:50.930Z","view_time":null,"first_public_time":"$D2023-02-14T13:35:37.376Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"b444bbbd6982f688","login":"sonoet","name":"sona","avatar_url":"https://avatars-next.observableusercontent.com/ff37bbf61bb234e77b7649a6fe9fa84c42b1ddd5bda5d96e9792756528f6ed15","tier":"starter_2024"},"version":1541,"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,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Where did the Women Artists within The Smithsonian American Art Museum Collection Go To School?","cells":[{"id":0,"value":"# Where did the Women Artists within The Smithsonian American Art Museum Collection Go To School?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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, 2022-2023.
\n
Hover over each section to see artists that attended this school. Click the next button on the bottom right of the circle to see different schools and artists or jump to a school using the drop down below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":65,"value":"//See code for drawDonut function lower on this page for more thank yous and credits\n//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"},{"id":1418,"value":"Data Source:Wikidata (https://w.wiki/6qXB)

\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"},{"id":1366,"value":"
\n### Exploring patterns through maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"The visualization above summarizes which schools SAAM artists attended but makes it difficult to see patterns. Below, by obtaining the coordinates for the schools and a count of how many students attended each school, we can see in what part of the country the majority of women artists in SAAM's collection attended school.\\*

\nThe map below shows large concentrations in California and the northeast US. The only two schools with 30 or more artists listed are Art Institute of Chicago and Art Students League (New York).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1424,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1538,"value":"Data source: Wikidata (https://w.wiki/6kz4)

\n*This map will not include international schools or US schools of artists for which no data is recorded in Wikidata. In cases in which the school no longer exists or has multiple locations, only the coordinates of the headquarters or city center where the school was located were used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1116,"value":"data = FileAttachment(\"data5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":962,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":1360,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1362,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1353,"value":"schoollocations_artistcounts = await FileAttachment(\"schoolLocations_artistCounts.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1412,"value":"import {try_it} from \"@observablehq/notes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1432,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1434,"value":"statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1448,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"