22:null 23:["$","title",null,{"children":"Assignment 3: Fatal Force Victims | Nicole Hessler | Observable"}] 28:T5aa,viewof form = { const form = html``; form.oninput = () => form.value = [ form.gender.value, form.manner.value, form.armed.value, form.mentalIllness.value, form.flee.value ]; form.oninput(); return form; }29:Tf4d,megaSvg = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 8; const overwidth = maxX - minX + margin.left + margin.right; const path = d3.geoPath().projection(projection); const mega = d3.create("div"); var div = mega.append("div") .attr("class", "tooltip") .style("opacity", 0); mega.append("svg") .attr("width", width/2) .attr("height", height) .style("position", "absolute") .style("z-index", 1) .call(svg => svg.append("g").call(whiteSquare)) .call(svg => ready(svg)); const parent = mega.append("svg") .attr("transform", `translate(${width/ 2},0)`) .attr("width", width/2) .attr("height", height) .style("position", "absolute") .style("pointer-events", "none") .style("display", "block") .style("z-index", 1) .call(svg => svg.append("g").call(yAxis)) .call(svg => svg.append("g").call(percent_yAxis)) .call(svg => svg.append("g").call(leg)) .call(svg => addTitles(svg)) const body = mega.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); let svg = body.append("svg") .attr("transform", `translate(${width/ 2},0)`) .attr("width", overwidth) .attr("height", height/2) .style("display", "block") .call(svg => svg.append("g").call(xAxis)) .append("g") .selectAll("g") .attr("class", "bars") .data(stackedData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d) => x(d.data.city)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) let svg2 = body.append("svg") .attr("transform", `translate(${width/ 2},0)`) .attr("width", overwidth) .attr("height", height/2) .style("display", "block") .call(svg => svg.append("g").call(xAxis)) .append("g") .selectAll("g") .attr("class", "bars") .data(percent_stackedData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) svg2.join("rect") .attr("x", (d) => x(d.data.city)) .attr("y", d => percent_y(d[1])) .attr("height", d => percent_y(d[0]) - percent_y(d[1])) .attr("width", x.bandwidth()/2) svg2.join("text") .attr("x", (d) => x(d.data.city) + x.bandwidth()/4) .attr("y", percent_y(100) -5) .attr("fill", "gray") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("text-anchor", "middle") .text("Victims") let svg3 = body.append("svg") .attr("transform", `translate(${width/ 2},-${height/2})`) .attr("width", overwidth) .attr("height", height/2) .style("display", "block") .append("g") .selectAll("g") .attr("class", "bars") .data(percent_stacked_demographicsData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) svg3.join("rect") .attr("x", (d) => x(d.data.city)+x.bandwidth()/2) .attr("y", d => percent_y(d[1])) .attr("height", d => percent_y(d[0]) - percent_y(d[1])) .attr("width", x.bandwidth()/2) .style("opacity", d => {return 0.5 //return d.data.stateOrCity==="state"? 0.5 :1 }) svg3.join("text") .attr("x", (d) => x(d.data.city) + (x.bandwidth() * 3)/4) .attr("y", percent_y(100) -5) .attr("fill", "gray") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("text-anchor", "middle") .text((d) => d.data.stateOrCity === "state" ? "State" : "City") yield mega.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); }2a:Tbdb,leg = g => g .call(g => g.selectAll("mydots") .data(races) .join("circle") .attr("transform", `translate(10, 40)`) .attr("cx", (d,i)=> i < 3 ? i*170 : (i-3) * 170) .attr("cy", (d,i)=> i < 3 ?0:20) .attr("r", 7) .style("fill", d=> color(d))) .call(g => g.selectAll("mylabels") .data(races) .join("text") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("transform", `translate(10, 40)`) .attr("x", (d,i)=> i < 3 ? 20 + i*170 : 20 + (i-3) * 170) .attr("y", (d,i)=> i < 3 ?0:20) .style("fill", d=> color(d)) .text(d =>d) .attr("text-anchor", "left") .style("alignment-baseline", "middle")) .call(g => g.selectAll("mycitydots") .data(races.slice().reverse()) .join("circle") .attr("transform", `translate(10, 370)`) .attr("cx", (d,i)=> i < 3 ? 20: 0) .attr("cy", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .attr("r", 7) .style("fill", d=> color(d))) .call(g => g.selectAll("mycitylabels") .data(["", "","","","Victims Races", ""]) .join("text") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("transform", `translate(10, 370)`) .attr("x", (d,i)=> 30) .attr("y", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .style("fill", "black") .text(d =>d) .attr("text-anchor", "left") .style("alignment-baseline", "middle")) .call(g => g.selectAll("mystatedots") .data(races.slice().reverse()) .join("circle") .attr("transform", `translate(10, 370)`) .attr("cx", (d,i)=> width/4 + (i < 3 ? 20: 0)) .attr("cy", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .attr("r", 7) .style("opacity", 0.5) .style("fill", d=> color(d))) .call(g => g.selectAll("mystatelabels") .data(["", "","","","General Population Races", ""]) .join("text") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("transform", `translate(10, 370)`) .attr("x", (d,i)=> width/4 + 30) .attr("y", (d,i)=> i < 3 ? i * 20 : (i-3) * 20) .style("fill", "black") .text(d =>d) .attr("text-anchor", "left") .style("opacity", 0.5) .style("alignment-baseline", "middle")) 2b: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')); }2c:T5c9,percent_demographics_by_city = { let counts = []; for (const [key, value] of Object.entries(city_totals)) { for (const [key2, value2] of Object.entries(city_racial_data)) { if (key == value2["City"] && value["state"]==value2["State"]){ counts.push({ city: key, total: value["total"], White: value2["White"] * 100 , Black: value2["Black"] * 100, Hispanic: value2["Hispanic"] * 100, Asian: value2["Asian"] * 100, "Native American": value2["Native American"] * 100, state: value["state"], stateOrCity: "city" // Other: value2["O"]* 100, }); } } // if the city was unmatched, substitute with state level data if (!(counts.find((element) => {return (element.city === key) && (element.state === value.state)}))){ const s = state_racial_data.find((element)=>{return (element.State === value.state)}) counts.push({ city: key, total: value["total"], White: s["White"] * 100 , Black: s["Black"] * 100, Hispanic: 0, Asian: (s["Asian"] + s["Islander"])* 100, "Native American": s["Native American"] * 100, state: value["state"], stateOrCity: "state", Other: (s["Other"] + s["Multiple"] ) * 100, }); } } return counts.sort((a, b) => b.total - a.total); }2d:T577,// from nandorojo at https://gist.github.com/calebgrove/c285a9510948b633aa47 function stateAbbrToName(acronym) { const states = { AZ: 'Arizona', AL: 'Alabama', AK: 'Alaska', AR: 'Arkansas', CA: 'California', CO: 'Colorado', CT: 'Connecticut', DC: 'District of Columbia', DE: 'Delaware', FL: 'Florida', GA: 'Georgia', HI: 'Hawaii', ID: 'Idaho', IL: 'Illinois', IN: 'Indiana', IA: 'Iowa', KS: 'Kansas', KY: 'Kentucky', LA: 'Louisiana', ME: 'Maine', MD: 'Maryland', MA: 'Massachusetts', MI: 'Michigan', MN: 'Minnesota', MS: 'Mississippi', MO: 'Missouri', MT: 'Montana', NE: 'Nebraska', NV: 'Nevada', NH: 'New Hampshire', NJ: 'New Jersey', NM: 'New Mexico', NY: 'New York', NC: 'North Carolina', ND: 'North Dakota', OH: 'Ohio', OK: 'Oklahoma', OR: 'Oregon', PA: 'Pennsylvania', RI: 'Rhode Island', SC: 'South Carolina', SD: 'South Dakota', TN: 'Tennessee', TX: 'Texas', UT: 'Utah', VT: 'Vermont', VA: 'Virginia', WA: 'Washington', WV: 'West Virginia', WI: 'Wisconsin', WY: 'Wyoming', AS: 'American Samoa', GU: 'Guam', MP: 'Northern Mariana Islands', PR: 'Puerto Rico', VI: 'U.S. Virgin Islands', UM: 'U.S. Minor Outlying Islands', } return states[acronym] ?? acronym }2e:T902,ready = (svg) => { const path = d3.geoPath().projection(projection); const centering = 50 //legend svg.append("g") .attr("transform", `translate(${(width/2 - 400) / 2},${centering + 400})`) .append(() => legend({ color: legend_scale, title: "Number of Victims", ticks: 14, tickFormat: ".0s", width: 400})); //title svg.append("text") .attr("font-family", "sans-serif") .attr("x", width/4) .attr("y", centering + 50) .style("fill", "black") .text("Victims of Fatal Police Shootings Since 2015 by State") .attr("text-anchor", "middle") .style("alignment-baseline", "middle") // draw the states svg.selectAll("path") .data(topojson.feature(states, states.objects.usStates).features) .join("path") .attr("fill", d=> { if (state_totals[d.properties.STATE_ABBR]){ return legend_scale(state_totals[d.properties.STATE_ABBR].total) }else{ return "lightGray" }}) .attr("class", "states") .attr("transform", `translate(0,${centering + 60})`) .attr("d", path) .on("click", (event, d) => { let value = d.properties.STATE_ABBR if (viewof state.value === value){ viewof state.value = "any" outline.attr("d", null); //update when you click it viewof state.dispatchEvent(new Event("input")); }else{ viewof state.value = value outline.attr("d", value ? path(d) : null); //update when you click it viewof state.dispatchEvent(new Event("input")); } }) .append("title") .text((d) => { if (state_totals[d.properties.STATE_ABBR]){ return stateAbbrToName(d.properties.STATE_ABBR) + ": " + state_totals[d.properties.STATE_ABBR].total + " victims" }else{ return stateAbbrToName(d.properties.STATE_ABBR) + ": " + 0 + " victims" }}) const outline = svg.append("path") .attr("fill", "none") .attr("transform", `translate(0,${centering + 60})`) .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path(getPath(viewof state.value))); //update when you rerender due to another filter }2f:T603,viewof state = html``30:[{"id":"8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","href":"https://static.observableusercontent.com/files/8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","name":"us-state-centroids.json","type":"application/json","lastModified":1615706609191.681,"size":10591},{"id":"490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","href":"https://static.observableusercontent.com/files/490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","name":"states.json","type":"application/json","lastModified":1615706609191.681,"size":29516},{"id":"8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","href":"https://static.observableusercontent.com/files/8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","name":"state_racial_data.csv","type":"text/csv","lastModified":1615706609191.681,"size":2766},{"id":"aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","href":"https://static.observableusercontent.com/files/aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","name":"cities_race_breakdown.csv","type":"text/csv","lastModified":1615706609191.681,"size":65827},{"id":"91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","href":"https://static.observableusercontent.com/files/91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","name":"fatal-police-shootings-data.csv","type":"text/csv","lastModified":1615706609191.681,"size":677118}] 26:{"id":"5a56ad695d3bf4b8","slug":"assignment-3/5","title":"Assignment 3: Fatal Force Victims","thumbnail":"76c2f87271d6d0f990d71cc49678de5bb1aa9027598d2e7e3a26d58021ebc71f","access_level":"public","create_time":"$D2021-03-14T07:23:29.191Z","update_time":"$D2021-03-15T01:53:54.094Z","view_time":null,"first_public_time":"$D2021-03-14T07:23:37.837Z","has_unpublished_edits":null,"fork":{"id":"3f87283bc845f2ad","slug":"assignment-3/6","title":"Assignment 3","owner":{"id":"fa74a8b2b329d6c1","login":"fobkid20","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"f7ebf7ad29187bbe","login":"hesslern","name":"Nicole Hessler","avatar_url":"https://avatars-next.observableusercontent.com/cfb98bd8231947fae6090106b5a5ebf00c27558691c08af315fd14fce3b117ca","tier":"starter_2024","bio":""},"version":1789,"publish_version":1789,"role":null,"authored":false,"authors":[{"type":"individual","id":"473dafdeac21fe96","login":"hesslern","name":"Nicole Hessler","avatar_url":"https://avatars-next.observableusercontent.com/cfb98bd8231947fae6090106b5a5ebf00c27558691c08af315fd14fce3b117ca","tier":null,"bio":""}],"members":[{"type":"individual","id":"473dafdeac21fe96","login":"hesslern","name":"Nicole Hessler","avatar_url":"https://avatars-next.observableusercontent.com/cfb98bd8231947fae6090106b5a5ebf00c27558691c08af315fd14fce3b117ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 3: Fatal Force Victims","cells":[{"id":0,"value":"md`# Assignment 3: Fatal Force Victims`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`The Washington Post started collecting data on the victims of fatal police shootings in 2015. They maintain the dataset at https://github.com/washingtonpost/data-police-shootings.\n\nUse the dropdowns to filter the data, as displayed on the map and stacked bar charts. You can select a state from the map to filter by state. We supplied reference bars in the percent stacked bar chart. They represent the general population race breakdown of the city where we could find city-level data and of the state where we couldn't.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"$29","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"addTitles = svg => {\n svg.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"x\", width /4 )\n .attr(\"y\", 10)\n .style(\"fill\", \"black\")\n .text(\"Number of Victims by Race and City\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"alignment-baseline\", \"middle\")\n svg.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"x\", width /4 )\n .attr(\"y\", 340)\n .style(\"fill\", \"black\")\n .text(\"Racial Percent Breakdown of Victims by City\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"alignment-baseline\", \"middle\")\n svg.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"x\", width /4 )\n .attr(\"y\", 356)\n .style(\"fill\", \"black\")\n .text(\"(With Local Reference Bars)\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"alignment-baseline\", \"middle\")\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"armed = form[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"manner=form[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"gender = form[0]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"mentalIllness = form[3]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"flee = form[4]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"races = [\"Black\",\"White\", \"Hispanic\",\"Asian\",\"Native American\",\"Other\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n const data = await FileAttachment(\"fatal-police-shootings-data.csv\").csv({typed: true});\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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 .filter(mentalIllnessFilter)\n .filter(fleeFilter);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"city_racial_data = {\n const city_racial_data = await FileAttachment(\"cities_race_breakdown.csv\").csv({typed: true});\n return city_racial_data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function genderFilter(v){\n return gender === 'any' || gender === v.gender;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function raceFilter(v){\n return race === 'any' || race === v.race;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"function mannerFilter(v){\n return manner === 'any' || manner === v.manner_of_death;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function stateFilter(v){\n return state === 'any' || state === v.state;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"function mentalIllnessFilter(v){\n console.log(v.signs_of_mental_illness)\n return mentalIllness === 'any' || mentalIllness == v.signs_of_mental_illness;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"function fleeFilter(v){\n return flee === 'any' || flee == v.flee;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"state_totals = {\n var counts = {};\n const state_filtered_data = data.filter(genderFilter)\n .filter(raceFilter)\n .filter(mannerFilter)\n .filter(armedFilter)\n .filter(mentalIllnessFilter)\n .filter(fleeFilter)\n state_filtered_data.forEach((v) =>{\n if(!(v.state in counts)){counts[v.state] = {\"W\":0,\"B\":0,\"H\":0,\"A\":0,\"N\":0,\"O\":0,\"total\":0}}\n counts[v.state][v.race] = counts[v.state][v.race] + 1;\n if(!v.race){\n counts[v.state][\"O\"] = counts[v.state][\"O\"] + 1;\n }\n counts[v.state][\"total\"] = counts[v.state][\"total\"] + 1;\n });\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"city_totals = {\n var counts = {};\n filtered_data.forEach((v) =>{\n if((!(v.city in counts)) || (counts[v.city][\"state\"] != v.state)){\n counts[v.city] = {\"W\":0,\"B\":0,\"H\":0,\"A\":0,\"N\":0,\"O\":0,\"total\":0, \"state\":v.state}\n }\n counts[v.city][v.race] = counts[v.city][v.race] + 1;\n if(!v.race){\n counts[v.city][\"O\"] = counts[v.city][\"O\"] + 1;\n }\n counts[v.city][\"total\"] = counts[v.city][\"total\"] + 1;\n });\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"total_by_city = {\n let counts = [];\n for (const [key, value] of Object.entries(city_totals)) {\n counts.push({\n city: key,\n total: value[\"total\"],\n White: value[\"W\"],\n Black: value[\"B\"],\n Hispanic: value[\"H\"],\n Asian: value[\"A\"],\n \"Native American\": value[\"N\"],\n Other: value[\"O\"],\n });\n }\n if (counts.length === 0){\n return [{\n city: \"\",\n total: 0,\n White: 0,\n Black: 0,\n Hispanic: 0,\n Asian: 0,\n \"Native American\": 0,\n state: \"\",\n stateOrCity: \"state\",\n Other: 0,\n }]\n }\n return counts.sort((a, b) => b.total - a.total);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"percent_by_city = {\n let counts = [];\n for (const [key, value] of Object.entries(city_totals)) {\n counts.push({\n city: key,\n total: value[\"total\"],\n White: value[\"W\"] /value[\"total\"] * 100 ,\n Black: value[\"B\"] /value[\"total\"] * 100,\n Hispanic: value[\"H\"] /value[\"total\"] * 100,\n Asian: value[\"A\"] /value[\"total\"] * 100,\n \"Native American\": value[\"N\"] /value[\"total\"] * 100,\n Other: value[\"O\"] /value[\"total\"] * 100,\n });\n \n }\n return counts.sort((a, b) => b.total - a.total);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"state_racial_data = {\n const state_racial_data = await FileAttachment(\"state_racial_data.csv\").csv({typed: true});\n return state_racial_data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"subgroups = {return [\"Black\",\"White\",\"Hispanic\", \"Asian\", \"Native American\", \"Other\"]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"percent_stackedData = {return d3.stack().keys(subgroups)(percent_by_city).map(d => (d.forEach(v => v.key = d.key), d))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":" //stack the data? --> stack per subgroup\nstackedData = {\n return d3.stack().keys(subgroups)(total_by_city).map(d => (d.forEach(v => v.key = d.key), d))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"percent_stacked_demographicsData = {return d3.stack().keys(subgroups)(percent_demographics_by_city).map(d => (d.forEach(v => v.key = d.key), d))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(total_by_city, d => d.total)]).nice()\n .range([height/2 - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"percent_y = d3.scaleLinear()\n .domain([0, 100]).nice()\n .range([height/2 - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height/2 - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"percent_xAxis = g => g\n .attr(\"transform\", `translate(0,${height- margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"percent_yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},${height/2})`)\n .call(d3.axisLeft(percent_y).ticks(null, percent_stackedData.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(percent_stackedData.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"whiteSquare = g => g\n .call(g => g.append(\"rect\")\n .attr(\"width\", width/2)\n .attr(\"height\", height)\n .attr(\"fill\", \"white\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"color = d3.scaleOrdinal(d3.schemeCategory10).domain(races);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"margin = ({top: 80, right: 0, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"topojson = require('https://d3js.org/topojson.v1.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"// load files async; store the values so we can use them later\nstates = await FileAttachment(\"states.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"centroid = await FileAttachment(\"us-state-centroids.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"projection = d3.geoAlbersUsa().fitSize([width/2, height/2], topojson.feature(states, states.objects.usStates));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"getPop = (state) => {\n return centroid.features.find((feature)=>feature.properties.name === state).properties.population\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"legend_scale = d3.scaleSequentialLog()\n\t\t\t\t.domain([d3.min(Object.values(state_totals), s => s.total), d3.max(Object.values(state_totals), s => s.total)])\n\t\t\t\t.range([\"rgb(255,220,220)\",\"#8a0303\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"getPath = (state) =>{\n if (state === \"any\") return null\n \n return topojson.feature(states, states.objects.usStates).features\n .find((feature)=>feature.properties.STATE_ABBR === state)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"popSize = (svg) => {\n const path = d3.geoPath().projection(projection);\n let size = d3.scaleSqrt()\n .domain([d3.min(centroid.features, d => d.properties.population),\n d3.max(centroid.features, d => d.properties.population)])\n .range([5, 20])\n\n svg.selectAll(\".symbol\")\n .data(centroid.features, (d) => d.properties.population)\n .attr(\"d\", path.pointRadius((p) => size(p.properties.population)))\n } ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"popMap = (svg) => {\n let colorDiverge = d3.scaleLinear()\n .domain([d3.min(centroid.features, d => d.properties.population),\n d3.median(centroid.features, d => d.properties.population),\n d3.max(centroid.features, d => d.properties.population)])\n .range([\"green\", \"white\", \"blue\"])\n\n svg.selectAll(\".symbol\")\n .data(centroid.features, (d) => d.properties.population)\n .attr(\"fill\",(p)=>colorDiverge(p.properties.population))\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":" reset = (svg, color) => {\n svg.selectAll(\".symbol\")\n .attr(\"fill\", color)\n //.attr(\"d\", ()=>{return path.pointRadius(5)})\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"recolor = (svg, color) => {\n // grab the symbol objects and modify their color \n // notice we don't need \"enter\" or \"append\" the objects are already there\n svg.selectAll(\".symbol\")\n .attr(\"fill\", color);\n }\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof race = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"logTail = n => log.slice(-n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"logTail(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 27:"$26:body"