2b:null 2c:["$","title",null,{"children":"Breakdown of the Victims of Home Invasions by Race and Gender | fobkid20 | Observable"}] 31:[{"id":"a7b0dbce3a8098906d49354f2f76ad6e50dee66b33b2bedc19d57ddc2d07645566a1702bcf3750e98139d6d4868534fb27ea5d905057e6d9208355ef26c430c4","href":"https://static.observableusercontent.com/files/a7b0dbce3a8098906d49354f2f76ad6e50dee66b33b2bedc19d57ddc2d07645566a1702bcf3750e98139d6d4868534fb27ea5d905057e6d9208355ef26c430c4","name":"victim_race_gender_count.csv","type":"text/csv","lastModified":1604203791939.121,"size":140}] 2f:{"id":"8461105d10e2e22e","slug":"victim-gender-race-3","title":"Breakdown of the Victims of Home Invasions by Race and Gender","thumbnail":"bccc58b9998e8082a681df796460e9d8e3bb269172b48459b21be819ae39749d","access_level":"public","create_time":"$D2020-11-01T04:09:07.268Z","update_time":"$D2020-11-01T05:18:45.107Z","view_time":null,"first_public_time":"$D2020-11-01T05:14:17.358Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fa74a8b2b329d6c1","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":"starter_2024"},"version":145,"publish_version":145,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6b65183c928336e","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":null}],"members":[{"type":"individual","id":"e6b65183c928336e","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Breakdown of the Victims of Home Invasions by Race and Gender","cells":[{"id":0,"value":"md`# Breakdown of the Victims of Home Invasions by Race and Gender`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"viewof gender = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"viewof race = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(race === \"black\" ? [data[0]] : race === \"white\" ? [data[1]] : race === \"hispanic\" ? [data[2]] : race === \"aapi\" ? [data[3]] : race === \"total_race\" ? [data[4]] : data)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${x0(d[groupKey])},0)`)\n .selectAll(\"rect\")\n .data(d => keys.map(key => ({key, value: d[key]})))\n .join(\"rect\")\n .attr(\"x\", d => x1(d.key))\n .attr(\"y\", d => y(d.value))\n .attr(\"width\", x1.bandwidth())\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"fill\", d => color(d.key));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(legend);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"data = {\n const data = await FileAttachment(\"victim_race_gender_count.csv\").csv({typed: true});\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width},0)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"x0 = d3.scaleBand()\n .domain(data.map(d => d[groupKey]))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"x1 = d3.scaleBand()\n .domain(keys)\n .rangeRound([0, x0.bandwidth()])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"color = d3.scaleOrdinal()\n .range([\"#98abc5\", \"#8a89a6\", \"#7b6888\", \"#6b486b\", \"#a05d56\", \"#d0743c\", \"#ff8c00\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x0).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"groupKey = data.columns[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"keys = gender === \"male\" ? [\"Male\"] : gender === \"female\" ? [\"Female\"] : gender === \"total\" ? [\"Total\"] : data.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"