2b:null 2c:["$","title",null,{"children":"Assignment 3 | fobkid20 | Observable"}] 31:T5fb,viewof state = html``32:T512,chart = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city); const overwidth = maxX - minX + margin.left + margin.right; const parent = d3.create("div"); parent.append("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("pointer-events", "none") .style("z-index", 1) .call(svg => svg.append("g").call(yAxis)); yield parent.node(); const body = parent.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); const maxY = d3.max(total_by_city, d => d.total); body.append("svg") .attr("width", overwidth) .attr("height", height) .style("display", "block") .call(svg => svg.append("g").call(xAxis)) .append("g") .attr("class", "bars") .selectAll("rect") .data(total_by_city) .join("rect") .attr("fill", color) .attr("x", d => x(d.city)) .attr("y", d => y(d.total)) .attr("height", d => y(0) - y(d.total)) .attr("width", x.bandwidth()); yield parent.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(overwidth, 0); }33:Tb63,function armedFilter(v){ return armed === 'any' || armed === v.armed || (armed === 'armed' && (v.armed === 'gun' || v.armed === 'toy weapon' || v.armed === 'air conditioner' || v.armed === 'air pistol' || v.armed === 'Airsoft pistol' || v.armed === 'ax' || v.armed === 'barstool' || v.armed === 'baseball bat' || v.armed === 'baseball bat and bottle' || v.armed === 'baseball bat and fireplace poker' || v.armed === 'baseball bat and knife' || v.armed === 'baton' || v.armed === 'bayonet' || v.armed === 'BB gun' || v.armed === 'BB gun and vehicle' || v.armed === 'bean-bag gun' || v.armed === 'beer bottle' || v.armed === 'binoculars' || v.armed === 'blunt object' || v.armed === 'bottle' || v.armed === 'bow and arrow' || v.armed === 'box cutter' || v.armed === 'brick' || v.armed === 'car, knife and mace' || v.armed === 'carjack' || v.armed === 'chain' || v.armed === 'chain saw' || v.armed === 'chainsaw' || v.armed === 'chair' || v.armed === 'claimed to be armed' || v.armed === 'contractor\'s level' || v.armed === 'cordless drill' || v.armed === 'crossbow' || v.armed === 'crowbar' || v.armed === 'fireworks' || v.armed === 'flagpole' || v.armed === 'flashlight' || v.armed === 'garden tool' || v.armed === 'glass shard' || v.armed === 'grenade' || v.armed === 'gun and car' || v.armed === 'gun and knife' || v.armed === 'gun and machete' || v.armed === 'gun and sword' || v.armed === 'gun and vehicle' || v.armed === 'guns and explosives' || v.armed === 'hammer' || v.armed === 'hand torch' || v.armed === 'hatchet' || v.armed === 'hatchet and gun' || v.armed === 'ice pick' || v.armed === 'incendiary device' || v.armed === 'knife' || v.armed === 'lawn mower blade' || v.armed === 'machete' || v.armed === 'machete and gun' || v.armed === 'meat cleaver' || v.armed === 'metal hand tool' || v.armed === 'metal object' || v.armed === 'metal pipe' || v.armed === 'metal pole' || v.armed === 'metal rake' || v.armed === 'metal stick' || v.armed === 'microphone' || v.armed === 'motorcycle' || v.armed === 'nail gun' || v.armed === 'oar' || v.armed === 'pellet gun' || v.armed === 'pen' || v.armed === 'pepper spray' || v.armed === 'pick-axe' || v.armed === 'piece of wood' || v.armed === 'pipe' || v.armed === 'pitchfork' || v.armed === 'pole' || v.armed === 'pole and knife' || v.armed === 'railroad spikes' || v.armed === 'rock' || v.armed === 'samurai sword' || v.armed === 'scissors' || v.armed === 'screwdriver' || v.armed === 'sharp object' || v.armed === 'shovel' || v.armed === 'spear' || v.armed === 'stapler' || v.armed === 'straight edge razor' || v.armed === 'sword' || v.armed === 'Taser' || v.armed === 'tire iron' || v.armed === 'vehicle' || v.armed === 'vehicle and gun' || v.armed === 'vehicle and machete' || v.armed === 'walking stick' || v.armed === 'wasp spray' || v.armed === 'wrench')) || (armed === 'unknown' && (v.armed === 'undetermined' || v.armed === 'unknown weapon')); }34:[{"id":"91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","href":"https://static.observableusercontent.com/files/91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","name":"fatal-police-shootings-data.csv","type":"text/csv","lastModified":1614912444964.586,"size":677118}] 2f:{"id":"23c834d641814212","slug":"assignment-3","title":"Assignment 3","thumbnail":"f257385ccdef990927a5288072f791efa130029d7c083f3a86f19b021cb1dfc2","access_level":"public","create_time":"$D2021-03-05T02:47:08.778Z","update_time":"$D2021-03-06T05:22:03.875Z","view_time":null,"first_public_time":"$D2021-03-05T04:27:23.947Z","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":172,"publish_version":172,"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":2,"collection":null,"type":"notebook","body":{"title":"Assignment 3","cells":[{"id":0,"value":"md`# Assignment 3`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`Currently, this is a filterable bar graph showing number of victims of a police shooting in different cities. The cities are displayed along the x-axis, illegibly. You can filter by victim gender, race, manner of death, and whether or not they were armed.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"viewof gender = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"viewof race = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"viewof manner = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"viewof armed = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"// chart = {\n// const svg = d3.create(\"svg\")\n// .attr(\"viewBox\", [0, 0, width, height]);\n\n// svg.append(\"g\")\n// .attr(\"fill\", color)\n// .selectAll(\"rect\")\n// .data(total_by_city)\n// .join(\"rect\")\n// .attr(\"x\", (d, i) => x(i))\n// .attr(\"y\", d => y(d.total))\n// .attr(\"height\", d => y(0) - y(d.total))\n// .attr(\"width\", x.bandwidth());\n\n// svg.append(\"g\")\n// .call(xAxis);\n\n// svg.append(\"g\")\n// .call(yAxis);\n\n// return svg.node();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"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":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data = {\n const data = await FileAttachment(\"fatal-police-shootings-data.csv\").csv({typed: true});\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"filtered_data = { \n let victims = data;\n return victims.filter(genderFilter)\n .filter(raceFilter)\n .filter(mannerFilter)\n .filter(armedFilter)\n .filter(stateFilter);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"function genderFilter(v){\n return gender === 'any' || gender === v.gender;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"function raceFilter(v){\n return race === 'any' || race === v.race;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"function mannerFilter(v){\n return manner === 'any' || manner === v.manner_of_death;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"function stateFilter(v){\n return state === 'any' || state === v.state;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"city_totals = {\n var counts = {};\n filtered_data.forEach(function (v) {\n counts[v.city] = (v.city in counts? counts[v.city]:0) + 1;\n });\n return counts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"total_by_city = {\n var counts = []\n for (const [key, value] of Object.entries(city_totals)) {\n counts.push({\n city: key,\n total: value\n });\n }\n return counts;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"Object.keys(city_totals)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"Object.values(city_totals)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"x = d3.scaleBand()\n .domain(total_by_city.map(d => d.city))\n .range([margin.left, width * (total_by_city.length / 10) - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(total_by_city, d => d.total)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, filtered_data.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(filtered_data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"color = \"steelblue\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"margin = ({top: 60, right: 0, bottom: 60, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"