25:null 26:["$","title",null,{"children":"Assignment 3 | fobkid20 | Observable"}] 2b:T5b3,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:Te1a,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"); 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 => svg.append("g").call(whiteSquare)); //yield parent.node(); 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()) .append("title") .text(d => `${d.key}: ${d.data[d.key]}`) .attr("width", 10) const body2 = mega.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); let svg2 = body2.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) .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) .append("title") .text(d => `${d.key}: ${d.data[d.key].toFixed(1)}%`); let svg3 = body2.append("svg") .attr("transform", `translate(${width/ 2},-${height/2})`) .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_stacked_demographicsData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .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 => { //console.log(d.key); return d.data.stateOrCity==="state"? 0.5 :1 }) yield mega.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); body2.node().scrollBy(0, 0); }2d:T5c9,chart = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 10; 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)) .call(svg => svg.append("g").call(leg)); 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); let svg = body.append("svg") .attr("width", overwidth) .attr("height", height) .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()) .append("title") .text(d => `${d.key}: ${d.data[d.key]}`) .attr("width", 10); yield parent.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); }2e:T5c1,percentChart = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 10; 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(percent_yAxis)) .call(svg => svg.append("g").call(leg)); yield parent.node(); const body = parent.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); const maxY = 100; let svg = body.append("svg") .attr("width", overwidth) .attr("height", height) .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) .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()) .append("title") .text(d => `${d.key}: ${d.data[d.key].toFixed(1)}%`); yield parent.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); }2f:T5f1,percentDemographicChart = { const minX = x(total_by_city[0].city) + margin.left; const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 10; 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(percent_yAxis)) .call(svg => svg.append("g").call(leg)); yield parent.node(); const body = parent.append("div") .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); const maxY = 100; let svg = body.append("svg") .attr("width", overwidth) .attr("height", height) .style("display", "block") .call(svg => svg.append("g").call(xAxis)) .append("g") .selectAll("g") .attr("class", "bars") .data(percent_stacked_demographicsData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .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) // .append("title") // .text(d => `${d.key}: ${d.data[d.key].toFixed(1)}%`); yield parent.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); }30: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')); }31: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); }32: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 }33:T76a,ready = (svg) => { const path = d3.geoPath().projection(projection); svg.append("g") .attr("transform", `translate(${(width/2 - 400) / 2},5)`) .append(() => legend({ color: legend_scale, title: "Number of Victims", ticks: 14, tickFormat: ".0s", width: 400})); // 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,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,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 }34:T603,viewof state = html``35:Ta08,// bigboi = { // const minX = x(total_by_city[0].city) + margin.left; // const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 10; // 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)) // .call(svg => svg.append("g").call(leg)); // 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); // let svg = body.append("svg") // .attr("width", overwidth) // .attr("height", height) // .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()) // .append("title") // .text(d => `${d.key}: ${d.data[d.key]}`) // .attr("width", 10); // yield parent.node(); // // Initialize the scroll offset after yielding the chart to the DOM. // body.node().scrollBy(0, 0); // const body2 = parent.append("div") // .style("overflow-x", "scroll") // .style("-webkit-overflow-scrolling", "touch"); // let svg2 = body2.append("svg") // .attr("width", overwidth) // .attr("height", height) // .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) // .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()) // .append("title") // .text(d => `${d.key}: ${d.data[d.key].toFixed(1)}%`); // yield parent.node(); // // Initialize the scroll offset after yielding the chart to the DOM. // body2.node().scrollBy(0, 0); // }36:[{"id":"8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","href":"https://static.observableusercontent.com/files/8884b4231e4131f82224c98ee57683e55a9fbb0ce134004c93373f0526c2a55476ba7a9aaf3f0db001cb875baaa868238d863c501bbc4ed559a14b6ae3717f07","name":"us-state-centroids.json","type":"application/json","lastModified":1615700928691.274,"size":10591},{"id":"490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","href":"https://static.observableusercontent.com/files/490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","name":"states.json","type":"application/json","lastModified":1615700928691.274,"size":29516},{"id":"8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","href":"https://static.observableusercontent.com/files/8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","name":"state_racial_data.csv","type":"text/csv","lastModified":1615700928691.274,"size":2766},{"id":"aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","href":"https://static.observableusercontent.com/files/aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","name":"cities_race_breakdown.csv","type":"text/csv","lastModified":1615700928691.274,"size":65827},{"id":"91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","href":"https://static.observableusercontent.com/files/91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","name":"fatal-police-shootings-data.csv","type":"text/csv","lastModified":1615700928691.274,"size":677118}] 29:{"id":"3ba7c6f8afb67552","slug":"assignment-3/5","title":"Assignment 3","thumbnail":"32f1c9bea562eecd99f697381bc025e496bd53f26935be10eab2c4a27d90e6d5","access_level":"public","create_time":"$D2021-03-14T05:48:48.691Z","update_time":"$D2021-03-14T06:35:38.555Z","view_time":null,"first_public_time":"$D2021-03-14T06:08:17.884Z","fork":{"id":"9eb30310cebb5e26","slug":"assignment-3/4","title":"Assignment 3","owner":{"id":"f7ebf7ad29187bbe","login":"hesslern","name":"Nicole Hessler"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fa74a8b2b329d6c1","login":"fobkid20","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0b19d59a484fc1014c8e5f5164ec3590b055d704c923e45a8c51dfcfe409c011","tier":"starter_2024"},"version":1582,"publish_version":1582,"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":0,"collection":null,"type":"notebook","body":{"title":"Assignment 3","cells":[{"id":0,"value":"md`# Assignment 3`","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":121,"value":"md`Use the map and dropdowns to filter the victims of police shootings shown in the stacked bar chart and percent stacked bar chart below. The cities are displayed along the x-axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"{ \n const node = DOM.svg(width/2, (height * 2)/3)\n const svg = d3.select(node)\n \n\n //const path = d3.geoPath().projection(projection);\n ready(svg);\n //recolor(svg, \"blue\");\n //popMap(svg);\n //popSize(svg);\n \n //svg\n \n // Finally, the block returns the SVG element, which is made\n // available via the d3 `node` function.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"stackedData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1331,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1507,"value":"$2f","pinned":true,"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":1565,"value":"mentalIllness = form[3]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"flee = form[4]\n","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":154,"value":"/*\nlegend = 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}\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":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":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":true,"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":"$30","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":1568,"value":"function mentalIllnessFilter(v){\n console.log(v.signs_of_mental_illness)\n return mentalIllness === 'any' || mentalIllness == v.signs_of_mental_illness;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1577,"value":"function fleeFilter(v){\n return flee === 'any' || flee == v.flee;\n}","pinned":true,"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 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":true,"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":true,"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":true,"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":1536,"value":"state_racial_data[0]","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1486,"value":"$31","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"Object.keys(city_totals)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"Object.values(city_totals)","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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"height = 500","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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"leg = g => g\n .attr(\"transform\", `translate(${margin.left}, 10)`)\n .call(g => g.selectAll(\"mydots\")\n .data(races)\n .join(\"circle\")\n .attr(\"cx\", (d,i)=> i < 3 ? i*170 : (i-3) * 170)\n .attr(\"cy\", (d,i)=> i < 3 ?0:20)\n .attr(\"r\", 7)\n .style(\"fill\", d=> color(d)))\n \n .call(g => g.selectAll(\"mylabels\")\n .data(races)\n .join(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"x\", (d,i)=> i < 3 ? 20 + i*170 : 20 + (i-3) * 170)\n .attr(\"y\", (d,i)=> i < 3 ?0:20)\n .style(\"fill\", d=> color(d))\n .text(d =>d)\n .attr(\"text-anchor\", \"left\")\n .style(\"alignment-baseline\", \"middle\"))\n","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":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":true,"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":true,"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: 60, 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":937,"value":"topojson.feature(states, states.objects.usStates)","pinned":true,"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":598,"value":"getRandomColor = () => {\n var letters = '0123456789ABCDEF';\n var color = '#';\n for (var i = 0; i < 6; i++) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":797,"value":"$32","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":"$33","pinned":true,"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":"$34","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1319,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1322,"value":"logTail = n => log.slice(-n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1326,"value":"logTail(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2a:"$29:body"