29:null 2a:["$","title",null,{"children":"TP3 Présentation et analyse critique d'une visualisation | Camille's Workspace | Observable"}] 2f:T52c,Commentaire : - Notebook intitulé "Where dit the Women Artist within The Smithsonian American Art Museum Collection Go to School ?" (Où les femmes artistes de la collection du Smithsonian American Art Museum sont-elles allées à l'école ?) réalisé en juin 2023 par Aria Smith. - Aria Smith qui est fait de la visualisation de données pour la Smithsonian. Elle fait notamment de la collecte de données à partir de la base de données Wikidata à l'aide du langage de requête SPARQL pour trouver les enregistrements de toutes les femmes artistes qui ont des œuvres dans la collection du SAAM ; de l'analyse des données pour trouver des relations enfouies dans les détails de l'ensemble de données sur les artistes qui fournissent des informations cachées ou non reconnues reliant leurs œuvres ; Recherche de diverses méthodes pour conceptualiser visuellement ces relations à l'aide des outils Wikidata, de l'espace de travail D3 d'ObservableHQ et d'autres plates-formes de visualisation ect. Source : [Aria Smith, Linkedin](https://www.linkedin.com/in/aria-smith-/) - Données issues de Wikidata - 3 visualisations de données dont focus sur diagramme en forme d'anneau ou (donut chart) interactif présentant les écoles fréquentés par les artistes femmes ayant des œuvres dans la collection SAAM. 30: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) ] })31: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]); }) }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: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", } })34:[{"id":"a71c8882776d9f812cf6d607eb3e0032fc0ebf0575093dd2a4e56ebed82beb671a7b0acb5c819e3f3e2229ce55c2cc56c1174af99ac94f0bb3d4c172417084ce","href":"https://static.observableusercontent.com/files/a71c8882776d9f812cf6d607eb3e0032fc0ebf0575093dd2a4e56ebed82beb671a7b0acb5c819e3f3e2229ce55c2cc56c1174af99ac94f0bb3d4c172417084ce","name":"data5.json","type":"application/json","lastModified":1715896786208.976,"size":445615},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1715896786208.976,"size":842177},{"id":"48d155fb06e2f2511fdb6b0b176e73d7cf40895ff437678f54d314945cb8570ccef397b871d339cd441bbb48e1d3fcbfe02134cd9adfba7e59d0c26f433ebba8","href":"https://static.observableusercontent.com/files/48d155fb06e2f2511fdb6b0b176e73d7cf40895ff437678f54d314945cb8570ccef397b871d339cd441bbb48e1d3fcbfe02134cd9adfba7e59d0c26f433ebba8","name":"schoolLocations_artistCounts.csv","type":"text/csv","lastModified":1715896786208.976,"size":41177},{"id":"aea2c1858589381728b0cf3b030a55f58da23d5dddf0a6efce77c72cfc2f7205308280bbc7f3bbf6ce3bdcfef665791ad37f4fe95f669be4b657d1f38daf46f3","href":"https://static.observableusercontent.com/files/aea2c1858589381728b0cf3b030a55f58da23d5dddf0a6efce77c72cfc2f7205308280bbc7f3bbf6ce3bdcfef665791ad37f4fe95f669be4b657d1f38daf46f3","name":"Capture d’écran, le 2024-05-16 à 18.34.33.png","type":"image/png","lastModified":1715898919770.511,"size":116063},{"id":"aea2c1858589381728b0cf3b030a55f58da23d5dddf0a6efce77c72cfc2f7205308280bbc7f3bbf6ce3bdcfef665791ad37f4fe95f669be4b657d1f38daf46f3","href":"https://static.observableusercontent.com/files/aea2c1858589381728b0cf3b030a55f58da23d5dddf0a6efce77c72cfc2f7205308280bbc7f3bbf6ce3bdcfef665791ad37f4fe95f669be4b657d1f38daf46f3","name":"Capture d’écran, le 2024-05-16 à 18@1.34.33.png","type":"image/png","lastModified":1715898938954.872,"size":116063}] 2d:{"id":"fcf1e573b75e92dd","slug":null,"title":"TP3 Présentation et analyse critique d'une visualisation","thumbnail":"2c10406e45ffddf87ce3bd5bb1764a8b10b39b79f643e5402cdccaf7a1713157","access_level":"public","create_time":"$D2024-05-16T21:59:46.208Z","update_time":"$D2024-05-17T13:30:06.512Z","view_time":null,"first_public_time":"$D2024-05-16T21:59:46.208Z","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":0,"starred":false,"owner":{"type":"team","id":"a1c22cedaae1ce7b","login":"camilledlt","name":"Camille's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ff43985b4fcfb09ec72858d3308d704f782a52cb38cb773a0b753754f9904443","tier":"starter_2024"},"version":1575,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ce24b37fe216a30","login":"camille2","name":"Camille","avatar_url":"https://avatars-next.observableusercontent.com/72e733367eaea79f502304d9c6e0decb595ff1907977a5c7eaf035e15ce35cb5","tier":null}],"members":[{"type":"individual","id":"0ce24b37fe216a30","login":"camille2","name":"Camille","avatar_url":"https://avatars-next.observableusercontent.com/72e733367eaea79f502304d9c6e0decb595ff1907977a5c7eaf035e15ce35cb5","tier":null,"role":"editor"},{"type":"team","id":"a1c22cedaae1ce7b","login":"camilledlt","name":"Camille's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ff43985b4fcfb09ec72858d3308d704f782a52cb38cb773a0b753754f9904443","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TP3 Présentation et analyse critique d'une visualisation","cells":[{"id":1542,"value":"# TP3 Présentation et analyse critique d'une visualisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1546,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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":1551,"value":"Commentaire : \n\n- Version modifiée d'une visualisation de données créée par Aria Smith pour le Smithsonian American Art Museum (SAAM) Advanced Internship, 2022-2023.\n\n- Sélecteur pour sélectionner une école\n- Artistes femmes qui ont fréquenté cette école.\n- Survolez sur chaque section et plusieurs informations sur l'artiste issue de sa page Wikidata + lien vers celle-ci\n- On peut également passer d'une école à l'autre, en utlisant les boutons \"précédent\" et \"suivant\"","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":1563,"value":"452 valeurs pour école","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1554,"value":"Comme elle le précise, les données sont issues de la requête SPARQL sur Wikidata ci dessous : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1556,"value":"captureDecranLe20240516A1813433 = FileAttachment(\"Capture d’écran, le 2024-05-16 à 18@1.34.33.png\").image()","pinned":true,"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":1561,"value":"// Les artistes qui n'ont pas reçu d'éducation formelle ou dont l'histoire éducative n'est pas encore enregistrée dans Wikidata ne sont pas inclus. \n\nSur les quelque 1 700 femmes dont les œuvres sont conservées au SAAM, seules 704 artistes, soit 41 %, sont représentées ci-dessus.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1566,"value":"Commentaires : \n- + donne des informations supp pour la compréhension du graphique \n- du mal à visualiser/ à s'imaginer le nombre total des artistes\n- accessibilité ?\n- good strategy i guess : bcp de valeurs pour les écoles et les artistes, on aurait rien vu avec un diagramme en baton. ","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":1570,"value":"Commentaire //\nExplorer les schémas à l'aide de cartes\nLa visualisation ci-dessus résume les écoles fréquentées par les artistes de l'SAAM, mais il est difficile d'en dégager des tendances. En obtenant les coordonnées des écoles et le nombre d'élèves qui les ont fréquentées, nous pouvons voir dans quelle partie du pays la majorité des artistes féminines de la collection de la SAAM ont fréquenté l'école*.\n\nLa carte ci-dessous montre de fortes concentrations en Californie et dans le nord-est des États-Unis. Les deux seules écoles comptant 30 artistes ou plus sont l'Art Institute of Chicago et l'Art Students League (New York).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1424,"value":"$30","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":1572,"value":"// \n*Cette carte n'inclut pas les écoles internationales ou les écoles d'art américaines pour lesquelles aucune donnée n'est enregistrée dans Wikidata. Dans les cas où l'école n'existe plus ou a plusieurs sites, seules les coordonnées du siège ou du centre ville où l'école était située ont été utilisées.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"$31","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":"$32","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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"