25:null 26:["$","title",null,{"children":"Assignment 3: Fatal Force Victims | Nicole Hessler | Observable"}] 2b: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; }2c: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); }2d: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")) 2e: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')); }2f: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); }30: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 }31: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 }32:T603,viewof state = html``33:[{"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}] 29:{"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","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"},"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}],"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,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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"},{"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"},{"id":1075,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1359,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":964,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"armed = form[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"manner=form[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"gender = form[0]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1630,"value":"mentalIllness = form[3]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1632,"value":"flee = form[4]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":973,"value":"races = [\"Black\",\"White\", \"Hispanic\",\"Asian\",\"Native American\",\"Other\"]","pinned":false,"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":false,"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 .filter(mentalIllnessFilter)\n .filter(fleeFilter);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":64,"value":"function genderFilter(v){\n return gender === 'any' || gender === v.gender;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":116,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":1638,"value":"function fleeFilter(v){\n return flee === 'any' || flee == v.flee;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"id":1486,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"subgroups = {return [\"Black\",\"White\",\"Hispanic\", \"Asian\", \"Native American\", \"Other\"]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":19,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"id":29,"value":"color = d3.scaleOrdinal(d3.schemeCategory10).domain(races);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"margin = ({top: 80, right: 0, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"topojson = require('https://d3js.org/topojson.v1.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":298,"value":"centroid = await FileAttachment(\"us-state-centroids.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":797,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":478,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"id":128,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"viewof race = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1319,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1322,"value":"logTail = n => log.slice(-n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1326,"value":"logTail(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2a:"$29:body"