29:null 2a:["$","title",null,{"children":"Building a Safer New York | Claudia Shao | Observable"}] 2f:T4ce,We are also using 4 additional datasets for this project: - NYC Demographics Data from [US Census Bureau](https://www.census.gov/data/tables/time-series/demo/popest/2010s-counties-detail.html) that contain the age and race distribution of NYC population, and the Demographics Data at the Public Use Microdata Areas (PUMA) level from [NYC Open Data](https://data.cityofnewyork.us/City-Government/Demographic-Profiles-of-ACS-5-Year-Estimates-at-th/8fje-7v4x) containing population by community districts. - NYPD Sector Data from [NYC Open Data](https://data.cityofnewyork.us/Public-Safety/NYPD-Sectors/eizi-ujye) which list the location and size of NYPD precincts and sectors. Since all shooting data we collected are documented with their precincts, we are using this GeoJSON data to map the number of shooting across NYPD divisions. - NYC Public Use Microdata Areas (PUMA) Data from [NYC Open Data](https://data.cityofnewyork.us/Housing-Development/2010-Public-Use-Microdata-Areas-PUMAs-/cwiz-gcty) which list the location and size of community district precincts and sectors. Since the population data we are using is divided by community districts, we will be using this GeoJSON data to map the population across neighborhoods.30:T7da,{ // set up const margin = {top: 40, right: 0, bottom: 0, left: 10}; const visHeight = 700 - margin.top - margin.bottom; const visWidth = width - margin.left - margin.right; const NYCprojection1 = d3.geoAlbers() .fitSize([visWidth/2, visHeight], nypdGeo) const NYCpath1 = d3.geoPath().projection(NYCprojection1) const NYCprojection2 = d3.geoAlbers() .fitSize([visWidth/2, visHeight], communityGeo) const NYCpath2 = d3.geoPath().projection(NYCprojection2) const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g1 = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const g2 = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // titles g1.append("text") .attr("fill", "black") .attr("x", visWidth / 4) .attr("y", -10) .attr("text-anchor", 'middle') .attr("font-size", "12pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Total Shootings by NYPD Precincts, 2006–2020"); g2.append("text") .attr("fill", "black") .attr("x", visWidth * 3 / 4 + 30) .attr("y", -10) .attr("text-anchor", 'middle') .attr("font-size", "12pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Population by Community Districts"); // draw maps g1.selectAll("path") .data(nypdGeo.features) .join("path") .attr("d", NYCpath1) .attr("fill", d => colorMap1(PctShooting[Number(d.properties.pct)])) .attr("stroke-width", 0.3) .attr("stroke", "white"); g2.selectAll("path") .data(communityGeo.features) .join("path") .attr("transform", `translate(${visWidth/2}, 0)`) .attr("d", NYCpath2) .attr("fill", d => colorMap2(popforMap[d.properties.puma])) .attr("stroke-width", 0.3) .attr("stroke", "white"); return svg.node(); }31:T2076,{ const totalWidth = Math.max(750, width); const totalHeight = 400; const margin = {top: 80, left: 35, bottom: 40, right: 25}; function vis1(parent, totalWidth, totalHeight) { const visWidth = totalWidth - margin.left - margin.right; const visHeight = totalHeight - margin.top - margin.bottom; const xGroup = d3.scaleBand() .domain(ageGroups.slice(0, ageGroups.length - 1)) .range([0, visWidth]) .padding(0.2); const y = d3.scalePow() .exponent(0.7) .domain([0, d3.max(shootingAgeCombined, e => Math.max(e["Percentage of Shootings Committed (Adjusted)"], e["Percentage of Shootings Suffered (Adjusted)"]))]) .nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(xGroup); const yGrid = d3.axisRight(y).tickFormat(() => "").tickSize(visWidth).ticks(20); const yAxis = d3.axisLeft(y).tickFormat(d => percentFormat(d/100)).ticks(5); const xBar = d3.scaleBand() .domain(["Committed", "Suffered"]) .range([0, xGroup.bandwidth()]) .padding(0.2); // const svg = parent.append("g") // .attr("width", totalWidth) // .attr("height", totalHeight); const g = parent.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); const legendCommitted = g.append("g") .attr("transform", `translate(${visWidth * (1/2 - 1/6)}, -20)`); legendCommitted.append("rect") .attr("x", -35) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", perpetratorColor); legendCommitted.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Committed") const legendSuffered = g.append("g") .attr("transform", `translate(${visWidth * (1/2 + 1/6)}, -20)`); legendSuffered.append("rect") .attr("x", -30) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", victimColor); legendSuffered.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Suffered") g.append("g") const title = g.append("g") .attr("fill", "black") .attr("font-size", "12pt") .attr("font-weight", "bold"); title.append("text") .attr("x", visWidth / 2) .attr("y", -65) .text("Percentage of Shootings Committed and Suffered"); title.append("text") .attr("x", visWidth / 2) .attr("y", -45) .text("Across Age Groups, 2006–2020"); // .text("Distribution of Shooting Perpetrators and Victims Across Age Groups (2006–2020)"); g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", 35) .attr("font-size", "8pt") .attr("font-weight", "bold") .text("Age Group"); g.append("g") .call(yAxis); g.append("g") .call(yGrid) .call(g => g.selectAll(".tick").attr("opacity", (_,i) => i % 5 === 0 ? "0.3" : "0.1")) .call(g => g.selectAll(".domain").remove()); const groups = g.append("g").selectAll("g") .data(shootingAgeCombined) .join("g") .attr("transform", d => `translate(${xGroup(d["Age Group"])}, 0)`); groups.append("rect") .attr("x", xBar("Committed")) .attr("y", d => y(d["Percentage of Shootings Committed (Adjusted)"])) .attr("width", xBar.bandwidth()) .attr("height", d => visHeight - y(d["Percentage of Shootings Committed (Adjusted)"])) .attr("fill", perpetratorColor); groups.append("rect") .attr("x", xBar("Suffered")) .attr("y", d => y(d["Percentage of Shootings Suffered (Adjusted)"])) .attr("width", xBar.bandwidth()) .attr("height", d => visHeight - y(d["Percentage of Shootings Suffered (Adjusted)"])) .attr("fill", victimColor); return svg.node(); } function vis2(parent, totalWidth, totalHeight) { const visWidth = totalWidth - margin.left - margin.right; const visHeight = totalHeight - margin.top - margin.bottom; const xGroup = d3.scaleBand() .domain(ageGroups.slice(0, ageGroups.length - 1)) .range([0, visWidth]) .padding(0.2); const y = d3.scalePow() .exponent(0.7) .domain([0, d3.max(shootingAgeDemo, e => Math.max(e["Perpetrator"], e["Victim"]))]) .nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(xGroup); const yGrid = d3.axisRight(y).tickFormat(() => "").tickSize(visWidth).ticks(40); const yAxis = d3.axisLeft(y).ticks(8); const xBar = d3.scaleBand() .domain(["Committed", "Suffered"]) .range([0, xGroup.bandwidth()]) .padding(0.2); // const svg = parent.append("g") // .attr("width", totalWidth) // .attr("height", totalHeight); const g = parent.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); const legendCommitted = g.append("g") .attr("transform", `translate(${visWidth * (1/2 - 1/6)}, -20)`); legendCommitted.append("rect") .attr("x", -35) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", perpetratorColor); legendCommitted.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Committed") const legendSuffered = g.append("g") .attr("transform", `translate(${visWidth * (1/2 + 1/6)}, -20)`); legendSuffered.append("rect") .attr("x", -30) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", victimColor); legendSuffered.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Suffered") g.append("g") const title = g.append("g") .attr("fill", "black") .attr("font-size", "12pt") .attr("font-weight", "bold"); title.append("text") .attr("x", visWidth / 2) .attr("y", -65) .text("Number of Shootings Committed and Suffered"); title.append("text") .attr("x", visWidth / 2) .attr("y", -45) .text("Per 100K Across Age Groups, 2006–2020"); // .text("Distribution of Shooting Perpetrators and Victims Across Age Groups (2006–2020)"); g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", 35) .attr("font-size", "8pt") .attr("font-weight", "bold") .text("Age Group"); g.append("g") .call(yAxis); g.append("g") .call(yGrid) .call(g => g.selectAll(".tick").attr("opacity", (_,i) => i % 4 === 0 ? "0.3" : "0.1")) .call(g => g.selectAll(".domain").remove()); const groups = g.append("g").selectAll("g") .data(shootingAgeDemo) .join("g") .attr("transform", d => `translate(${xGroup(d["Age Group"])}, 0)`); groups.append("rect") .attr("x", xBar("Committed")) .attr("y", d => y(d["Perpetrator"])) .attr("width", xBar.bandwidth()) .attr("height", d => visHeight - y(d["Perpetrator"])) .attr("fill", perpetratorColor); groups.append("rect") .attr("x", xBar("Suffered")) .attr("y", d => y(d["Victim"])) .attr("width", xBar.bandwidth()) .attr("height", d => visHeight - y(d["Victim"])) .attr("fill", victimColor); return svg.node(); } const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g1 = svg.append("g"); const g2 = svg.append("g") .attr("transform", `translate(${totalWidth / 2}, 0)`); vis1(g1, totalWidth / 2, totalHeight); vis2(g2, totalWidth / 2, totalHeight); return svg.node(); }32:T5bf,Focusing on the raw distribution of shootings (grouped bar chart on the left), it's evident that the 18–24 and 25–44 age groups committed and suffered much more shootings than the other groups. In fact, around 3 times more than the <18 age group, about 7 times more than the 45–64 age group, and up to 40 times more than the 65+ age group. Now, taking the population of each age group into consideration and focusing on the normalized distribution (grouped bar chart on the right), we can tell that the proportion of people in the 18–24 age group involved in shootings remains quite high. In fact, for every 1000 people aged 18–24 in NYC, roughly 14 people would commit one shooting, and 12 people would have been shot. However, under the normalized distribution, shooting involvement for the 25–44 age group is about 3 times lower than that of the 18–24 age group, unlike in the raw distribution bar chart. The rest of the age groups also have a lower shooting involvement comparatively. Comparing the committed and suffered shooting for each individual group, we found that the 18–24 age group committed considerably more shootings than they suffered, the <18 age group committed and suffered about the same amount of shootings, and the three older age groups all suffered considerably more shootings than they committed. However, the differences between the committed and suffered amount are not as significant as the differences between age groups.33:Tee9,visVicPerpAge = { const margin = {top: 90, left: 170, bottom: 0, right: 125}; const visWidth = 400; const visHeight = 400; const totalWidth = visWidth + margin.left + margin.right; const totalHeight = visHeight + margin.top + margin.bottom; const maxLength = 35; const maxAmt = d3.max(shootingVicPerpAge.values(), d => d3.max(d.values())); const minAmt = d3.min(shootingVicPerpAge.values(), d => d3.min(d.values())); const rounded = round(maxAmt); const length = d3.scaleSqrt() .domain([0, maxAmt]) .range([1, maxLength]); const x = d3.scaleBand() .domain(ageGroups.slice(0, ageGroups.length - 1)) .range([0, visWidth]) .padding(0); const y = d3.scaleBand() .domain(ageGroups.slice(0, ageGroups.length - 1)) .range([0, visHeight]) .padding(0); const xAxis = d3.axisTop(x) .tickSize(0); const yAxis = d3.axisLeft(y) .tickSize(0); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); // legend const legend = g.append("g") .attr("transform", `translate(${visWidth + 50}, 90)`); legend.append("text") .attr("x", 10) .attr("font-size", "9pt") .attr("font-weight", "bold") .text("Legend"); const legendGroup = legend.append("g").selectAll("g") .data([round(minAmt, -1), rounded/20, rounded/4, rounded]) .join("g") .attr("transform", (d, i) => `translate(${length(d)}, ${i * i * 11 + i * 7 + 25})`); legendGroup.append("circle") .attr("r", d => length(d)) .attr("fill", "lightgray"); legendGroup.append("text") .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .attr("x", d => -length(d) * 2 / Math.sqrt(3) - 10) .attr("fill", "black") .attr("font-size", "8pt") .text(percentFormat); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -margin.top + 25 - 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Percentage of Shootings Between"); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -margin.top + 25 + 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Perpetrator and Victim Age Groups, 2006–2020"); g.append("g") .call(xAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -25) .attr("font-size", "8pt") .attr("font-weight", 'bold') .text("Victim Age Group"); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("text-anchor", "start") .attr("x", -margin.left + 2) .attr("y", visHeight / 2) .attr("font-weight", 'bold') .attr("font-size", "8pt") .text("Perpetrator Age Group"); const gridlines = g.append("g").attr("stroke", "lightgray"); addGrid(gridlines, x, y, ageGroups.slice(1, ageGroups.length - 1), ageGroups.slice(1, ageGroups.length - 1), visWidth, visHeight); const guardLength = (d) => { const n = shootingVicPerpAge.get(d[0])?.get(d[1]); return n ? length(n) : 0; } const groups = g.append("g").selectAll("circle") .data(d3.cross(ageGroups.slice(0, ageGroups.length - 1), ageGroups.slice(0, ageGroups.length - 1))) .join("circle") .attr("transform", d => `translate(${x(d[0]) + x.bandwidth() / 2}, ${y(d[1]) + y.bandwidth() / 2})`) .attr("r", guardLength) .attr("fill", colorPalette[0]) svg.node().update = (showGrid) => { gridlines.transition().attr("opacity", showGrid ? 1 : 0); } return svg.node(); }34:T69e,For shootings committed by the <18 age group (first row): - we would expect the victims <18 to suffer much fewer shootings than the 18–24 and 25–44 age groups, - but the <18 age group actually suffered about the same number of shootings as the 18–24 age group and even a bit more than the 25–44 age group. For shootings committed by the 45–64 age group (fourth row): - we would expect the victims aged 45–64 to suffer fewer shootings than the 18–24 and 25–44 age groups, - but the 45–64 age group actually suffered about the same number of shootings as the 25–44 age group and suffered a lot more than the 18–24 age group. For shootings committed by the 65+ age group (last row): - we would expect the victims aged 45–64 and 65+ to suffer fewer shootings than the 18–24 and 25–44 age groups, - but the 45–64 and 65+ age group actually suffered about the same number of shootings as the 25–44 age group and suffered much more than the 18–24 age group Therefore, we can clearly see that perpetrators tend to target victims that are from age groups similar to theirs in spite of the overall distribution of shootings. 35:T1440,{ const margin = {top: 60, left: 150, bottom: 25, right: 20}; const totalWidth = 800 const totalHeight = 400; const visWidth = totalWidth - margin.left - margin.right; const visHeight = totalHeight - margin.top - margin.bottom; const x = d3.scalePow() .exponent(0.7) .domain([0, d3.max(shootingRaceCombined, e => Math.max(e["Percentage of Shootings Committed (Adjusted)"], e["Percentage of Shootings Suffered (Adjusted)"]))]) .nice() .range([0, visWidth]); const yGroup = d3.scaleBand() .domain(races.slice(0, races.length - 1)) .range([0, visHeight]) .padding(0.2); const yBar = d3.scaleBand() .domain(["Committed", "Suffered"]) .range([0, yGroup.bandwidth()]) .padding(0.2); const xAxis = d3.axisBottom(x).tickFormat(d => percentFormat(d/100)); const xGrid = d3.axisTop(x).tickFormat(() => "").tickSize(visHeight).ticks(30); const yAxis = d3.axisLeft(yGroup) .tickFormat((_,i) => racesFormatted[i]); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 230) .attr("y", yGroup(races.find(e => e.includes("ASIAN"))) + yGroup.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "400") .attr("text-anchor", "end") .text("ASIAN/"); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 245) .attr("y", yGroup(races.find(e => e.includes("PACIFIC"))) + yGroup.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "400") .attr("text-anchor", "end") .text("PACIFIC ISLANDERS"); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 285) .attr("alignment-baseline", "middle") .attr("y", yGroup(races.find(e => e.includes("INDIAN"))) + yGroup.bandwidth() / 2 - 7) .attr("font-size", "10px") // .attr("font-weight", "400") .attr("text-anchor", "end") .text("AMERICAN INDIAN/"); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 300) .attr("y", yGroup(races.find(e => e.includes("NATIVE"))) + yGroup.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "400") .attr("text-anchor", "end") .text("ALASKAN NATIVE"); // legend const legendCommitted = g.append("g") .attr("transform", `translate(${visWidth * (1/2 - 1/5)}, -20)`); legendCommitted.append("rect") .attr("x", -35) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", perpetratorColor); legendCommitted.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Committed") const legendSuffered = g.append("g") .attr("transform", `translate(${visWidth * (1/2 + 1/5)}, -20)`); legendSuffered.append("rect") .attr("x", -30) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", victimColor); legendSuffered.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Suffered") // title g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -45) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Percentage of Shootings Committed and Suffered Across Races, 2006–2020"); // .text("Race Distribution of Shooting Perpetrators and Victims (2006–2020)"); // axes g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.select(".domain").remove()); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", -margin.left + 30) .attr("y", visHeight / 2) .attr("font-size", "8pt") .attr("font-weight", "BOLD") .text("Race"); // grid g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xGrid) .call(g => g.selectAll(".tick").attr("opacity", (_,i) => i % 5 === 0 ? "0.3" : "0.1")) .call(g => g.select(".domain").remove()); // draw bars const groups = g.append("g").selectAll("g") .data(shootingRaceCombined) .join("g") .attr("transform", d => `translate(0, ${yGroup(d["Race"])})`); groups.append("rect") .attr("x", 0) .attr("y", yBar("Committed")) .attr("width", d => x(d["Percentage of Shootings Committed (Adjusted)"])) .attr("height", yBar.bandwidth()) .attr("fill", perpetratorColor); groups.append("rect") .attr("x", 0) .attr("y", yBar("Suffered")) .attr("width", d => x(d["Percentage of Shootings Suffered (Adjusted)"])) .attr("height", yBar.bandwidth()) .attr("fill", victimColor); return svg.node(); }36:T138c,{ const margin = {top: 60, left: 150, bottom: 25, right: 20}; const totalWidth = 800; const totalHeight = 400; const visWidth = totalWidth - margin.left - margin.right; const visHeight = totalHeight - margin.top - margin.bottom; const x = d3.scalePow() .exponent(0.7) .domain([0, d3.max(shootingRaceDemo, e => Math.max(e["Perpetrator"], e["Victim"]))]) .nice() .range([0, visWidth]); const yGroup = d3.scaleBand() .domain(races.slice(0, races.length - 1)) .range([0, visHeight]) .padding(0.2); const yBar = d3.scaleBand() .domain(["Committed", "Suffered"]) .range([0, yGroup.bandwidth()]) .padding(0.2); const xAxis = d3.axisBottom(x); const xGrid = d3.axisTop(x).tickFormat(() => "").tickSize(visHeight).ticks(40); const yAxis = d3.axisLeft(yGroup) .tickFormat((_,i) => racesFormatted[i]); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 230) .attr("y", yGroup(races.find(e => e.includes("ASIAN"))) + yGroup.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "380") .attr("text-anchor", "end") .text("ASIAN/"); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 245) .attr("y", yGroup(races.find(e => e.includes("PACIFIC"))) + yGroup.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "380") .attr("text-anchor", "end") .text("PACIFIC ISLANDERS"); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 285) .attr("y", yGroup(races.find(e => e.includes("INDIAN"))) + yGroup.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "380") .attr("text-anchor", "end") .text("AMERICAN INDIAN/"); g.append("text") .attr("fill", "black") .attr("x", -10) // .attr("y", 300) .attr("y", yGroup(races.find(e => e.includes("NATIVE"))) + yGroup.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "380") .attr("text-anchor", "end") .text("ALASKAN NATIVE"); // legend const legendCommitted = g.append("g") .attr("transform", `translate(${visWidth * (1/2 - 1/5)}, -20)`); legendCommitted.append("rect") .attr("x", -35) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", perpetratorColor); legendCommitted.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Committed") const legendSuffered = g.append("g") .attr("transform", `translate(${visWidth * (1/2 + 1/5)}, -20)`); legendSuffered.append("rect") .attr("x", -30) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", victimColor); legendSuffered.append("text") .attr("alignment-baseline", "middle") .attr("x", 12) .attr("fill", "black") .attr("font-size", "8pt") .text("Suffered") // title g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -45) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Number of Shootings Committed and Suffered Per 100K Across Races, 2006–2020"); // .text("Race Distribution of Shooting Perpetrators and Victims (2006–2020)"); // axes g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.select(".domain").remove()); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", -margin.left + 30) .attr("y", visHeight / 2) .attr("font-size", "8pt") .attr("font-weight", "BOLD") .text("Race"); // grid g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xGrid) .call(g => g.selectAll(".tick").attr("opacity", (_,i) => i % 5 === 0 ? "0.3" : "0.1")) .call(g => g.select(".domain").remove()); // draw bars const groups = g.append("g").selectAll("g") .data(shootingRaceDemo) .join("g") .attr("transform", d => `translate(0, ${yGroup(d["Race"])})`); groups.append("rect") .attr("x", 0) .attr("y", yBar("Committed")) .attr("width", d => x(d["Perpetrator"])) .attr("height", yBar.bandwidth()) .attr("fill", perpetratorColor); groups.append("rect") .attr("x", 0) .attr("y", yBar("Suffered")) .attr("width", d => x(d["Victim"])) .attr("height", yBar.bandwidth()) .attr("fill", victimColor); return svg.node(); }37:T573,Now we analyze the distribution in terms of races. Focusing on the raw distribution, we can tell that (non-Hispanic) Blacks committed and suffered the majority of the shootings (over 70%), which is about 4 to 6 times more than White Hispanics and Black Hispanics, over 30 times more than Whites and Asian/Pacific Islanders, and hundreds of times more than American Indians/Alaskan Natives. Now looking at the normalized distribution, we see the proportion of Blacks involved in shootings remains consistent with its raw distribution. For every 1000 Blacks in NYC, roughly 9 would have shot someone and another 9 would have been shot, on average. Unlike its raw distribution, however, the number of Black Hispanics involved in shootings is actually significantly higher per 100K population. Asians/Pacific Islanders also have a relatively higher proportion involved in shootings under the normalized distribution. Comparing the committed and suffered shooting for each individual group, we can tell that Blacks committed a bit more shootings than they suffered, White Hispanics committed about the same amount of shootings as they suffered, and other race groups suffered a lot more shootings than they committed. Similar to what we have previously seen with age groups, though, the differences between the committed and suffered amount are not as significant as the differences between races.38:T182e,visVicPerpRace = { const margin = {top: 125, left: 170, bottom: 0, right: 125}; const visWidth = 480; const visHeight = 480; const totalWidth = visWidth + margin.left + margin.right; const totalHeight = visHeight + margin.top + margin.bottom; const maxLength = 35; const maxAmt = d3.max(shootingVicPerpRace.values(), d => d3.max(d.values())); const minAmt = d3.min(shootingVicPerpRace.values(), d => d3.min(d.values())); const rounded = round(maxAmt); const length = d3.scaleSqrt() .domain([0, maxAmt]) .range([1, maxLength]); const x = d3.scaleBand() .domain(races.slice(0, races.length - 1)) .range([0, visWidth]) .padding(0); const y = d3.scaleBand() .domain(races.slice(0, races.length - 1)) .range([0, visHeight]) .padding(0); const xAxis = d3.axisTop(x) .tickFormat(d => racesFormatted[races.indexOf(d)]) .tickSize(0); const yAxis = d3.axisLeft(y) .tickFormat(d => racesFormatted[races.indexOf(d)]) .tickSize(0); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); const gridlines = g.append("g") .attr("opacity", 0) .attr("stroke", "gray") .attr("stroke-width", 2) .attr("fill", "none"); addGrid(gridlines.append("g").attr("stroke", "lightgray").attr("stroke-width", 1), x, y, races.slice(1, races.length - 1), races.slice(1, races.length - 1), visWidth, visHeight); gridlines.append("polyline") .attr("points", `0,${x(races[1])} ${x(races[1])},${x(races[1])} ${x(races[1])},0`); gridlines.append("polyline") .attr("points", `0,${x(races[3])} ${x(races[3])},${x(races[3])} ${x(races[3])},0`); gridlines.append("polyline") .attr("points", `0,${x(races[5])} ${x(races[5])},${x(races[5])} ${x(races[5])},0`); const formattedLabels = g.append("g") .attr("font-size", "10px") .attr("alignment-baseline", "middle") .attr("fill", "black"); const xLabel = formattedLabels.append("g") .attr("text-anchor", "start"); xLabel.append("g") .attr("transform", `translate(${x(races.find(e => e.includes("ASIAN"))) + x.bandwidth() / 2}, 0) rotate(-30) translate(0, -7)`) .append("text") .text("ASIAN/"); xLabel.append("g") .attr("transform", `translate(${x(races.find(e => e.includes("PACIFIC"))) + x.bandwidth() / 2}, 0) rotate(-30) translate(0, 7)`) .append("text") .text("PACIFIC ISLANDERS"); xLabel.append("g") .attr("transform", `translate(${x(races.find(e => e.includes("INDIAN"))) + x.bandwidth() / 2}, 0) rotate(-30) translate(0, -7)`) .append("text") .text("AMERICAN INDIAN/"); xLabel.append("g") .attr("transform", `translate(${x(races.find(e => e.includes("NATIVE"))) + x.bandwidth() / 2}, 0) rotate(-30) translate(0, 7)`) .append("text") .text("ALASKAN NATIVE"); const yLabel = formattedLabels.append("g") .attr("text-anchor", "end"); yLabel.append("text") .attr("x", 0) .attr("y", y(races.find(e => e.includes("ASIAN"))) + y.bandwidth() / 2 - 7) .text("ASIAN/"); yLabel.append("text") .attr("x", 0) .attr("y", y(races.find(e => e.includes("PACIFIC"))) + y.bandwidth() / 2 + 7) .text("PACIFIC ISLANDER"); yLabel.append("text") .attr("x", 0) .attr("y", y(races.find(e => e.includes("INDIAN"))) + y.bandwidth() / 2 - 7) .text("AMERICAN INDIAN/"); yLabel.append("text") .attr("x", 0) .attr("y", y(races.find(e => e.includes("NATIVE"))) + y.bandwidth() / 2 + 7) .text("ALASKAN NATIVE"); // legend const legend = g.append("g") .attr("transform", `translate(${visWidth + 50}, 90)`); legend.append("text") .attr("x", 10) .attr("font-size", "9pt") .attr("font-weight", "bold") .text("Legend"); const legendGroup = legend.append("g").selectAll("g") .data([round(minAmt), rounded/30, rounded/6, rounded]) .join("g") .attr("transform", (d, i) => `translate(${length(d)}, ${i * i * 12 + i * 5 + 25})`); legendGroup.append("circle") .attr("r", d => length(d)) .attr("fill", "lightgray"); legendGroup.append("text") .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .attr("x", d => -length(d) * 2 / Math.sqrt(3) - 10) .attr("fill", "black") .attr("font-size", "8pt") .text(percentFormat); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -margin.top + 25 - 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Percentage of Shootings Between"); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -margin.top + 25 + 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Perpetrator and Victim Races, 2006–2020"); g.append("g") .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").attr("transform", "rotate(-30)").attr("text-anchor", "start")) .append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -60) .attr("font-size", "8pt") .attr("font-weight", 'bold') .text("Victim Race"); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("text-anchor", "start") .attr("x", -margin.left + 2) .attr("y", visHeight / 2) .attr("font-weight", 'bold') .attr("font-size", "8pt") .text("Perpetrator Race"); const guardLength = (d) => { const n = shootingVicPerpRace.get(d[0])?.get(d[1]); return n ? length(n) : 0; } const groups = g.append("g").selectAll("circle") .data(d3.cross(races.slice(0, races.length - 1), races.slice(0, races.length - 1))) .join("circle") .attr("transform", d => `translate(${x(d[0]) + x.bandwidth() / 2}, ${y(d[1]) + y.bandwidth() / 2})`) .attr("r", guardLength) .attr("fill", colorPalette[0]) svg.node().update = (showGrid) => { gridlines.transition().attr("opacity", showGrid ? 1 : 0) } return svg.node(); }39:T41d,We can easily segment the matrix into several blocks. Firstly, in the top left corner, we see that an astonishing 60% of the shootings are between Black perpetrators and Black victims. Secondly, we see that a relatively lower number of shootings happened between Black, White Hispanic, and Black Hispanic perpetrators and victims (except for the combination of Black perpetrators and Black victims already mentioned above), and the distribution is surprisingly similar within these races. Thirdly, we see that there are a lot fewer shootings committed by White or Asian/Pacific Islander on victims of all races. Similarly, there are a lot fewer shootings suffered by White or Asian/Pacific Islander from perpetrators of all races. However, it is worth noting that there is a comparatively higher number of shootings between White perpetrators and White victims. Finally, we see that American Indians/Alaskan Natives have only committed shootings on Black victims and only suffered shootings from Black perpetrators, though the nnumbers are very low.3a:T19f0,visAgeRace1 = { const margin = {top: 50, left: 145, bottom: 40, right: 130}; const visWidth = 400; const visHeight = 480; const totalWidth = visWidth + margin.left + margin.right; const totalHeight = visHeight + margin.top + margin.bottom; const maxLength = 31; const length = d3.scaleSqrt() .domain([0, d3.max(shootingAgeRaceCombined, e => Math.max(e["Percentage of Shootings Committed (Adjusted)"], e["Percentage of Shootings Suffered (Adjusted)"]))]) .range([5, maxLength]); const poly = (n, right) => { const k = 1/Math.sqrt(3); const d = n === 0 ? 0 : length(n); return `0, ${-d} ${d * (right ? 1 : -1) * k}, ${-d} ${d * (right ? 1 : -1) * 2 * k}, 0 ${d * (right ? 1 : -1) * k}, ${d} 0, ${d}`; } const x = d3.scaleBand() .domain(ageGroups.slice(0, ageGroups.length - 1)) .range([0, visWidth]) .padding(0); const y = d3.scaleBand() .domain(races.slice(0, races.length - 1)) .range([0, visHeight]) .padding(0); const xAxis = d3.axisBottom(x) .tickSize(0); const yAxis = d3.axisLeft(y) .tickSize(0) .tickFormat((_,i) => racesFormatted[i]); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); const gridlines = g.append("g").attr("stroke", "lightgray"); addGrid(gridlines, x, y, ageGroups.slice(1, ageGroups.length - 1), races.slice(1, races.length - 1), visWidth, visHeight); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("ASIAN"))) + y.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("ASIAN/"); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("PACIFIC"))) + y.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("PACIFIC ISLANDERS"); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("INDIAN"))) + y.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("AMERICAN INDIAN/"); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("NATIVE"))) + y.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("ALASKAN NATIVE"); // legend const legend = g.append("g") .attr("transform", `translate(${visWidth + 130}, 100)`); legend.append("text") .attr("x", -30) .attr("font-size", "9pt") .attr("font-weight", "bold") .text("Legend"); const legendCommitted = legend.append("g") .attr("transform", `translate(0, 20)`); legendCommitted.append("rect") .attr("x", -16) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", perpetratorColor); legendCommitted.append("text") .attr("alignment-baseline", "middle") .attr("x", -22) .attr("fill", "black") .attr("font-size", "8pt") .attr("text-anchor", "end") .text("Committed") const legendSuffered = legend.append("g") .attr("transform", `translate(0, 50)`); legendSuffered.append("rect") .attr("x", -16) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", victimColor); legendSuffered.append("text") .attr("alignment-baseline", "middle") .attr("x", -22) .attr("fill", "black") .attr("font-size", "8pt") .attr("text-anchor", "end") .text("Suffered") const legendGroup = legend.append("g").selectAll("g") .data([1, 5, 15, 30]) .join("g") .attr("transform", (_, i) => `translate(0, ${i * i * 8 + i * 23 + 85})`); legendGroup.append("polygon") .attr("points", d => poly(d, false)) .attr("fill", "lightgray"); // legendGroup.append("path") // .attr("d", d => semiCirclePath(d, true)) // .attr("fill", victimColor); legendGroup.append("text") .attr("alignment-baseline", "middle") .attr("text-anchor", "end") .attr("x", d => -length(d) * 2 / Math.sqrt(3) - 10) .attr("fill", "black") .attr("font-size", "8pt") .text(d => percentFormat(d/100)); // legendGroup.append("text") // .attr("alignment-baseline", "middle") // .attr("x", d => radius(d) + 25) // .attr("fill", "black") // .attr("font-size", "8pt") // .text(d => percentFormat(d/100)); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -25 - 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Percentage of Shootings Committed and Suffered"); // .text("Age and Race Distribution of Shooting Perpetrators and Victims (2006–2020)"); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -25 + 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Across Age Groups and Races, 2006–2020"); g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", 35) .attr("font-size", "8pt") .attr("font-weight", 'bold') .text("Age Group"); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", -margin.left + 30) .attr("y", visHeight / 2) .attr("font-weight", 'bold') .attr("font-size", "8pt") .text("Race"); const groups = g.append("g").selectAll("g") .data(shootingAgeRaceCombined) .join("g") .attr("transform", d => `translate(${x(d["Age Group"]) + x.bandwidth() / 2}, ${y(d["Race"]) + y.bandwidth() / 2})`); groups.append("polygon") .attr("points", d => poly(d["Percentage of Shootings Committed (Adjusted)"], false)) .attr("fill", perpetratorColor); groups.append("polygon") .attr("points", d => poly(d["Percentage of Shootings Suffered (Adjusted)"], true)) .attr("fill", victimColor); svg.node().update = (showGrid) => { gridlines.transition().attr("opacity", showGrid ? 1 : 0) } return svg.node(); }3b:T18a2,visAgeRace2 = { const margin = {top: 50, left: 145, bottom: 40, right: 130}; const visWidth = 400; const visHeight = 480; const totalWidth = visWidth + margin.left + margin.right; const totalHeight = visHeight + margin.top + margin.bottom; const maxLength = 31; const maxN = d3.max(shootingAgeRaceDemo, e => Math.max(e["Perpetrator"], e["Victim"])); const whole = Math.pow(10, Math.floor(Math.log10(maxN))); const rounded = Math.floor(maxN / whole) * whole; const length = d3.scaleSqrt() .domain([0, maxN]) .range([5, maxLength]); const poly = (n, right) => { const k = 1/Math.sqrt(3); const d = n === 0 ? 0 : length(n); return `0, ${-d} ${d * (right ? 1 : -1) * k}, ${-d} ${d * (right ? 1 : -1) * 2 * k}, 0 ${d * (right ? 1 : -1) * k}, ${d} 0, ${d}`; } const x = d3.scaleBand() .domain(ageGroups.slice(0, ageGroups.length - 1)) .range([0, visWidth]) .padding(0); const y = d3.scaleBand() .domain(races.slice(0, races.length - 1)) .range([0, visHeight]) .padding(0); const xAxis = d3.axisBottom(x) .tickSize(0); const yAxis = d3.axisLeft(y) .tickSize(0) .tickFormat((_,i) => racesFormatted[i]); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("transform", `translate(${margin.left}, ${margin.top})`); const gridlines = g.append("g").attr("stroke", "lightgray"); addGrid(gridlines, x, y, ageGroups.slice(1, ageGroups.length - 1), races.slice(1, races.length - 1), visWidth, visHeight); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("ASIAN"))) + y.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("ASIAN/"); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("PACIFIC"))) + y.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("PACIFIC ISLANDERS"); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("INDIAN"))) + y.bandwidth() / 2 - 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("AMERICAN INDIAN/"); g.append("text") .attr("fill", "black") .attr("x", 0) .attr("y", y(races.find(e => e.includes("NATIVE"))) + y.bandwidth() / 2 + 7) .attr("alignment-baseline", "middle") .attr("font-size", "10px") // .attr("font-weight", "350") .attr("text-anchor", "end") .text("ALASKAN NATIVE"); // legend const legend = g.append("g") .attr("transform", `translate(${visWidth + 130}, 100)`); legend.append("text") .attr("x", -30) .attr("font-size", "9pt") .attr("font-weight", "bold") .text("Legend"); const legendCommitted = legend.append("g") .attr("transform", `translate(0, 20)`); legendCommitted.append("rect") .attr("x", -16) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", perpetratorColor); legendCommitted.append("text") .attr("alignment-baseline", "middle") .attr("x", -22) .attr("fill", "black") .attr("font-size", "8pt") .attr("text-anchor", "end") .text("Committed") const legendSuffered = legend.append("g") .attr("transform", `translate(0, 50)`); legendSuffered.append("rect") .attr("x", -16) .attr("y", -8) .attr("width", 16) .attr("height", 16) .attr("fill", victimColor); legendSuffered.append("text") .attr("alignment-baseline", "middle") .attr("x", -22) .attr("fill", "black") .attr("font-size", "8pt") .attr("text-anchor", "end") .text("Suffered") const legendGroup = legend.append("g").selectAll("g") .data([1, rounded/20, rounded/4, rounded]) .join("g") .attr("transform", (_, i) => `translate(0, ${i * i * 9 + i * 13 + 85})`); legendGroup.append("polygon") .attr("points", d => poly(d, false)) .attr("fill", "lightgray"); legendGroup.append("text") .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("x", d => -length(d) * 2 / Math.sqrt(3) - 10) .attr("fill", "black") .attr("font-size", "8pt") .text(d3.format("~s")); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -25 - 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Number of Shootings Committed and Suffered"); // .text("Age and Race Distribution of Shooting Perpetrators and Victims (2006–2020)"); g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -25 + 10) .attr("font-size", "12pt") .attr("font-weight", "bold") .text("Per 100K Across Age Groups and Races, 2006–2020"); g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", 35) .attr("font-size", "8pt") .attr("font-weight", 'bold') .text("Age Group"); g.append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("fill", "black") .attr("x", -margin.left + 30) .attr("y", visHeight / 2) .attr("font-weight", 'bold') .attr("font-size", "8pt") .text("Race"); const groups = g.append("g").selectAll("g") .data(shootingAgeRaceDemo) .join("g") .attr("transform", d => `translate(${x(d["Age Group"]) + x.bandwidth() / 2}, ${y(d["Race"]) + y.bandwidth() / 2})`); groups.append("polygon") .attr("points", d => poly(d["Perpetrator"], false)) .attr("fill", perpetratorColor); groups.append("polygon") .attr("points", d => poly(d["Victim"], true)) .attr("fill", victimColor); svg.node().update = (showGrid) => { gridlines.transition().attr("opacity", showGrid ? 1 : 0) } return svg.node(); }3c:T573,Focusing on the raw distribution, our previous findings on age groups and races are pretty much confirmed. Blacks in the 18–24 and 25–44 age groups committed and suffered the majority of the shootings, and Blacks in other age groups (especially the <18 and 45–64 age groups) and other races in the 18–24 and 25–44 age groups (especially White Hispanics and Black Hispanics) also committed and suffered quite some shootings. The same can be said about the normalized distribution. Much more Blacks in the 18–24 age group are involved in shootings. For every 25 Blacks in the 18–24 age group, an average of 1 person would have shot someone once and another 1 person would have been shot. Blacks aged 25–44 and Black Hispanics aged 18–24 also have high involvement in shootings. With this matrix visualization, we can also tell some additional interesting details that are not visible to us before. For example, the differences across races become less significant in the older age groups, especially people 65+. Similarly, the differences across age are less significant among certain races, namely White and Asian/Pacific Islander. Finally, from 2006-2020, Asians/Pacific Islanders 65+ and American Indians/Alaskan Natives <18 have only suffered shootings and have not committed any; and American Indians/Alaskan Natives 45+ have neither committed nor suffered any shootings.3d:T17ce,{ const margin = {top: 50, right: 70, bottom: 20, left: 30}; const visWidth = width - margin.left - margin.right; const visHeight = 350 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const Shooting_extent = d3.extent(ShootingSorted, d=>new Date(d['OCCUR_DATE'])) const x = d3.scaleTime() .domain(Shooting_extent) .range([0, visWidth]); const maxShooting = d3.max(ShootingOverTime_Flat, d => d.Number_of_Shootings) const y = d3.scaleLinear() .domain([0, maxShooting]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x).ticks(20); const yAxis = d3.axisLeft(y); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call( // clone the axis tick marks to create the grid lines g => g.selectAll('.tick > line').clone() .attr('y1', 0) .attr('y2', -visHeight) .attr('stroke', '#d1d1d1') .attr('stroke-width', 1) ) g.append('g') .call(yAxis) .call( // clone the axis tick marks to create the grid lines g => g.selectAll('.tick > line') // skip the first tick mark, since that's the baseline // of the x-axis .filter((d, i) => i !== 0).clone() .attr('x1', 0) .attr('x2', visWidth) .attr('stroke', '#d1d1d1') .attr('stroke-width', 1) ); // title g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -30) .attr("text-anchor", 'middle') .attr("font-size", "12pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("NYC Shootings Over Time, 2006–2020"); const line = d3.line() .x(d => x(new Date(d.Year, d.Month-1))) .y(d => y(d.Number_of_Shootings)); g.append('path') .attr('stroke', 'rgb(0,114,178)') .attr('stroke-width', 1.5) .attr('fill', 'none') .attr('d', line(ShootingOverTime_Flat)) // george flyod protest & police brutality g.append('line') .attr('x1', x(new Date(2020, 4, 26))) .attr('x2', x(new Date(2020, 4, 26))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1); g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2020, 4, 26))+35) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("George Flyod Protest"); // Firearm Safety Act Passed g.append('line') .attr('x1', x(new Date(2013, 3, 4))) .attr('x2', x(new Date(2013, 3, 4))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1); g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2013, 3, 4))-40) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Firearm Safety Act"); // legalize gay marriage g.append('line') .attr('x1', x(new Date(2015, 5, 26))) .attr('x2', x(new Date(2015, 5, 26))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1); g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2015, 5, 26))+30) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Same-Sex Marriage Legalized"); // March for Our Lives g.append('line') .attr('x1', x(new Date(2018, 2, 24))) .attr('x2', x(new Date(2018, 2, 24))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1) g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2018, 2, 24))) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("March for Our Lives"); // BLM g.append('line') .attr('x1', x(new Date(2013, 6))) .attr('x2', x(new Date(2013, 6))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1); g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2013, 6))+25) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("#BLM Begins"); // COVID starts g.append('line') .attr('x1', x(new Date(2020, 2, 1))) .attr('x2', x(new Date(2020, 2, 1))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1); g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2020, 2, 1))-20) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("COVID"); // Immigration Reform Protests g.append('line') .attr('x1', x(new Date(2006, 5))) .attr('x2', x(new Date(2006, 5))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', 'rgb(213,94,0)') .attr('stroke-width', 1) g.append("text") .attr("fill", "rgb(213,94,0)") .attr("x", x(new Date(2006, 5))+40) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Immigration Reform Protest"); return svg.node(); }3e:Ta0d,By visualizing the data, we observed a pattern of a low number of shootings during the beginning/end of the year, and higher shooting rates in the summer season. Despite the reoccurring pattern, we also identified some sudden increases and decreases that possibly correlate with ongoing social issues at that time. - **Immigration Reform Protest (2006):** Immigrants and supporters march to the U.S. Capitol on Tuesday to demand that Congress include a pathway to citizenship in the budget package. Shootings around this protest seem to be following the yearly pattern. There seem to be no specific peaks or valleys of shootings. - **Firearm Safety Act Passed (2013):** Following the Sandy Hook Elementary School shooting in December 2012, the Firearm Safety Act was passed in early 2013 to establish prohibitions against carrying a deadly weapon on public school property and limit the authorization for a person to wear, carry, or transport a handgun. Passing this Act has potentially led to a much lower number of shooting incidents in future years. - **#BlackLivesMatter (2013 - present):** Decentralized political and social movement protesting against incidents of police brutality and all racially motivated violence against black people. There seem to be no specific peaks of shootings during the first few years of the movement. - **Same-Sex Marriage Legalized (2015):** The U.S. Supreme Court makes same-sex marriages legal in all 50 states in Obergefell v. Hodges. This was a very controversial issue that lead to many hate crimes against the LGBTQ+ community. However, there seem to be no specific peaks of shootings related to the event. - **March for Our Lives (2018):** Student-led largest single day of protest against gun violence in history, after the Parkland high school shooting on February 14. It's evident that around this movement, shooting has decreased compared to previous years. After this protest, there was yet another drop in total shootings for the next years. - **1st case of COVID-19 (2020):** The first case of COVID-19 in New York was confirmed on March 1st, 2020, marking the start of the pandemic. Since then, COVID cases skyrocketed. - **George Flyod Protest (2020):** George Floyd's murder in Minneapolis in May 2020 sparked the largest racial justice protests against police brutality and racism in the United States since the Civil Rights Movement. Shooting during this movement has been at an all-time high since 2006. Around this protest, especially in the months following, shooting rates have skyrocketed to an all-time high. 3f:T7ae,Our project aims at finding insights into the historical shooting incidents in NYC. With no clear correlation between the geographical distribution of shootings and the overall population density in different NYC neighborhoods, we were prompted to examine the demographics makeup of perpetrators and victims. By creating matrices to visualize the distribution of perpetrators and victims across age groups and races, we found that black individuals commit and suffer the highest number of shootings, especially in the 18-24 age group. 60% of all shootings happened between Black perpetrators and Black victims. This indicates that a majority of the shooting incidents are not fueled by racial biases. Among the rest of the demographic groups, White and Black Hispanics rank the next highest in the number of shootings, while all other age groups and races account for significantly fewer shootings. Furthermore, we found perpetrators across all age groups generally target victims from similar age groups, with most belonging to the 18–24 or 25–44 age group. To factor in the population of the different groups, we created more matrices to represent the number of shootings per 100K people. Overall, the 25–44 age group accounted for a high amount of shootings incidents, but that could be attributed to the fact that a huge proportion of the NYC population is aged 25-44. On the other hand, the Black Hispanics group committed and suffered a low number of shootings, but their relative number of shootings per 100K population is quite high. We also observed the pattern of shootings committed and suffered over time to confirm the consistency of our demographics findings. While most demographics groups' statistics over time align with the conclusion we drew earlier, we did find peaks for certain groups during social movements where they are specifically targeted. This indicates the need for special attention to certain groups during sensitive times.40:T72a,With our findings, we want to propose a few actions NYC communities can take to build a safer New York City: 1. **More safety education in areas experiencing a high number of shootings:** Areas such as East Bronx and East New York are experiencing high numbers of shootings. More public announcements or infographics can be posted in these communities to raise awareness about gun violence and the negative consequences of shootings. Workshops can be provided to residents who wish to learn about how to evacuate during a mass shooting or ways to protect their homes from shooting. 2. **Educate young people on the consequences of firearms misuse:** Schools in New York City, especially in areas with high shooting rates, should have lectures or safety training for teenagers and young adults on firearms. Since the 18-24 population has the highest amount of shootings committed, they should be the targeted population. These young adults should be aware of the negative consequences of firearm misuse, as well as how other ways to resolve conflicts instead of always resorting to violence. 3. **Extra safety efforts during human rights movements:** City officials should implement extra safety efforts such as more police forces during human rights movements, especially in high shooting areas. Evacuation plans should be laid out in case there are emergencies. 4. **Raise awareness on racial equality:** One of the root causes of the problem is inequality and discrimination within our society and the justice system. This is particularly evident during the George Floyd Protest, where black individuals are targeted as victims at a significantly higher rate than other races. Recent movements such as #BLM have raised some awareness of the racism embedded in our system, but it's still a long way to go till we reach true equity. 41:Tc2d,demoData = { const filtered = demoDataRaw.filter(d => +d["YEAR"] > 2 && +d["AGEGRP"] !== 0); const yearExtent = d3.extent(filtered, d => +d["YEAR"]); const yearNums = yearExtent[1] - yearExtent[0] + 1; const raceMap = { I: races.find(e => e.includes("INDIAN")), A: races.find(e => e.includes("ASIAN")), N: races.find(e => e.includes("ASIAN")), NHW: races.find(e => e.includes("WHITE") && !e.includes("HIS")), NHB: races.find(e => e.includes("BLACK") && !e.includes("HIS")), HW: races.find(e => e.includes("WHITE") && e.includes("HIS")), HB: races.find(e => e.includes("BLACK") && e.includes("HIS")) }; const raceRatio = Object.fromEntries(d3.zip(races.slice(0, -1), [ // https://data.census.gov/cedsci/table?q=new%20york%20city%20age&tid=ACSDT5Y2014.B01001C&hidePreview=false (39297+38767+43904+43840)/(24024+24008+29622+29258), (48307+45798+50651+48714+53577+51574+49255+47350)/(32282+34221+35965+36770+38552+36657+32435+31585), (39297+38767+43904+43840+53577+51574+49255+47350)/(24024+24008+29622+29258+38552+36657+32435+31585), (32989+31194+33073+31277)/(21844+23246+23588+24635), (17444+16815+16959+16032)/(11595+11676+10801+11374), (609+465+858+588)/(631+690+538+633) ])); const ageMap = Object.fromEntries([...d3.cross(d3.range(1,4), [ageGroups[0]]), [5, ageGroups[1]], ...d3.cross(d3.range(6,10), [ageGroups[2]]), ...d3.cross(d3.range(10,14), [ageGroups[3]]), ...d3.cross(d3.range(14,19), [ageGroups[4]])]); const grouped = d3.groups(filtered, d => d["AGEGRP"]).map(([ageGroup, boroughs]) => { const res = {}; for (const borough of boroughs) { for (const key in borough) { if (/^(?:I|A|N|N?H(?:W|B))A_(?:FE)?MALE$/.test(key)) { let newKey = raceMap[key.replace(/A_(?:FE)?MALE$/, "")]; if (newKey in res) { res[newKey] += +borough[key]; } else { res[newKey] = +borough[key]; } } } } for (const key in res) { if (key !== "AGEGRP") { res[key] /= yearNums; } } return [+ageGroup, res]; }); const res = Object.fromEntries(ageGroups.slice(0, -1).map(e => [e, ({})])); for (const [age, dem] of grouped) { if (age in ageMap) { const ageKey = ageMap[age]; for (const demKey in dem) { if (demKey in res[ageKey]) { res[ageKey][demKey] += dem[demKey]; } else { res[ageKey][demKey] = dem[demKey]; } } } else { for (const demKey in dem) { const k = raceRatio[demKey]; const ratio0 = k/(k+1); const ratio1 = 1/(k+1); if (demKey in res[ageGroups[0]]) { res[ageGroups[0]][demKey] += dem[demKey] * ratio0; } else { res[ageGroups[0]][demKey] = dem[demKey] * ratio0; } if (demKey in res[ageGroups[1]]) { res[ageGroups[1]][demKey] += dem[demKey] * ratio1; } else { res[ageGroups[1]][demKey] = dem[demKey] * ratio1; } } } } return res; }42:T492,shootingPerpetratorAgeRace = { const data = d3.rollups( shootingData, d => d3.rollups( d, g => g.length, e => e.PERP_RACE || "UNKNOWN" ) .filter(g => races.includes(g[0])) .sort((a, b) => races.indexOf(a[0]) - races.indexOf(b[0])) , e => e.PERP_AGE_GROUP || "UNKNOWN", ) .filter(g => ageGroups.includes(g[0])) .sort((a, b) => ageGroups.indexOf(a[0]) - ageGroups.indexOf(b[0])); const hasAgeAndRace = (a,b) => ![a, b].includes("UNKNOWN"); const totalShooting = shootingData.length; const shootingWithPerpAgeRace = totalShooting - d3.sum(data, e => e[0] === "UNKNOWN" ? d3.sum(e[1], el => el[1]) : d3.sum(e[1], el => el[0] === "UNKNOWN" ? el[1] : 0)); return Object.fromEntries( data.map(g => [ g[0], Object.fromEntries( g[1].map(e => [ e[0], { "Number of Shootings Committed": e[1], "Percentage of Shootings Committed (Original)": e[1]/totalShooting * 100, "Percentage of Shootings Committed (Adjusted)": hasAgeAndRace(g[0], e[0]) ? e[1]/shootingWithPerpAgeRace * 100 : NaN } ]) ) ]) ); }43:T488,shootingVictimAgeRace = { const data = d3.rollups( shootingData, d => d3.rollups( d, g => g.length, e => e.VIC_RACE || "UNKNOWN" ) .filter(g => races.includes(g[0])) .sort((a, b) => races.indexOf(a[0]) - races.indexOf(b[0])) , e => e.VIC_AGE_GROUP || "UNKNOWN", ) .filter(g => ageGroups.includes(g[0])) .sort((a, b) => ageGroups.indexOf(a[0]) - ageGroups.indexOf(b[0])); const hasAgeAndRace = (a,b) => ![a, b].includes("UNKNOWN"); const totalShooting = shootingData.length; const shootingWithPerpAgeRace = totalShooting - d3.sum(data, e => e[0] === "UNKNOWN" ? d3.sum(e[1], el => el[1]) : d3.sum(e[1], el => el[0] === "UNKNOWN" ? el[1] : 0)); return Object.fromEntries( data.map(g => [ g[0], Object.fromEntries( g[1].map(e => [ e[0], { "Number of Shootings Suffered": e[1], "Percentage of Shootings Suffered (Original)": e[1]/totalShooting * 100, "Percentage of Shootings Suffered (Adjusted)": hasAgeAndRace(g[0], e[0]) ? e[1]/shootingWithPerpAgeRace * 100 : NaN } ]) ) ]) ); }44:Ta13,shootingLineChart = (dataMap, color, title, k, height, otherDataMap, otherK, tickCount, tickK, exp) => { const margin = {top: 50, right: 70, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = height - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleTime() .domain(d3.extent(shootingDayRange)) .range([0, visWidth]); const selfMax = d3.max(dataMap.entries(), d => d3.max(d[1].entries(), e => e[1] * (typeof k === "function" ? k(d[0]) : k))); const otherMax = otherDataMap ? d3.max(otherDataMap.entries(), d => d3.max(d[1].entries(), e => e[1] * (typeof otherK === "function" ? otherK(d[0], e[0], e[1]) : otherK))) : 0; const maxShooting = Math.max(selfMax, otherMax); const y = d3.scalePow() .exponent(exp) .domain([0, maxShooting]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x).ticks(20); const yAxis = d3.axisLeft(y).ticks(tickCount); const yGrid = d3.axisRight(y).tickFormat(() => "").tickSize(visWidth).ticks(tickCount * tickK); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call( // clone the axis tick marks to create the grid lines g => g.selectAll('.tick > line').clone() .attr('y1', 0) .attr('y2', -visHeight) .attr('stroke', '#d1d1d1') .attr('stroke-width', 1) ) g.append('g') .call(yAxis); g.append('g') .call(yGrid) .call(g => g.selectAll(".domain").remove()) .call( g => g.selectAll(".tick").attr("opacity", (_, i) => i % tickK === 0 && tickK >= 2 ? "0.3" : "0.1") ); // title g.append("text") .attr("fill", "black") .attr("x", visWidth / 2) .attr("y", -30) .attr("text-anchor", 'middle') .attr("font-size", "12pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text(title); // lines const line = ([age, data]) => d3.line() .x(d => x(d)) .y(d => y((data.get(d) ?? 0) * (typeof k === "function" ? k(age) : k))); g.selectAll('.years') .data(dataMap) .join('g') .attr('stroke', ([age]) => color(age)) .attr('class', 'years') .append('path') .attr('fill', 'none') .attr('stroke-width', 1.5) .attr('d', d => line(d)(shootingDayRange)); addAnotations(g, visHeight, x, y); return svg.node(); }45:Te3a,addAnotations = (g, visHeight, x, y) => { // george flyod protest & police brutality g.append('line') .attr('x1', x(new Date(2020, 4, 26))) .attr('x2', x(new Date(2020, 4, 26))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1); g.append("text") .attr("fill",'#555') .attr("x", x(new Date(2020, 4, 26))+30) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("George Flyod Protest"); // COVID g.append('line') .attr('x1', x(new Date(2020, 2, 1))) .attr('x2', x(new Date(2020, 2, 1))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1); g.append("text") .attr("fill",'#555') .attr("x", x(new Date(2020, 2, 1))-20) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("COVID"); // March for Our Lives g.append('line') .attr('x1', x(new Date(2018, 2, 24))) .attr('x2', x(new Date(2018, 2, 24))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1) g.append("text") .attr("fill", '#555') .attr("x", x(new Date(2018, 2, 24))) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("March for Our Lives"); // Firearm Safety Act Passed g.append('line') .attr('x1', x(new Date(2013, 3, 4))) .attr('x2', x(new Date(2013, 3, 4))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1); g.append("text") .attr("fill", "#555") .attr("x", x(new Date(2013, 3, 4))-40) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Firearm Safety Act"); // BLM g.append('line') .attr('x1', x(new Date(2013, 6))) .attr('x2', x(new Date(2013, 6))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1); g.append("text") .attr("fill", '#555') .attr("x", x(new Date(2013, 6))+25) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("#BLM Begins"); // Immigration Reform Protests g.append('line') .attr('x1', x(new Date(2006, 5))) .attr('x2', x(new Date(2006, 5))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1) g.append("text") .attr("fill", '#555') .attr("x", x(new Date(2006, 5))+40) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Immigration Reform Protest"); // legalize gay marriage g.append('line') .attr('x1', x(new Date(2015, 5, 26))) .attr('x2', x(new Date(2015, 5, 26))) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke', '#555') .attr('stroke-width', 1); g.append("text") .attr("fill", "#555") .attr("x", x(new Date(2015, 5, 26))+30) .attr("y", -5) .attr("text-anchor", 'middle') .attr("font-size", "7pt") .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("Same-Sex Marriage Legalized"); }46:[{"id":"3325a3d71614c372bbbfb8da8c61f02a27dbe93de49061a86ef418d1d1bd548fcbda43059ff329420ddd9accd78d91879f7cd8be2714e512a7918570221be5b8","href":"https://static.observableusercontent.com/files/3325a3d71614c372bbbfb8da8c61f02a27dbe93de49061a86ef418d1d1bd548fcbda43059ff329420ddd9accd78d91879f7cd8be2714e512a7918570221be5b8","name":"cc-est2019-alldata-36.csv","type":"text/csv","lastModified":1647367989033.789,"size":414494},{"id":"70dad11b597949b32c346695e2123d89b5af93329861f071e66f5f5574171f66b18d0f9aa30a77f60ac6dcf6108b668f053fe5541b66d2e6245a8bebfcdec45b","href":"https://static.observableusercontent.com/files/70dad11b597949b32c346695e2123d89b5af93329861f071e66f5f5574171f66b18d0f9aa30a77f60ac6dcf6108b668f053fe5541b66d2e6245a8bebfcdec45b","name":"demo_2018_puma@1.csv","type":"text/csv","lastModified":1647367989033.789,"size":112032},{"id":"22060febf725bfec84588ad743b3265ba91e84a7267f7c7c11edcb3975ad9a538522fd4cefe42a674f0731e62d5b42cf047607e794ac24293510408dd7bae0af","href":"https://static.observableusercontent.com/files/22060febf725bfec84588ad743b3265ba91e84a7267f7c7c11edcb3975ad9a538522fd4cefe42a674f0731e62d5b42cf047607e794ac24293510408dd7bae0af","name":"NYPD_Sectors.geojson","type":"application/geo+json","lastModified":1647367989033.789,"size":4273630},{"id":"0687f9bddf3e9ce54c3addbf082ed062635b9dd58f4cbb2496c16b4880a09ba3b42122cfa82de6cdc8cf57d48236c4394667d94a745b5a67d72d069ec46f19a9","href":"https://static.observableusercontent.com/files/0687f9bddf3e9ce54c3addbf082ed062635b9dd58f4cbb2496c16b4880a09ba3b42122cfa82de6cdc8cf57d48236c4394667d94a745b5a67d72d069ec46f19a9","name":"NYPD_Shooting_Incident_Data__Historic_.csv","type":"text/csv","lastModified":1647367989033.789,"size":4284528},{"id":"a748dcfd735349b27beff5a22410894891e18ebf5ae879b453cfd7b38cefd0765d27ed5231f50df52944c1bf8adf34b3073f2d002232aec10f783efbcb2105dc","href":"https://static.observableusercontent.com/files/a748dcfd735349b27beff5a22410894891e18ebf5ae879b453cfd7b38cefd0765d27ed5231f50df52944c1bf8adf34b3073f2d002232aec10f783efbcb2105dc","name":"PUMA.geojson","type":"application/geo+json","lastModified":1647367989033.789,"size":3756017}] 2d:{"id":"e66b275110f9af8a","slug":null,"title":"Building a Safer New York","thumbnail":"df8320828ac18cd86a923b8bc1b11a956ffef524ad4c7e1f46fb35fc015058ce","access_level":"public","create_time":"$D2022-03-15T18:13:09.033Z","update_time":"$D2022-03-15T18:35:22.944Z","view_time":null,"first_public_time":"$D2023-11-15T18:04:53.070Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7fa6730645046cdb","login":"claudiaashao","name":"Claudia Shao","avatar_url":"https://avatars-next.observableusercontent.com/16ea6da1259b3e2dc61a0873553293bca0a4303dd2ab4e57e4989a2f5cc499b3","tier":"starter_2024"},"version":5406,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e788325b4183424","login":"claudiaashao","name":"Claudia Shao","avatar_url":"https://avatars-next.observableusercontent.com/16ea6da1259b3e2dc61a0873553293bca0a4303dd2ab4e57e4989a2f5cc499b3","tier":null}],"members":[{"type":"individual","id":"1e788325b4183424","login":"claudiaashao","name":"Claudia Shao","avatar_url":"https://avatars-next.observableusercontent.com/16ea6da1259b3e2dc61a0873553293bca0a4303dd2ab4e57e4989a2f5cc499b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Building a Safer New York","cells":[{"id":15,"value":"# Building a Safer New York","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Claudia Shao and McCoy Zhu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":213,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2872,"value":"md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2868,"value":"The Second Amendment to the United States Constitution, *the right to bear arms*, has helped America become the #1 civilian gun-owning country in the world, with 120.5 firearms owned per 100 civilian [(BBC)](https://www.bbc.com/news/world-us-canada-41488081). Over the years, homicide and suicide caused by firearms have continued to cause dividing opinions on gun control. Especially with recent social movements such as *March for Our Lives*, *#BlackLivesMatter*, and *Stop Asian Hate*, people are becoming increasingly concerned with public safety issues.\n\nOur project dives into the historic shooting incidents in New York City—one of the world’s most populated, diverse, and lively cities—and attempts to identify possible correlations between high shooting rates and population demographics. We are hoping that visualizing data will reveal reoccurring patterns of shootings in NYC and help us create hypothetical steps to take towards building a safer city. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2875,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3731,"value":"The main dataset we will analyze and visualize is the ** NYPD Shooting Incident Data (Historic)** from [NYC Open Data](https://data.cityofnewyork.us/Public-Safety/NYPD-Shooting-Incident-Data-Historic-/833y-fsy8). This dataset lists the date, time, and location of shooting incidents in NYC and the age group, sex, and race of the perpetrator and the victim.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3727,"value":"Inputs.table(shootingData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2878,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2889,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5389,"value":"## Sketches","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5395,"value":"[Data questions and visualization sketches](https://observablehq.com/d/58dada3fcfb186fd)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5401,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"## Shootings in NYC","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"**What areas of NYC are experiencing a higher number of shootings?**\n\nThe first step in understanding the issue is observing the geographical distribution of shooting incidents across different areas of the city. In order to visualize the concentration of the total number of shootings in different parts of NYC, we decided to use a choropleth map aided by varying color intensities for quantities. Below are two maps of the city, side by side, with one encoding the data on shooting incidents, and the other being the population distribution for each district. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3566,"value":"html`

\n ${legend({\n color: colorMap1,\n title: 'Number of Shootings'\n })}\n

\n ${legend({\n color: colorMap2,\n tickFormat: d3.formatPrefix(\".0\", 1e3),\n title: 'Population'\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2127,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"By comparing the shooting distribution and the population distribution in different areas of NYC, we found no specific correlations between the number of residents vs. the number of shootings. Looking at precincts with more saturated colors, we can tell that shootings are highly concentrated in neighborhoods such as Highbridge, East Bronx, East New York, and Bushwick. However, these areas are not as dense in terms of number of residents. On the other hand, areas such as Flushing and Uptown Manhattan have very high populations but very low shooting rates. Therefore, the next step for us is to explore the demographic makeup of neighborhoods to find out why the shootings are more prevalent in these specific areas despite the low population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":208,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3608,"value":"## The Perpetrators & Victims","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4881,"value":"Since there isn’t a clear correlation between the number of shootings and the overall population density in different NYC neighborhoods, we decided to shift our focus on the age and race makeup of shooting perpetrators and victims and see if the number of shooting incidents differs for each age group, race, and the combinations of age groups and races.\n\nNote: because the perpetrator or victim of one incident could have also been the perpetrator or victim of other incidents, we cannot estimate the number of unique perpetrators or victims. Thus, we will analyze the _“number of **shootings** committed/suffered”_ by each demographic group, instead of the _“number of perpetrators/victims”_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5176,"value":"### What is the distribution of shootings across perpetrator and victim age group?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5180,"value":"#### How many shootings has each age group committed and suffered?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3756,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1748,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5185,"value":"#### How many shootings has happened between each perpetrator and victim age group?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5287,"value":"viewof showVicPerpAgeGrid = Inputs.toggle({label: \"Show Gridline\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5188,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5219,"value":"We can see a large number of shootings where the perpetrator and the victim both belong to the 18–24 age group or the 25–44 age group, as well as shootings between the 18–24 and the 25–44 age groups.\n\nFocusing on each column, the victim distributions by age groups mostly align with our previous observation for the overall distribution, where victims are mostly targeted by the 18–24 and 25–44 age groups, and less by the <18, 45–64, and 65+ age groups.\n\nFocusing on each row, however, the perpetrator distributions by age groups seem to deviate from our previous observation. From this matrix, we can see that perpetrators generally target victims from age groups similar to theirs. This doesn't quite align with the overall distribution we have seen earlier, where perpetrators mostly target the 18–24 and 25–44 age groups, and less the <18, 45–64, and 65+ age groups. Here are some examples:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5223,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":212,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5227,"value":"### What is the distribution of shootings across perpetrator and victim race?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5233,"value":"#### How many shootings has each race committed and suffered?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1244,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3357,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1796,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5238,"value":"#### How many shootings has happened between each perpetrator and victim race?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5245,"value":"viewof showVicPerpRaceGrid = Inputs.toggle({label: \"Show Gridline\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5242,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5248,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":220,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":288,"value":"### What is the distribution of shootings across perpetrator and victim age group and race?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5170,"value":"We have already visualized age group and race group distributions separately. Now, we want to put everything together to see if new insights can be drawn from the shooting demographics data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5315,"value":"viewof showAgeRaceGrid = Inputs.toggle({label: \"Show Gridline\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2903,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3326,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4062,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3173,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3596,"value":"## Incidents Over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":94,"value":"** How has the number of shootings change over time from 2006-2020? **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4436,"value":"With information on demographics, it is also important for us to identify temporal patterns of shooting incidents, especially given different social movements over the years. Some of the social movements we will be looking at are racially fueled, others are more related to gun control policies based on mass shootings. In the line chart below, we visualized the total number of shootings in New York City over the past 15 years. Annotations are added for specific movements we want to pay attention to.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2360,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3616,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"**How has the number of shootings committed and suffered by each age group changed over time?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4824,"value":"After examining the overall trend for total shootings over the years, we are diving into how shootings have changed for each racial/age group of perpetrators and victims. Same annotations are added.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4164,"value":"swatches({color: colorAge})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4256,"value":"shootingLineChart(shootingByPerpAge, colorAge, \"Number of Shootings Committed Over Time Across Age Groups, 2006-2020\", shootingData.length / shootingWithPerpAge.length, 350, shootingByVicAge, shootingData.length / shootingWithVicAge.length, 6, 1, 0.75)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4836,"value":"There's no significant peaks or valleys in the number of shooting committed over the years of each age group. Although some years experience a higher number of shootings, there is a general range that each age group falls into. The number of shootings committed by perpetrators in the 18–24 age group was consistently greater than that of the 25–44 age group before the mid-2010s but then the 25–44 age group began to reach and overtake the 18–24 age group. A similar phenomenon between the <18 and 45–65 age group also happened since the late-2010s. The age of perpetrators seems to be not affected by the social movements. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4920,"value":"swatches({color: colorAge})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4269,"value":"shootingLineChart(shootingByVicAge, colorAge, \"Number of Shootings Suffered Over Time Across Age Groups, 2006-2020\", shootingData.length / shootingWithVicAge.length, 350, shootingByPerpAge, shootingData.length / shootingWithPerpAge.length, 6, 1, 0.75)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4851,"value":"Shootings suffered in different age groups seem to also be following a pattern, with age 18-24 and 25-44 being the groups with the highest number of shooting victims. The number of shootings suffered by victims in the 25–44 age group was roughly the same as that of the 18–24 age group before the mid-2010s but then the 25–44 age group quickly overtook the 18–24 age group afterward. Similarly, the number of shootings suffered by victims in the 18–24 age group was consistently greater than that of the 25–44 age group before the early-2010s but then the 45–64 age group began to reach and overtake the 18–24 age group. Furthermore, unlike shootings committed, the victims age groups seem to be affected by social movements. For example, there's a significant increase in the number of victims for all age groups around the Georg Floyd Protest. With this comparison, we can hypothetically conclude that a similar group of perpetrators is shooting more victims during certain time periods.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4542,"value":"**How has the number of shootings committed and suffered by each race changed over time?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4419,"value":"swatches({color: colorRace})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4324,"value":"shootingLineChart(shootingByPerpRace, colorRace, \"Number of Shootings Committed Over Time Across Races\" , shootingData.length / shootingWithPerpRace.length, 350, shootingByVicRace, shootingData.length / shootingWithVicRace.length, 6, 1, 0.65)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4864,"value":"The number of shootings committed by Black perpetrators are significantly higher than that of the perpetrators in other races. However, that number has been gradually decreasing over the years. The number of shootings committed by perpetrators in other races remain consistent over the years, with not much increase/decrease.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4927,"value":"swatches({color: colorRace})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4330,"value":"shootingLineChart(shootingByVicRace, colorRace, \"Number of Shootings Suffered Over Time Across Races\" , shootingData.length / shootingWithVicRace.length, 350, shootingByPerpRace, shootingData.length / shootingWithPerpRace.length, 6, 1, 0.65)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4871,"value":"The number of shootings suffered by black victims is significantly higher than the number of victims in other races. The number was gradually decreasing but skyrocketed around the George Floyd Protest. White and Black Hispanic victims also suffered a small increase in number around the same time. The number of shootings suffered by victims in other races remains consistent over the years, with not much increase/decrease.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4507,"value":"---\n## Conclusion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4930,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4521,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2540,"value":"---\n\n## Change Log\n\n- We removed the hate crime dataset and all questions and visualizations related to hate crimes.\n- We added several demographics and GeoJSON dataset.\n- We changed the legend for the question on distribution of shootings committed and suffered across age groups and races.\n- We added a normalized visualization for each of the questions on distribution of shootings committed and suffered across age groups and/or races with demographics data taken into consideration.\n- We added two new visualizations on the distribution between perpetrator and victim age groups and perpetrator and victim races.\n- We added gridlines for the matrices\n- We removed the bright yellow from our color scale due to contrast issues.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2170,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1026,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4412,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2174,"value":"## Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2179,"value":"#### geoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2184,"value":"nypdGeo = FileAttachment(\"NYPD_Sectors.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3384,"value":"communityGeo = FileAttachment(\"PUMA.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2197,"value":"#### NYC Shooting Incidents (2006–2020)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1741,"value":"shootingData = FileAttachment(\"NYPD_Shooting_Incident_Data__Historic_.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2918,"value":"#### NYC Demographics Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2908,"value":"demoDataRaw = FileAttachment(\"cc-est2019-alldata-36.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3406,"value":"popByCommunity = FileAttachment(\"demo_2018_puma@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1677,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1733,"value":"### Filtered Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4099,"value":"shootingWithVicAge = shootingData.filter(d => ageGroups.slice(0,-1).includes(d.VIC_AGE_GROUP))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4103,"value":"shootingWithVicRace = shootingData.filter(d => races.slice(0,-1).includes(d.VIC_RACE))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4116,"value":"shootingWithVicDemo = shootingData.filter(d => ageGroups.slice(0,-1).includes(d.VIC_AGE_GROUP) && races.slice(0,-1).includes(d.VIC_RACE))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4107,"value":"shootingWithPerpAge = shootingData.filter(d => ageGroups.slice(0,-1).includes(d.PERP_AGE_GROUP))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4113,"value":"shootingWithPerpRace = shootingData.filter(d => races.slice(0,-1).includes(d.PERP_RACE))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4119,"value":"shootingWithPerpDemo = shootingData.filter(d => ageGroups.slice(0,-1).includes(d.PERP_AGE_GROUP) && races.slice(0,-1).includes(d.PERP_RACE))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5209,"value":"shootingWithVicPerpAge = shootingData.filter(d => ageGroups.slice(0,-1).includes(d.PERP_AGE_GROUP) && ageGroups.slice(0,-1).includes(d.VIC_AGE_GROUP))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5212,"value":"shootingWithVicPerpRace = shootingData.filter(d => races.slice(0,-1).includes(d.PERP_RACE) && races.slice(0,-1).includes(d.VIC_RACE))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3028,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3120,"value":"ageDemo = Object.fromEntries(Object.keys(demoData).map(e => [e, d3.sum(Object.values(demoData[e]))]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3124,"value":"raceDemo = {\n const res = {};\n\n const objs = Object.values(demoData);\n\n for (const obj of objs) {\n for (const key in obj) {\n if (key in res) {\n res[key] += obj[key];\n } else {\n res[key] = obj[key];\n }\n }\n }\n\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4591,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1585,"value":"### Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4599,"value":"swatches({color: d3.scaleOrdinal().domain(colorNames).range(colorPalette)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1569,"value":"colorPalette = [\"rgb(230,159,0)\", \"rgb(86,180,233)\", \"rgb(0,150,90)\", \"rgb(240,228,66)\", \"rgb(0,114,178)\", \"rgb(213,94,0)\", \"rgb(215,121,175)\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1573,"value":"colorNames = [\"Orange\", \"Sky Blue\", \"Bluish Green\", \"Yellow\", \"Blue\", \"Vermillion\", \"Reddish Purple\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4595,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4652,"value":"## Data Processing by Section","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1991,"value":"### Shootings in NYC","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4313,"value":"// geo distribution of shootings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"PrecinctShooting = d3.rollups(\n shootingData,\n group => group.length,\n shooting => shooting.PRECINCT\n)\n .sort((a, b) => d3.descending(a[1], b[1]))\n .map(d => {\n return{\n NYC_Precinct: d[0],\n Number_of_Shootings: d[1]\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2092,"value":"PctShooting = Object.fromEntries(\n d3.rollup(\n shootingData,\n group => group.length,\n shooting => shooting.PRECINCT\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2099,"value":"shootingMax = d3.max(PrecinctShooting, d => d.Number_of_Shootings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2098,"value":"colorMap1 = d3.scaleSequentialSqrt()\n .domain([0, shootingMax])\n .range([\"white\", 'rgb(213,94,0)']) \n .unknown(\"rgb(237, 237, 237)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3423,"value":"totalPopulation = popByCommunity.map(d => {\n return{\n community: d.GeoID,\n population: d.Pop_1E\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3463,"value":"popforMap = Object.fromEntries(\n totalPopulation.map(d => [d.community, (d.population)])\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3430,"value":"popExtent = d3.extent(totalPopulation, d => d.population)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3420,"value":"colorMap2 = d3.scaleSequentialSqrt()\n .domain(popExtent)\n .range([\"rgb(211, 228, 237)\", 'rgb(0,114,178)']) \n .unknown(\"rgb(237, 237, 237)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2116,"value":"### The Perpetrators & Victims","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1577,"value":"perpetratorColor = colorPalette[5]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1581,"value":"victimColor = colorPalette[4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4276,"value":"// age distribution of P & V","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1598,"value":"shootingPerpetratorAge = {\n const data = d3.rollups(\n shootingData,\n d => d.length,\n e => e.PERP_AGE_GROUP || \"UNKNOWN\"\n )\n .filter(g => ageGroups.includes(g[0]))\n .sort((a, b) => ageGroups.indexOf(a[0]) - ageGroups.indexOf(b[0]));\n\n const totalShooting = shootingData.length;\n const shootingWithPerpAge = totalShooting - data[data.length - 1][1];\n\n return Object.fromEntries(\n data.map(g => [g[0], {\n \"Number of Shootings Committed\": g[1],\n \"Percentage of Shootings Committed (Original)\": g[1]/totalShooting * 100,\n \"Percentage of Shootings Committed (Adjusted)\": g[0] === \"UNKNOWN\" ? NaN : g[1]/shootingWithPerpAge * 100\n }])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1602,"value":"shootingVictimAge = {\n const data = d3.rollups(\n shootingData,\n d => d.length,\n e => e.VIC_AGE_GROUP || \"UNKNOWN\"\n )\n .filter(g => ageGroups.includes(g[0]))\n .sort((a, b) => ageGroups.indexOf(a[0]) - ageGroups.indexOf(b[0]));\n\n const totalShooting = shootingData.length;\n const shootingWithVictAge = totalShooting - data[data.length - 1][1];\n\n return Object.fromEntries(\n data.map(g => [g[0], {\n \"Number of Shootings Suffered\": g[1],\n \"Percentage of Shootings Suffered (Original)\": g[1]/totalShooting * 100,\n \"Percentage of Shootings Suffered (Adjusted)\": g[0] === \"UNKNOWN\" ? NaN : g[1]/shootingWithVictAge * 100\n }])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1605,"value":"shootingAgeCombined = ageGroups.map((age) => ({\"Age Group\": age, ...shootingPerpetratorAge[age], ...shootingVictimAge[age]}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3303,"value":"shootingAgeDemo = shootingAgeCombined.map(e => {\n const res = { \"Age Group\": e[\"Age Group\"] };\n const totalShootings = shootingData.length;\n const population = ageDemo[e[\"Age Group\"]];\n res[\"Perpetrator\"] = e[\"Percentage of Shootings Committed (Adjusted)\"] * totalShootings / population * 1000;\n res[\"Victim\"] = e[\"Percentage of Shootings Suffered (Adjusted)\"] * totalShootings / population * 1000;\n return res;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5200,"value":"shootingVicPerpAge = d3.rollup(shootingWithVicPerpAge, g => g.length / shootingWithVicPerpAge.length, d => d.VIC_AGE_GROUP, d => d.PERP_AGE_GROUP)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5292,"value":"visVicPerpAge.update(showVicPerpAgeGrid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"// race distribution of P & V","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1630,"value":"shootingPerpetratorRace = {\n const data = d3.rollups(\n shootingData,\n d => d.length,\n e => e.PERP_RACE || \"UNKNOWN\"\n )\n .filter(g => races.includes(g[0]))\n .sort((a, b) => races.indexOf(a[0]) - races.indexOf(b[0]));\n\n const totalShooting = shootingData.length;\n const shootingWithPerpRace = totalShooting - data[data.length - 1][1];\n\n return Object.fromEntries(\n data.map(g => [g[0], {\n \"Number of Shootings Committed\": g[1],\n \"Percentage of Shootings Committed (Original)\": g[1]/totalShooting * 100,\n \"Percentage of Shootings Committed (Adjusted)\": g[0] === \"UNKNOWN\" ? NaN : g[1]/shootingWithPerpRace * 100\n }])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1635,"value":"shootingVictimRace = {\n const data = d3.rollups(\n shootingData,\n d => d.length,\n e => e.VIC_RACE || \"UNKNOWN\"\n )\n .filter(g => races.includes(g[0]))\n .sort((a, b) => races.indexOf(a[0]) - races.indexOf(b[0]));\n\n const totalShooting = shootingData.length;\n const shootingWithVicRace = totalShooting - data[data.length - 1][1];\n\n return Object.fromEntries(\n data.map(g => [g[0], {\n \"Number of Shootings Suffered\": g[1],\n \"Percentage of Shootings Suffered (Original)\": g[1]/totalShooting * 100,\n \"Percentage of Shootings Suffered (Adjusted)\": g[0] === \"UNKNOWN\" ? NaN : g[1]/shootingWithVicRace * 100\n }])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1638,"value":"shootingRaceCombined = races.map(race => ({ Race: race, ...shootingPerpetratorRace[race], ...shootingVictimRace[race] }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3309,"value":"shootingRaceDemo = shootingRaceCombined.map(e => {\n const res = { Race: e[\"Race\"] };\n const totalShootings = shootingData.length;\n const population = raceDemo[e[\"Race\"]];\n res[\"Perpetrator\"] = e[\"Percentage of Shootings Committed (Adjusted)\"] * totalShootings / population * 1000;\n res[\"Victim\"] = e[\"Percentage of Shootings Suffered (Adjusted)\"] * totalShootings / population * 1000;\n return res;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5203,"value":"shootingVicPerpRace = d3.rollup(shootingWithVicPerpRace, g => g.length / shootingWithVicPerpRace.length, d => d.VIC_RACE, d => d.PERP_RACE)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5206,"value":"visVicPerpRace.update(showVicPerpRaceGrid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1610,"value":"// age and race matrix","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1646,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1651,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1655,"value":"shootingAgeRaceCombined = d3.cross(ageGroups, races).map(e => ({\n \"Age Group\": e[0],\n \"Race\": e[1],\n ...(shootingPerpetratorAgeRace[e[0]] ?? {})[e[1]] ?? {\n \"Number of Shootings Committed\": 0,\n \"Percentage of Shootings Committed (Original)\": 0,\n \"Percentage of Shootings Committed (Adjusted)\": [e[0], e[1]].includes(\"UNKNOWN\") ? NaN : 0\n },\n ...(shootingVictimAgeRace[e[0]] ?? {})[e[1]] ?? {\n \"Number of Shootings Suffered\": 0,\n \"Percentage of Shootings Suffered (Original)\": 0,\n \"Percentage of Shootings Suffered (Adjusted)\": [e[0], e[1]].includes(\"UNKNOWN\") ? NaN : 0\n }\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3319,"value":"shootingAgeRaceDemo = shootingAgeRaceCombined.map(e => {\n const res = { \"Age Group\": e[\"Age Group\"], Race: e[\"Race\"] };\n const totalShootings = shootingData.length;\n const population = (demoData[e[\"Age Group\"]] ?? {})[e[\"Race\"]];\n res[\"Perpetrator\"] = e[\"Percentage of Shootings Committed (Adjusted)\"] * totalShootings / population * 1000;\n res[\"Victim\"] = e[\"Percentage of Shootings Suffered (Adjusted)\"] * totalShootings / population * 1000;\n return res;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5271,"value":"addGrid = (gridlines, x, y, xData, yData, width, height) => {\n gridlines\n .append(\"g\")\n .selectAll(\"line\")\n .data(xData)\n .join(\"line\")\n .attr(\"x1\", x)\n .attr(\"x2\", x)\n .attr(\"y1\", 0)\n .attr(\"y2\", height);\n\n gridlines\n .append(\"g\")\n .selectAll(\"line\")\n .data(yData)\n .join(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", width)\n .attr(\"y1\", y)\n .attr(\"y2\", y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5324,"value":"visAgeRace1.update(showAgeRaceGrid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5326,"value":"visAgeRace2.update(showAgeRaceGrid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1643,"value":"### Incidents Over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4294,"value":"// overall shootings over time","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2401,"value":"ShootingSorted = shootingData.sort((a, b) => d3.ascending(new Date(a.OCCUR_DATE), new Date(b.OCCUR_DATE)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2409,"value":"ShootingOverTime_Flat = d3.flatRollup(\n ShootingSorted,\n group => group.length,\n s => new Date(s.OCCUR_DATE).getFullYear(),\n s => new Date(s.OCCUR_DATE).getMonth()\n)\n.sort((a, b) => d3.ascending(a[0], b[0]))\n.map(d => {\n return{\n Year: d[0],\n Month: d[1]+1,\n Number_of_Shootings: d[2]\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1663,"value":"// shootings for different demo groups over time","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4144,"value":"colorAge= d3.scaleOrdinal()\n .domain(ageGroups.slice(0,-1))\n .range([0,2,1,4,6].map((i) => colorPalette[i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3630,"value":"colorRace= d3.scaleOrdinal()\n .domain(races.slice(0,-1))\n .range([0,1,2,4,5,6].map((i) => colorPalette[i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4166,"value":"shootingDayRange = {\n const shootingExtent = d3.extent(shootingData, d => new Date(d.OCCUR_DATE));\n return d3.cross(d3.range(shootingExtent[0].getFullYear(), shootingExtent[1].getFullYear() + 1), d3.range(0, 12)).map(([y,m]) => new Date(y, m)).filter(d => shootingExtent[0] <= d && d <= shootingExtent[1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4199,"value":"shootingByVicRace = d3.rollup(\n shootingWithVicRace,\n group => group.length,\n s => s.VIC_RACE,\n s => new Date(new Date(s.OCCUR_DATE).getFullYear(), new Date(s.OCCUR_DATE).getMonth())\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4196,"value":"shootingByPerpRace = d3.rollup(\n shootingWithPerpRace,\n group => group.length,\n s => s.PERP_RACE,\n s => new Date(new Date(s.OCCUR_DATE).getFullYear(), new Date(s.OCCUR_DATE).getMonth())\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4094,"value":"shootingByVicAge = d3.rollup(\n shootingWithVicAge,\n group => group.length,\n s => s.VIC_AGE_GROUP,\n s => new Date(new Date(s.OCCUR_DATE).getFullYear(), new Date(s.OCCUR_DATE).getMonth())\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4128,"value":"shootingByPerpAge = d3.rollup(\n shootingWithPerpAge,\n group => group.length,\n s => s.PERP_AGE_GROUP,\n s => new Date(new Date(s.OCCUR_DATE).getFullYear(), new Date(s.OCCUR_DATE).getMonth())\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4246,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4426,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1619,"value":"### Other","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1681,"value":"ageGroups = [\"<18\", \"18-24\", \"25-44\", \"45-64\", \"65+\", \"UNKNOWN\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1684,"value":"races = [\"BLACK\", \"WHITE HISPANIC\", \"BLACK HISPANIC\", \"WHITE\", \"ASIAN / PACIFIC ISLANDER\", \"AMERICAN INDIAN/ALASKAN NATIVE\", \"UNKNOWN\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1819,"value":"// racesFormatted = [...races.slice(0, races.length - 2), \"AMERICAN INDIAN / ALASKAN NATIVE\"]\nracesFormatted = [\"BLACK\", \"WHITE HISPANIC\", \"BLACK HISPANIC\", \"WHITE\", \" \", \" \"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1622,"value":"percentFormat = (n) => Math.abs(n) >= 1 ? d3.format(\".0%\")(n) : d3.format(\"~%\")(n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5192,"value":"round = (n, k = 0) => {\n const whole = Math.pow(10, Math.floor(Math.log10(n)) - k);\n return Math.round(n / whole) * whole;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W46","stdlib":"1","titling":"auto"}} 2e:"$2d:body"