2c:null 2d:["$","title",null,{"children":"Exploring Gender Representation in Museums | Austin Poor | Observable"}] 32:Tebf,{ // Museums by gender... const WIDTH = 600; const HEIGHT = 400; const svg = d3 .create("svg") .attr("viewBox", `0 0 ${WIDTH} ${HEIGHT}`) .style("background-color", "#f0f0f0"); const data = Object.keys(museum_by.gender).map(m => { const total = Object.values(museum_by.gender[m]).reduce((a, b) => a + b); return { museum: m, ..._.mapValues(museum_by.gender[m], v => v / total) }; }); console.log(data); // data.sort((a, b) => (a.woman > b.woman ? a : b)); data.sort((a, b) => { if (a.woman > b.woman) return -1; else if (a.woman < b.woman) return 1; if (a.man > b.man) return -1; else if (a.man < b.man) return 1; else return 0; }); const colors = { male: "#b5deeb", female: "#ebb5e6", NA: "#c0c0c0", //"#daf2db", Unknown: "#c0c0c0" //"#daf2db" }; const layout = {}; const make_pct_bar = g => { // Create contsants const W = WIDTH * 0.6; const H = (HEIGHT * 0.78) / data.length + HEIGHT * 0.01; // Draw base bar g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", W) .attr("height", H) .attr("fill", "#505050"); // Draw woman bar g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", d => W * d.woman) .attr("height", H) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", colors.female); // Draw man bar g.append("rect") .attr("x", d => W * d.woman) .attr("y", 0) .attr("width", d => W * d.man) .attr("height", H) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", colors.male); // Draw NA bar g.append("rect") .attr("x", d => W * (1 - d.NA)) .attr("y", 0) .attr("width", d => W * d.NA) .attr("height", H) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", colors.NA); const font_size = 10; g.append("text") .attr("x", W + 5) .attr("y", H * 0.65) //font_size + 1) .text(d => d.museum) .attr("fill", "#505050") .attr("font-family", "Helvetica") .attr("font-size", font_size); }; // Add museum groups and call bar-drawing function svg .append("g") .selectAll("g") .data(data) .enter() .append("g") .attr( "transform", (d, i) => `translate(${WIDTH * 0.025},${HEIGHT * 0.16 + ((HEIGHT * 0.8) / data.length) * i})` ) .on("mouseover", d => { viewof mgender_selection.value = d.museum; viewof mgender_selection.dispatchEvent(new CustomEvent("input")); }) .call(make_pct_bar); // Draw the legend const lheight = 20; const lwidth = 50; const legend = svg .append("g") .attr("transform", `translate(${WIDTH * 0.025},${HEIGHT * 0.16 - 18})`); legend .selectAll("g") .data(["female", "male", "Unknown"]) .enter() .append("g") .attr("transform", (d, i) => `translate(${57 * i},0)`) .call(g => { g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 15) .attr("height", 15) .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", d => colors[d]); g.append("text") .attr("x", 17) .attr("y", 11) .attr("font-family", "helvetica") .attr("font-size", 10) .attr("font-style", "oblique") .text(d => d[0].toUpperCase() + d.slice(1)); }); // Draw the titiel svg .append("text") .text("Proportional Artist Gender Representation in Museums") .attr("x", WIDTH * 0.025) .attr("y", HEIGHT * 0.08) .attr("font-family", "Helvetica") .attr("font-width", "bold") .attr("font-size", 22); return svg.node(); }33:[{"id":"40dff3fea9c230b39f27a4cc576484ece3c074b09b38e34d3d078e54944edfa833905a62a579f4b809a9ace07f51c144b04a3fb017926195116b6983e7391b39","href":"https://static.observableusercontent.com/files/40dff3fea9c230b39f27a4cc576484ece3c074b09b38e34d3d078e54944edfa833905a62a579f4b809a9ace07f51c144b04a3fb017926195116b6983e7391b39","name":"artistdata.csv","type":"text/csv","lastModified":1596734636493.248,"size":804603}] 30:{"id":"f4dc75aa583721bf","slug":"exploring-artist-representation-data","title":"Exploring Gender Representation in Museums","thumbnail":"83f3f99f8f9cac9cb2731478d9cc2dedb7ad006bc25774c5c9597c3b00a138f5","access_level":"public","create_time":"$D2020-08-06T14:30:17.514Z","update_time":"$D2020-09-29T15:02:45.955Z","view_time":null,"first_public_time":"$D2020-08-06T17:21:49.367Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"24d1915eef983abd","login":"a-poor","name":"Austin Poor","avatar_url":"https://avatars-next.observableusercontent.com/6698449cf180309c9ae8a3839ce9a1d4633611a0f6de0eab57d9cc4ae67ff9c1","tier":"starter_2024"},"version":522,"publish_version":522,"role":null,"authored":false,"authors":[{"type":"individual","id":"4374e963674d7a0f","login":"a-poor","name":"Austin Poor","avatar_url":"https://avatars-next.observableusercontent.com/6698449cf180309c9ae8a3839ce9a1d4633611a0f6de0eab57d9cc4ae67ff9c1","tier":null}],"members":[{"type":"individual","id":"4374e963674d7a0f","login":"a-poor","name":"Austin Poor","avatar_url":"https://avatars-next.observableusercontent.com/6698449cf180309c9ae8a3839ce9a1d4633611a0f6de0eab57d9cc4ae67ff9c1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Exploring Gender Representation in Museums","cells":[{"id":0,"value":"md`# Exploring Gender Representation in Museums`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`\nUnbalanced gender representation among artists in US museums remains a major issue to this day. The disparity presents a skewed perspective and leads to a paucity of female views presented.\n\nWhile I'm sure many people are at least somewhat aware of the problem, my goal in creating this was to help visualize just how extreme the gap between male and female artist representation really is.\n\nThis graph shows the proportional gender breakdown for 18 major US museums. As you move your mouse over a museum in the graph, the table below will update with the data for each museum.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"viewof mgender_selection = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"html`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Museum Name	${mgender_selection}
Male Artists	${museum_by.gender[mgender_selection].man}	${fmtPct(\n museum_by.gender[mgender_selection].man /\n Object.values(museum_by.gender[mgender_selection]).reduce(sum),\n 2\n )}
Female Artists	${museum_by.gender[mgender_selection].woman}	${fmtPct(\n museum_by.gender[mgender_selection].woman /\n Object.values(museum_by.gender[mgender_selection]).reduce(sum),\n 2\n )}
Other Artists	${museum_by.gender[mgender_selection].NA}	${fmtPct(\n museum_by.gender[mgender_selection].NA /\n Object.values(museum_by.gender[mgender_selection]).reduce(sum),\n 2\n )}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`***\n\n## Appendix\n\nThe data for this comes from the paper [\"Diversity of artists in major U.S. museums\"](https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0212852). You can download the data from [this github repo](https://github.com/artofstat/ArtistDiversity).\n\nTopaz CM, Klingenberg B, Turek D, Heggeseth B, Harris PE, Blackwood JC, et al. (2019) Diversity of artists in major U.S. museums. PLoS ONE 14(3): e0212852. https://doi.org/10.1371/journal.pone.0212852\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"data = d3.csvParse(await FileAttachment(\"artistdata.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"// Artist name --> # of occurances\ndata\n .map(d => d.artist)\n .reduce((a, b) => {\n a[b] = a[b] ? a[b] + 1 : 1;\n return a;\n }, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"defaults = {\n const o = {};\n const keys = [\"gender\", \"ethnicity\", \"GEO3major\", \"year\"];\n const def_value = 0;\n for (let k of keys) {\n o[k] = data\n .map(d => d[k])\n .reduce((a, b) => {\n a[b] = def_value;\n return a;\n }, {});\n }\n // o.gender = Object.keys(\n // data\n // .map(d => d.gender)\n // .reduce((a, b) => {\n // a[b] = undefined;\n // return a;\n // }, {})\n // );\n // o.ethnicity = Object.keys(\n // data\n // .map(d => d.ethnicity)\n // .reduce((a, b) => {\n // a[b] = undefined;\n // return a;\n // }, {});\n // );\n // o.GEO3major = Object.keys(\n // data\n // .map(d => d.GEO3major)\n // .reduce((a, b) => {\n // a[b] = 0;\n // return a;\n // }, {});\n // o.year = data\n // .map(d => d.year)\n // .reduce((a, b) => {\n // a[b] = 0;\n // return a;\n // }, {});\n return o;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"museum_by = {\n const obj = {};\n for (let k of Object.keys(defaults)) {\n obj[k] = data.reduce((agg, d) => {\n if (agg[d.museum] == undefined) agg[d.museum] = _.clone(defaults[k]);\n agg[d.museum][d[k]]++;\n return agg;\n }, {});\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"function sum(a, b) {\n return a + b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"function fmtPct(p, n = 0) {\n return `${Math.round(p * 100 * Math.pow(10, n)) / Math.pow(10, n)}%`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"