45:["$","title",null,{"children":"Marginalized Groups in Cinema | Xin Li | Observable"}] 4d:T529,md` We have designed this zoomable treemap to showcase the representation of marginalized groups in cinema. Using data from the ***Academy of Motion Picture Arts and Sciences***, this chart separates the 11,118 entries by their focus category (the marginalized population in question) and then displays all of the Academy's index terms found under each category. This chart sizes its boxes by the number of entries in each category, showing the viewer a visual representation of how frequently each group has highlighted in films. Using this chart, an individual can gain a better understanding not only of how a specific group has been showcased within films, but also how frequently that group is referenced when compared to other groups. For example, if I wanted to compare the representation of blind or deaf individuals in movies, I'd first navigate to the "People with Disabilities" tab. Then, after clicking on that tab to see all 921 results, I could find that there have been 72 movies tagged with the "blind" index term, and only 29 tagged with "deaf". From this, I have learned that blind individuals are showcased in films more than twice as often as deaf individuals. This chart opens possibilities to explore many of these questions regarding representation. ***Now try it out yourself and enjoy!*** `4e:T1120,chart = { //use the colorScale function with adjusted domain (with respect to the size of the hierarchy) to draw boxes with color also emphasizing the amount/portion const colorScale = d3.scaleLinear() .domain([100,5000]) .range(["#eee", "#A90"]); //set up linear scales that make sure that the values returned will be integers with respect to the range of svg //https://observablehq.com/@d3/d3-scalelinear const x = d3.scaleLinear().rangeRound([0, width]); const y = d3.scaleLinear().rangeRound([0, height]); //use viewBox so the visualization can scale appropriately to the screen width //https://observablehq.com/@uw-info474/why-use-viewbox //https://observablehq.com/@martien/svg-viewport-viewbox-and-preserveaspectratio const svg = d3.create("svg") .attr("viewBox", [0.5, -30.5, width, height + 30]) .style("font", fontName) .style("font-size", fontSize + "px"); let group = svg.append("g") .call(render, treemap(data)); //function that renders the treemap function render(group, root) { const node = group .selectAll("g") .data(root.children.concat(root)) .join("g"); //event handler of mouse clicking which calls the zoomout or zoomin function node.filter(d => d === root ? d.parent : d.children) .attr("cursor", "pointer") .on("click", (event, d) => d === root ? zoomout(root) : zoomin(d)); node.append("title") .text(d => `${name(d)}\n${format(d.value)}`); node.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { return colorScale(d.value)//d === root ? "#fff" : d.children ? "#ccc" : "#ddd" }) .attr("stroke", "#fff"); //use the SVG element to make sure the text won't exceed to another box but rather disapper beyond the frame when scaling up in size //https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .attr("font-weight", d => d === root ? "bold" : null) .selectAll("tspan") .data(d => (d === root ? name(d) : d.data.name).split(/(?=[A-Z][^A-Z])/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null) .text(d => d); group.call(position, root); } function position(group, root) { group.selectAll("g") .attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`) .select("rect") .attr("width", d => d === root ? width : x(d.x1) - x(d.x0)) .attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0)); } //zoomin function: when zooming in, draw the new nodes on top, and fade them in. function zoomin(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.append("g").call(render, d); x.domain([d.x0, d.x1]); y.domain([d.y0, d.y1]); //animation when going down the tree to the selected category for more details svg.transition() .duration(750) .call(t => group0.transition(t).remove() .call(position, d.parent)) .call(t => group1.transition(t) .attrTween("opacity", () => d3.interpolate(0, 1)) .call(position, d)); } //zoomout function: when zooming out, draw the old nodes on top, and fade them out. function zoomout(d) { const group0 = group.attr("pointer-events", "none"); const group1 = group = svg.insert("g", "*").call(render, d.parent); x.domain([d.parent.x0, d.parent.x1]); y.domain([d.parent.y0, d.parent.y1]); //animation when returning to parent level of the tree svg.transition() .duration(750) .call(t => group0.transition(t).remove() .attrTween("opacity", () => d3.interpolate(1, 0)) .call(position, d)) .call(t => group1.transition(t) .call(position, d.parent)); } return svg.node(); }4f:T966,//function for setting up the input interactions //https://observablehq.com/@jashkenas/inputs function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }50:T515,//function for setting up the selecting options //https://observablehq.com/@jashkenas/inputs function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }51:T41b,//calling function preview to draw the preview thumbnails md` ${previews([ { path: "@d3/gallery", thumbnail: "1ef827a19d556921d616d53f79fdd6f9eb4d030acb243d70559be3993e4a7292", title: "Gallery", author: "D3" } ])} ${previews([ { path: "@hzschie/zoomable-treemap", thumbnail: "74ca4281fdfd3ec6755040c944100a54a33c21071813144676b295cb2e443dc0", title: "Zoomable Treemap", author: "Hermann Zschiegner" } ])} ${previews([ { path: "@jashkenas/inputs", thumbnail: "6f6e7093659df4dda57433ee288ccd798f86f669dfac0aa78b803205b34bc474", title: "Inputs", author: "Jeremy Ashkenas" } ])} ${previews([ { path: "@triptych/google-font-embedder", thumbnail: "e3c9d80888d4a6eb8c83eeb0f6b7d0b8a159bda765caf5e1d9514275e3cc89db", title: "Google Font Embedder", author: "Andrew Wooldridge" } ])} ${previews([ { path: "@ajlimbert/github-flavored-markdown-cheatsheet-observable", thumbnail: "beb80504148e8d4f71eb857b6b0500dbac59ed3f3499db9a6744bfba0ec05f41", title: "Markdown summary", author: "Adam J Limbert" } ])} `52:[{"id":"dfd4d04cee5ca6176549871e2c31d73d6964aec80e357d61f7f583f68804fd01acca0feff064943b90e82e7dc9cdf55f22c843414125884135e6f72de2314c49","href":"https://static.observableusercontent.com/files/dfd4d04cee5ca6176549871e2c31d73d6964aec80e357d61f7f583f68804fd01acca0feff064943b90e82e7dc9cdf55f22c843414125884135e6f72de2314c49","name":"underlined_CEIP Citations_Titles_RBhargava - Programming Basics Course-1.csv","type":"text/csv","lastModified":1634263601485.341,"size":7442944}] 49:{"id":"babf0b0764621f1e","slug":"marginalized-groups-in-cinema","title":"Marginalized Groups in Cinema","thumbnail":"fa62d47dabc63514f2423b68e78e011959753f51735271e056efd191245ce502","access_level":"public","create_time":"$D2021-10-13T17:11:24.012Z","update_time":"$D2024-02-26T19:42:23.938Z","view_time":null,"first_public_time":"$D2021-10-20T07:05:22.015Z","has_unpublished_edits":null,"fork":{"id":"dffe0d34a20a472b","slug":"zoomable-treemap","title":"Zoomable treemap","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6e69c52aad3aae34","login":"lkylenxin","name":"Xin Li","avatar_url":"https://avatars-next.observableusercontent.com/e77c4bce2cb6bff197778803e23490b76d8cadef34295ed3ff8273512e530963","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1008,"publish_version":1008,"role":null,"authored":false,"authors":[{"type":"individual","id":"c66798eaaf383158","login":"lkylenxin","name":"Xin Li","avatar_url":"https://avatars-next.observableusercontent.com/e77c4bce2cb6bff197778803e23490b76d8cadef34295ed3ff8273512e530963","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"97c3046a249b9017","login":"97c3046a249b9017","name":"Devin Filaski","avatar_url":null,"tier":null,"role":"editor"},{"type":"individual","id":"c66798eaaf383158","login":"lkylenxin","name":"Xin Li","avatar_url":"https://avatars-next.observableusercontent.com/e77c4bce2cb6bff197778803e23490b76d8cadef34295ed3ff8273512e530963","tier":null,"role":"editor"},{"type":"individual","id":"23c344d271cff546","login":"rahulbot","name":"Rahul Bhargava","avatar_url":"https://avatars-next.observableusercontent.com/ed7a791c6c1530a27392a6ff7e6b4b2c1cfb42b1d7f1cbbb1221da7056329d3c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Marginalized Groups in Cinema","cells":[{"id":0,"value":"md`\n# Marginalized Groups in Cinema\n\n## A Zoomable Treemap by Xin and Devin\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`\n~~The secret: click any cell to zoom in, or the top to zoom out. You can also choose another font and size.~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"//https://fonts.google.com/\nviewof fontName = select({\n title: \"Choose Font\",\n description: \"Please pick your favorite font.\",\n options: [\"Oswald\", \"Playfair Display\", \"Poppins\", \"Righteous\"],\n value: \"Poppins\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"viewof fontSize = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 11, \n title: \"Font Size\", \n // description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"//import data from file\nrawData = FileAttachment(\"underlined_CEIP Citations_Titles_RBhargava - Programming Basics Course-1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"//use d3.groups to group values by focusCategory\n //https://observablehq.com/@d3/d3-group\nfocusCategory = d3.groups(rawData, d => d.Focus_Category, d => d.Index_Term, d => d.Title_Information)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"//use mapping to transform the focusCategory Arrays to the list of objects with hierarchy\ndata = {\n const dataset = d3.map(focusCategory, d => ({\n name: d[0],\n children: d[1].map((element) => ({ \n name: element[0],\n value: element[1].length\n }))\n }))\n return {\n name: 'All',\n children: dataset\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"//treemap function that prepare the hierarchical data for graphing\ntreemap = data => d3.treemap()\n .tile(tile)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"//this custom tiling function adapts the built-in binary tiling function for the appropriate aspect ratio when the treemap is zoomed-in\nfunction tile(node, x0, y0, x1, y1) {\n d3.treemapBinary(node, 0, 0, width, height);\n for (const child of node.children) {\n child.x0 = x0 + child.x0 / width * (x1 - x0);\n child.x1 = x0 + child.x1 / width * (x1 - x0);\n child.y0 = y0 + child.y0 / height * (y1 - y0);\n child.y1 = y0 + child.y1 / height * (y1 - y0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"name = d => d.ancestors().reverse().map(d => d.data.name).join(\"/\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"//require D3\nd3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"//importing google font from the web\n //https://observablehq.com/@triptych/google-font-embedder\nstyle = {\n yield html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"function previews(notebooks) {\n return htl.html`

${notebooks.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"function preview({path, title, author, thumbnail}) {\n return htl.html` event.currentTarget.firstElementChild.style.borderColor = \"#1b1e23\"} onmouseout=${event => event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\"}>\n

${title}

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"//function for setting up the slider\n //https://observablehq.com/@jashkenas/inputs\nfunction slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"## Citations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 44:null