25:null 26:["$","title",null,{"children":"Assignment 3 | Nicole Hessler | Observable"}] 2b:Tf8b,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)) //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) 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", 50 + 5) .attr("fill", "gray") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("text-anchor", "middle") .text("Victims") let svg3 = body2.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 d.data.stateOrCity==="state"? 0.5 :1 }) svg3.join("text") .attr("x", (d) => x(d.data.city) + (x.bandwidth() * 3)/4) .attr("y", 50 + 5) .attr("fill", "gray") .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("text-anchor", "middle") .text("Local") yield mega.node(); // Initialize the scroll offset after yielding the chart to the DOM. body.node().scrollBy(0, 0); body2.node().scrollBy(0, 0); }2c:Tba4,leg = g => g .call(g => g.selectAll("mydots") .data(races) .join("circle") .attr("transform", `translate(10, 10)`) .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("transform", `translate(10, 10)`) .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")) //.style("opacity", 1) .call(g => g.selectAll("mycitydots") .data(races.slice().reverse()) .join("circle") .attr("transform", `translate(10, 240)`) .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))) // .style("opacity", 1) .call(g => g.selectAll("mycitylabels") .data(["", "","","","City-level", ""]) .join("text") .attr("font-family", "sans-serif") .attr("transform", `translate(10, 240)`) .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")) // .style("opacity", 1) .call(g => g.selectAll("mystatedots") .data(races.slice().reverse()) .join("circle") .attr("transform", `translate(10, 240)`) .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(["", "","","","State-level", ""]) .join("text") .attr("font-family", "sans-serif") .attr("transform", `translate(10, 240)`) .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")) 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":1615699740037.997,"size":10591},{"id":"490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","href":"https://static.observableusercontent.com/files/490b077c6ea11550cc771395845516b47b046759faea4b0f6f52fb7de4625f80e839d36377c3ae1b5d7031b9c08ac3cd92e2585b1eb8f6db20377cd79c00eacb","name":"states.json","type":"application/json","lastModified":1615699740037.997,"size":29516},{"id":"aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","href":"https://static.observableusercontent.com/files/aca4a178b9b047977dde43149da5a9e22e68354dc66a66a7ceaa697b31d114b3abe558a06cb598f611e513e46c79498b64079cbbd04a5848ea05c20a553e68f1","name":"cities_race_breakdown.csv","type":"text/csv","lastModified":1615699740037.997,"size":65827},{"id":"91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","href":"https://static.observableusercontent.com/files/91349f8df8d83114900c5eac2113b862e84984d3f66e2f36d37e2de360fd9100a0d4b0395577374c9185cab5f776369682cfaabf9708b9e3919971661ac7583e","name":"fatal-police-shootings-data.csv","type":"text/csv","lastModified":1615699740037.997,"size":677118},{"id":"8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","href":"https://static.observableusercontent.com/files/8a3ffd765af1318e05fc4b24f152ceb49dfb5e59c906d16322e727a8ef0d9d58b410247e92dc6c25b12acb23829f5ee2f408cc182e390a8dcc5c33118a634f87","name":"state_racial_data.csv","type":"text/csv","lastModified":1615699740783.406,"size":2766}] 29:{"id":"9eb30310cebb5e26","slug":"assignment-3/4","title":"Assignment 3","thumbnail":"d44e06be81aceea766a0f5c797a709dca2a236b27a92d365b28ee82763614ac9","access_level":"public","create_time":"$D2021-03-14T05:29:00.037Z","update_time":"$D2021-03-14T06:50:12.428Z","view_time":null,"first_public_time":"$D2021-03-14T05:29:07.727Z","fork":{"id":"985bfbf0dcbcd82b","slug":"assignment-3/4","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":1628,"publish_version":1628,"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":4,"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":121,"value":"md`The Washington Times started collecting data on the victims of police shooting in 2015. \n\n\nUse 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":1075,"value":"viewof form = {\n const form = html``;\n form.oninput = () => form.value = [\n form.gender.value, \n form.manner.value, \n form.armed.value\n ];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1359,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"$2c","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":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}","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":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":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"