25:["$","title",null,{"children":"Group Project: Proposal | Rui Wang's Workspace | Observable"}] 49:T8e9,- Introduction: Unveiling Insights into US Police Shootings In recent years, incidents of police shootings in the United States have garnered significant attention, sparking intense debates on the use of force, racial disparities, and law enforcement practices. This data visualization project aims to delve into the depths of the 'US Police Shooting' dataset, shedding light on crucial aspects surrounding these incidents. Our goal is to present a comprehensive analysis that examines the circumstances, factors, and potential patterns surrounding these tragic events. - Purpose of the Project The primary purpose of this project is to provide a nuanced understanding of the dynamics surrounding police shootings in the United States. By leveraging visualizations and analytics, we aim to uncover trends, correlations, and insights that contribute to a more informed discourse on this critical issue. Through the lens of data, we seek to foster transparency, stimulate discussion, and empower individuals with the knowledge to advocate for positive change in policing practices. - Why it's Interesting This wealth of data offers us a unique opportunity to explore and visualize complex relationships, potentially challenging preconceptions and uncovering lesser-known facets of police shootings. The dataset not only covers individuals envolved but also includes geographical and temporal data. The inherent multidimensionality of the dataset makes this analysis not only interesting but crucial in promoting a more comprehensive understanding of the issue. - Importance of the Project Understanding the nuances of police shootings is imperative for fostering a society that values transparency, accountability, and justice. By providing a visual narrative of the data, we hope to empower individuals, policymakers, and advocacy groups with information that can drive evidence-based discussions and policy reforms. Ultimately, the importance of this project lies in its potential to contribute to a safer and more equitable future for all. In the following visualizations, we will explore various dimensions of the 'US Police Shooting' dataset, unraveling stories hidden within the numbers and fostering a data-driven dialogue on a topic of immense societal significance. 4a:T58d,{ // create and select an svg element that is the size of the bars plus margins const svg = d3.create('svg') .attr('width', 400) .attr('height', 400); // append a group element and move it left and down to create space // for the left and top margins const g = svg.append("g") .attr('transform', `translate(100,100)`); // bind our data to lines g.selectAll('rect') .data(AgeYear) .join('rect') // countryScale sets the x position instead of y .attr('x', d => ageScaleBand(d.age_range)) .attr('width', d => ageScaleBand.bandwidth()) // populationScale gives y position .attr('y', d => ageScale(d.number)) .attr('height', d => 100 - ageScale(d.number)) .attr('fill', 'steelblue'); // add a group for the y-axis g.append('g') .call(yAxis); // add a group for the x-axis g.append('g') // we have to move this group down to the bottom of the vis .attr('transform', `translate(0, 100)`) .call(d3.axisBottom(ageScaleBand)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-55)") // add a label for the x-axis .append('text') .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('x', 100 / 2) .attr('y', 40) .text("age range"); return svg.node(); }4b:T4d34,{ const svg = d3.create('svg') .attr('width', 1200) .attr('height', 900); // race pie const race_graph = svg.append('g').attr('transform', 'translate(-350,0)'); let height = 250; let radius = Math.min(width, height) / 2; let margin = {top: 10, right: 10, bottom: 10, left: 10} let colorScale = d3.scaleOrdinal(d3.schemeCategory10); let totals = RaceYear.map((element) => element.value); let grandTotal = totals.reduce((a, b) => a + b); let arc = d3.arc() .outerRadius(radius - 25) .innerRadius(1.5); let labelArc = d3.arc() .outerRadius(radius - 60) .innerRadius(radius - 60); let pie = d3.pie() .sort((a, b) => d3.ascending(a, b)) .value((d) => d.value) .padAngle(0.01); let arcGroup = race_graph.append("g") .attr("class", "arc-group") .attr("transform", `translate(${width/2 - margin.left - margin.right}, ${height/2 + margin.top + margin.bottom})`); let arcs = arcGroup.selectAll(".arc") .data(pie(RaceYear)).enter() .append("g") .attr("class", "arc"); arcs.append("path") .attr("d", arc) .style("fill", (d) => colorScale(d.data.name)); let legendPadding = 5; let legendBox = race_graph.append("g") .attr("class", "legend-group") .attr("transform", `translate(${width/2+radius}, ${(3/4) * radius})`); let legend = legendBox.selectAll(".legend") .data(RaceYear).enter() .append("g") .attr("class", "legend") .attr("transform", (d, i) => `translate(${0}, ${i * 20 + 20})`); let displacement = "0.4em" legend.append("circle") .attr("class", "legend-color") .attr("r", displacement) .style("fill", (d) => colorScale(d.name)); legend.append("text") .attr("class", "legend-text") .attr("x", "1em") .attr("y", displacement) .style("font", "14px sans-serif") .style("text-anchor", "start") .text((d) => d.name); arcs.append("text") .attr("transform", (d) => `translate(${labelArc.centroid(d)})`) .attr("dy", ".35em") .style("font", "14px sans-serif") .style("text-anchor", "middle") .style("stroke", "white") .style("stroke-width", "3px") .style("opacity", 0.8) .text((d, i) => `${((totals[i] / grandTotal) * 100).toFixed(2)}%`); arcs.append("text") .attr("transform", (d) => `translate(${labelArc.centroid(d)})`) .attr("dy", ".35em") .style("font", "14px sans-serif") .style("text-anchor", "middle") .text((d, i) => `${((totals[i] / grandTotal) * 100).toFixed(2)}%`); race_graph.append("text") .attr("x", width/2-25) .attr("y", 30) .style("text-anchor", "middle") .style("font", "14px sans-serif") .text("Race Distribution"); // flee pie const flee_graph = svg.append('g').attr('transform', 'translate(0, 0)'); let colorScale2 = d3.scaleOrdinal(d3.schemeCategory10); let totals2 = FleeYear.map((element) => element.value); let grandTotal2 = totals2.reduce((a, b) => a + b); let arc2 = d3.arc() .outerRadius(radius - 25) .innerRadius(1.5); let labelArc2 = d3.arc() .outerRadius(radius - 60) .innerRadius(radius - 60); let pie2 = d3.pie() .sort((a, b) => d3.ascending(a, b)) .value((d) => d.value) .padAngle(0.01); let arcGroup2 = flee_graph.append("g") .attr("class", "arc-group") .attr("transform", `translate(${width/2 - margin.left - margin.right}, ${height/2 + margin.top + margin.bottom})`); let arcs2 = arcGroup2.selectAll(".arc") .data(pie(FleeYear)).enter() .append("g") .attr("class", "arc"); arcs2.append("path") .attr("d", arc2) .style("fill", (d) => colorScale2(d.data.name)); let legendPadding2 = 5; let legendBox2 = flee_graph.append("g") .attr("class", "legend-group") .attr("transform", `translate(${width/2+radius}, ${(3/4) * radius})`); let legend2 = legendBox2.selectAll(".legend") .data(FleeYear).enter() .append("g") .attr("class", "legend") .attr("transform", (d, i) => `translate(${0}, ${i * 20 + 20})`); let displacement2 = "0.4em" legend2.append("circle") .attr("class", "legend-color") .attr("r", displacement2) .style("fill", (d) => colorScale2(d.name)); legend2.append("text") .attr("class", "legend-text") .attr("x", "1em") .attr("y", displacement2) .style("font", "14px sans-serif") .style("text-anchor", "start") .text((d) => d.name); arcs2.append("text") .attr("transform", (d) => `translate(${labelArc2.centroid(d)})`) .attr("dy", ".35em") .style("font", "14px sans-serif") .style("text-anchor", "middle") .style("stroke", "white") .style("stroke-width", "3px") .style("opacity", 0.8) .text((d, i) => `${((totals2[i] / grandTotal2) * 100).toFixed(2)}%`); arcs2.append("text") .attr("transform", (d) => `translate(${labelArc2.centroid(d)})`) .attr("dy", ".35em") .style("font", "14px sans-serif") .style("text-anchor", "middle") .text((d, i) => `${((totals2[i] / grandTotal2) * 100).toFixed(2)}%`); flee_graph.append("text") .attr("x", width/2-25) .attr("y", 30) .style("text-anchor", "middle") .style("font", "14px sans-serif") .text("Flee Distribution"); // theat pie const threat_graph = svg.append('g').attr('transform', 'translate(350,0)'); let colorScale3 = d3.scaleOrdinal(d3.schemeCategory10); let totals3 = ThreatYear.map((element) => element.value); let grandTotal3 = totals3.reduce((a, b) => a + b); let arc3 = d3.arc() .outerRadius(radius - 25) .innerRadius(1.5); let labelArc3 = d3.arc() .outerRadius(radius - 60) .innerRadius(radius - 60); let pie3 = d3.pie() .sort((a, b) => d3.ascending(a, b)) .value((d) => d.value) .padAngle(0.01); let arcGroup3 = threat_graph.append("g") .attr("class", "arc-group") .attr("transform", `translate(${width/2 - margin.left - margin.right}, ${height/2 + margin.top + margin.bottom})`); let arcs3 = arcGroup3.selectAll(".arc") .data(pie(ThreatYear)).enter() .append("g") .attr("class", "arc"); arcs3.append("path") .attr("d", arc3) .style("fill", (d) => colorScale3(d.data.name)); let legendPadding3 = 5; let legendBox3 = threat_graph.append("g") .attr("class", "legend-group") .attr("transform", `translate(${width/2+radius}, ${(3/4) * radius})`); let legend3 = legendBox3.selectAll(".legend") .data(ThreatYear).enter() .append("g") .attr("class", "legend") .attr("transform", (d, i) => `translate(${0}, ${i * 20 + 20})`); let displacement3 = "0.4em" legend3.append("circle") .attr("class", "legend-color") .attr("r", displacement3) .style("fill", (d) => colorScale3(d.name)); legend3.append("text") .attr("class", "legend-text") .attr("x", "1em") .attr("y", displacement3) .style("font", "14px sans-serif") .style("text-anchor", "start") .text((d) => d.name); arcs3.append("text") .attr("transform", (d) => `translate(${labelArc3.centroid(d)})`) .attr("dy", ".35em") .style("font", "14px sans-serif") .style("text-anchor", "middle") .style("stroke", "white") .style("stroke-width", "3px") .style("opacity", 0.8) .text((d, i) => `${((totals3[i] / grandTotal3) * 100).toFixed(2)}%`); arcs3.append("text") .attr("transform", (d) => `translate(${labelArc3.centroid(d)})`) .attr("dy", ".35em") .style("font", "14px sans-serif") .style("text-anchor", "middle") .text((d, i) => `${((totals3[i] / grandTotal3) * 100).toFixed(2)}%`); threat_graph.append("text") .attr("x", width/2 - 25) .attr("y", 30) .style("text-anchor", "middle") .style("font", "14px sans-serif") .text("Threat Level Distribution"); // gender bar const gender_bar = svg.append("g") .attr('transform', `translate(50, 250)`) const gender_data = [{name:"Gender", male:GenderYear[0].number, female:GenderYear[1].number}] const margin2 = {top:50, left:10, right:30, bottom:0} const visWidth = 1000 - margin2.left - margin2.right const visHeight = 130 - margin2.top - margin2.bottom const y_scale = d3.scaleBand() .domain(["Gender"]) .range([margin2.top ,visHeight]) .padding(0.3) const male_scale = d3.scaleLinear() .domain(d3.extent([0, 1000])) .range([visWidth/2 + 65, visWidth]) const female_scale = d3.scaleLinear() .domain(d3.extent([0, 1000])) .range([visWidth/2 - 65, 0]) const male_Axis = d3.axisTop(male_scale) .ticks(5) const female_Axis = d3.axisTop(female_scale) .ticks(5) gender_bar.append('text') .text("Female") .attr('x', visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") gender_bar.append('text') .text("Male") .attr('x', visWidth/2 + visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") gender_bar.append('g') .attr('transform', `translate(0,${margin2.top})`) .call(male_Axis) gender_bar.append('g') .attr('transform', `translate(0,${margin2.top})`) .call(female_Axis) gender_bar.selectAll('.col') .data(gender_data) .join('g') .append('text') .text(d => d.name) .attr('x', visWidth/2) .attr('y', d => y_scale(d.name) + 3) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") gender_bar.append("g") .selectAll("rect") .data(gender_data) .join("rect") .attr("fill", 'orange') .attr("x", visWidth/2 + 65) .attr("y", d => y_scale(d.name)) .attr("width", d => male_scale(d.male) - (visWidth/2 + 65)) .attr("height", y_scale.bandwidth()); gender_bar.append("g") .selectAll("rect") .data(gender_data) .join("rect") .attr("fill", 'steelblue') .attr("x", d => female_scale(d.female)) .attr("y", d => y_scale(d.name)) .attr("width", d => (visWidth/2 -65) - female_scale(d.female)) .attr("height", y_scale.bandwidth()); gender_bar.append('line') .attr('x1', visWidth/2 + 65) .attr('y1', 50) .attr('x2', visWidth/2 + 65) .attr('y2', visHeight) .attr('stroke', 'red') .attr('stroke-opacity', 0.3) gender_bar.append('line') .attr('x1', visWidth/2 - 65) .attr('y1', 50) .attr('x2', visWidth/2 - 65) .attr('y2', visHeight) .attr('stroke', 'green') .attr('stroke-opacity', 0.3) // signs of mental illness const mental_bar = svg.append("g") .attr('transform', `translate(50, 350)`) const mental_data = [{name:"Signs of Mental Illness", False:MentalYear[0].number, True:MentalYear[1].number}] const yy_scale = d3.scaleBand() .domain(["Signs of Mental Illness"]) .range([margin2.top ,visHeight]) .padding(0.3) const true_scale = d3.scaleLinear() .domain(d3.extent([0, 1000])) .range([visWidth/2 + 65, visWidth]) const false_scale = d3.scaleLinear() .domain(d3.extent([0, 1000])) .range([visWidth/2 - 65, 0]) const false_Axis = d3.axisTop(false_scale) .ticks(5) const true_Axis = d3.axisTop(true_scale) .ticks(5) mental_bar.append('text') .text("False") .attr('x', visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") mental_bar.append('text') .text("True") .attr('x', visWidth/2 + visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") mental_bar.append('g') .attr('transform', `translate(0,${margin2.top})`) .call(false_Axis) mental_bar.append('g') .attr('transform', `translate(0,${margin2.top})`) .call(true_Axis) mental_bar.selectAll('.col') .data(mental_data) .join('g') .append('text') .text(d => d.name) .attr('x', visWidth/2) .attr('y', d => yy_scale(d.name) + 3) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") mental_bar.append("g") .selectAll("rect") .data(mental_data) .join("rect") .attr("fill", 'orange') .attr("x", visWidth/2 + 65) .attr("y", d => yy_scale(d.name)) .attr("width", d => true_scale(d.True) - (visWidth/2 + 65)) .attr("height", yy_scale.bandwidth()); mental_bar.append("g") .selectAll("rect") .data(mental_data) .join("rect") .attr("fill", 'steelblue') .attr("x", d => false_scale(d.False)) .attr("y", d => yy_scale(d.name)) .attr("width", d => (visWidth/2 -65) - false_scale(d.False)) .attr("height", yy_scale.bandwidth()); mental_bar.append('line') .attr('x1', visWidth/2 + 65) .attr('y1', 50) .attr('x2', visWidth/2 + 65) .attr('y2', visHeight) .attr('stroke', 'red') .attr('stroke-opacity', 0.3) mental_bar.append('line') .attr('x1', visWidth/2 - 65) .attr('y1', 50) .attr('x2', visWidth/2 - 65) .attr('y2', visHeight) .attr('stroke', 'green') .attr('stroke-opacity', 0.3) // body camera const camera_bar = svg.append("g") .attr('transform', `translate(50, 450)`) const camera_data = [{name:"Body Camera", False: CameraYear[0].number, True:CameraYear[1].number}] const yyy_scale = d3.scaleBand() .domain(["Body Camera"]) .range([margin2.top ,visHeight]) .padding(0.3) const true_scale2 = d3.scaleLinear() .domain(d3.extent([0, 1000])) .range([visWidth/2 + 65, visWidth]) const false_scale2 = d3.scaleLinear() .domain(d3.extent([0, 1000])) .range([visWidth/2 - 65, 0]) const false_Axis2 = d3.axisTop(false_scale2) .ticks(5) const true_Axis2 = d3.axisTop(true_scale2) .ticks(5) camera_bar.append('text') .text("False") .attr('x', visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") camera_bar.append('text') .text("True") .attr('x', visWidth/2 + visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") camera_bar.append('g') .attr('transform', `translate(0,${margin2.top})`) .call(false_Axis2) camera_bar.append('g') .attr('transform', `translate(0,${margin2.top})`) .call(true_Axis2) camera_bar.selectAll('.col') .data(camera_data) .join('g') .append('text') .text(d => d.name) .attr('x', visWidth/2) .attr('y', d => yyy_scale(d.name) + 3) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") camera_bar.append("g") .selectAll("rect") .data(camera_data) .join("rect") .attr("fill", 'orange') .attr("x", visWidth/2 + 65) .attr("y", d => yyy_scale(d.name)) .attr("width", d => true_scale2(d.True) - (visWidth/2 + 65)) .attr("height", yyy_scale.bandwidth()); camera_bar.append("g") .selectAll("rect") .data(camera_data) .join("rect") .attr("fill", 'steelblue') .attr("x", d => false_scale2(d.False)) .attr("y", d => yyy_scale(d.name)) .attr("width", d => (visWidth/2 -65) - false_scale2(d.False)) .attr("height", yyy_scale.bandwidth()); camera_bar.append('line') .attr('x1', visWidth/2 + 65) .attr('y1', 50) .attr('x2', visWidth/2 + 65) .attr('y2', visHeight) .attr('stroke', 'red') .attr('stroke-opacity', 0.3) camera_bar.append('line') .attr('x1', visWidth/2 - 65) .attr('y1', 50) .attr('x2', visWidth/2 - 65) .attr('y2', visHeight) .attr('stroke', 'green') .attr('stroke-opacity', 0.3) //age bar const age_bar = svg.append("g") .attr('transform', `translate(650,600)`); // turn countryScale into a scalePoint const age_ranges = AgeYear.map(d => d["age_range"]) const ageScaleBand = d3.scaleBand() .domain(age_ranges) // changed from [0, visHeight] to [0, visWidth] .range([0, 300]) .padding(0.2) // turn countryScale into a scalePoint const age_range_scale = d3.scalePoint() .domain(age_ranges) // changed from [0, visHeight] to [0, visWidth] .range([0, 300]) .padding(0.2) const ageScale = d3.scaleLinear() .domain([0, d3.max(AgeYear, d=> d.number)]) .nice() // make the domain start and end on round values // changed from [0, visWidth] to [visHeight, 0] .range([200, 0]) const agexAxis = d3.axisBottom(age_range_scale) const ageyAxis = d3.axisLeft(ageScale).tickFormat(d3.format('~s')) age_bar.append('text') .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('x', 0) .attr('y', -20) .text("Age Distribution"); age_bar.selectAll('rect') .data(AgeYear) .join('rect') .attr('x', d => ageScaleBand(d.age_range)) .attr('width', d => ageScaleBand.bandwidth()) .attr('y', d => ageScale(d.number)) .attr('height', d => 200 - ageScale(d.number)) .attr('fill', 'steelblue'); age_bar.append('g') .call(ageyAxis); age_bar.append('g') .attr('transform', `translate(0, 200)`) .call(d3.axisBottom(ageScaleBand)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-55)") .append('text') .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('x', 100 / 2) .attr('y', 40) .text("age range"); // arm bar const margin3 = {top: 10, bottom: 100, left: 75, right: 10} const visWidth3 = 300 const visHeight3 = 200 const arms_graph = svg.append("g") .attr('transform', `translate(100, 600)`); arms_graph.append('text') .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('x', 0) .attr('y', -20) .text("Arms Category"); arms_graph.selectAll('line') .data(ArmsYear) .join('line') .attr('x1', d => ArmsScale(d.name)) .attr('x2', d => ArmsScale(d.name)) .attr('y1', d => arms_numberScale(d.value)) .attr('y2', d => visHeight3) .attr('stroke', 'lightgray'); // bind our data to circles arms_graph.selectAll('circle') .data(ArmsYear) .join('circle') // countryScale sets the x position instead of y .attr('cx', d => ArmsScale(d.name)) // populationScale gives y position .attr('cy', d => arms_numberScale(d.value)) .attr('r', 5) .attr('fill', 'steelblue'); const meanArmsNumber = d3.mean(ArmsYear, d => d.value); arms_graph.append('line') .attr('x1', 0) .attr('x2', visWidth3) .attr('y1', arms_numberScale(meanArmsNumber)) .attr('y2', arms_numberScale(meanArmsNumber)) .attr('stroke', 'red'); const yAxis3 = d3.axisLeft(arms_numberScale).tickFormat(d3.format('~s')) arms_graph.append('g') .call(yAxis3); const xAxis3 = d3.axisBottom(ArmsScale) arms_graph.append('g') .attr('transform', `translate(0, ${visHeight3})`) .call(xAxis3) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-55)") .append('text') .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('x', visWidth3 / 2) .attr('y', 40) .text("arms"); return svg.node(); }4c:T5be,## Explanation: For a dataset with multipule columns, the first thing that come up into our mind is probably to have a view of the data distribution on each field, so that we can get a big picture about what we are looking into and then discover those interesting points. So, in the first part, I'm trying to figure out a few general questions about this dataset. (What are the characteristics of individuals shot by police? What is the age distribution, gender distribution, and racial distribution of these individuals? Were they carrying weapons?) Accordingly, my solution is to build a visualization with small multipules. With a slider, you are able to view the data of a specific year. In the upper area, there are three pie charts representing the race, flee and threat level distribution. Next, in the middle, are three bars representing the Gender, signs of Mental illness and body camera. The reason why I'm using horizontal bars here is because all of these three fields only have two values. We can easily tell the difference between each two values. A surprisng point we can discover is the huge difference between the number of individuals being shot under the circumstance of whether the police officers are wearing body cameras. And the last part of this graph is two bar charts representing the arms category distribution and age distribution. We can easily see that Guns and sharp objects are those absolute sensitive weapons in police officers' eyes. 4d:T4f0,{ const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 90 }; const x = d3.scaleLinear() .domain([0, d3.max(top10Cities, d => d[1])]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(top10Cities.map(d => d[0])) .range([margin.top, height - margin.bottom]) .padding(0.1); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .selectAll("rect") .data(top10Cities) .join("rect") .attr("x", x(0)) .attr("y", d => y(d[0])) .attr("width", d => x(d[1]) - x(0)) .attr("height", y.bandwidth()) .attr("fill", "steelblue"); svg.append("g") .attr("fill", "#000") .selectAll("text") .data(top10Cities) .join("text") .attr("x", d => x(d[1]) + 4) .attr("y", d => y(d[0]) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d[1]) .attr("font-size", "15px"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(null, "s")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); return svg.node(); }4e:T9a1,{ const topCities = [ { name: "Los Angeles", coordinates: [-118.2437, 34.0522], shootings: 78 }, { name: "Phoenix", coordinates: [-112.0740, 33.4484], shootings: 66 }, { name: "Houston", coordinates: [-95.3698, 29.7604], shootings: 51 }, { name: "Las Vegas", coordinates: [-115.1398, 36.1699], shootings: 41 }, { name: "San Antonio", coordinates: [-98.4936, 29.4241], shootings: 40 }, { name: "Chicago", coordinates: [-87.6298, 41.8781], shootings: 38 }, { name: "Columbus", coordinates: [-82.9988, 39.9612], shootings: 36 }, { name: "Albuquerque", coordinates: [-106.6504, 35.0844], shootings: 32 }, { name: "Jacksonville", coordinates: [-81.6557, 30.3322], shootings: 31 }, { name: "St. Louis", coordinates: [-90.1994, 38.6270], shootings: 30 } ]; const geoData = await d3.json("https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json"); const usFeature = geoData.features.find(d => d.properties.name === "United States of America"); const width = 960; const height = 600; const projection = d3.geoAlbersUsa().scale(1300).translate([width / 2, height / 2]); const pathGenerator = d3.geoPath().projection(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("path") .datum(usFeature) .attr("d", pathGenerator) .attr("fill", "#ddd"); const colorScale = d3.scaleSequential(d3.interpolateBlues) .domain([0, d3.max(topCities, d => d.shootings)]); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#fff") .style("border", "1px solid #ddd") .style("padding", "5px") .style("border-radius", "5px") .style("text-align", "left"); svg.selectAll("circle") .data(topCities) .enter().append("circle") .attr("cx", d => projection(d.coordinates)[0]) .attr("cy", d => projection(d.coordinates)[1]) .attr("r", 5) .attr("fill", d => colorScale(d.shootings)) .on("mouseover", function(event, d) { tooltip.style("visibility", "visible") .text(`${d.name}: ${d.shootings} shootings`); }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 10) + "px") .style("left",(event.pageX + 10) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); return svg.node(); }4f:T86f,{ const stateGrid = [[0,0,"AK"],[10,0,"ME"],[5,1,"WI"],[9,1,"VT"],[10,1,"NH"],[0,2,"WA"],[1,2,"ID"],[2,2,"MT"],[3,2,"ND"],[4,2,"MN"],[5,2,"IL"],[6,2,"MI"],[7,2,"NY"],[9,2,"MA"],[0,3,"OR"],[1,3,"NV"],[2,3,"WY"],[3,3,"SD"],[4,3,"IA"],[5,3,"IN"],[6,3,"OH"],[7,3,"PA"],[8,3,"NJ"],[9,3,"CT"],[10,3,"RI"],[0,4,"CA"],[1,4,"UT"],[2,4,"CO"],[3,4,"NE"],[4,4,"MO"],[5,4,"KY"],[6,4,"WV"],[7,4,"VA"],[8,4,"MD"],[9,4,"DE"],[1,5,"AZ"],[2,5,"NM"],[3,5,"KS"],[4,5,"AR"],[5,5,"TN"],[6,5,"NC"],[7,5,"SC"],[8,5,"DC"],[3,6,"OK"],[4,6,"LA"],[5,6,"MS"],[6,6,"AL"],[7,6,"GA"],[0,7,"HI"],[3,7,"TX"],[8,7,"FL"]]; const cityStateRates = sortedStates.map(stateInfo => { const [state, rate] = stateInfo; const gridInfo = stateGrid.find(item => item[2] === state); if (gridInfo) { const [col, row] = gridInfo; return { state, rate, row, col }; } else { return null; } }).filter(item => item !== null); const numberOfRows = d3.max(cityStateRates, d => d.row) + 1; const numberOfCols = d3.max(cityStateRates, d => d.col) + 1; const cellSize = 50; const mapWidth = numberOfCols * cellSize; const mapHeight = numberOfRows * cellSize; const row = d3.scaleBand() .domain(d3.range(numberOfRows)) .range([0, mapHeight]) .padding(0.05); const col = d3.scaleBand() .domain(d3.range(numberOfCols)) .range([0, mapWidth]) .padding(0.05); const svg = d3.create('svg') .attr('width', mapWidth) .attr('height', mapHeight); const cells = svg.selectAll('g') .data(cityStateRates) .join('g') .attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`); cells.append('rect') .attr('width', col.bandwidth()) .attr('height', row.bandwidth()) .attr('fill', d => color(d.rate)); cells.append('text') .attr('font-size', 12) .attr('font-family', 'sans-serif') .attr('fill', d => d3.hcl(color(d.rate)).l > 50 ? 'black' : 'white') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('x', col.bandwidth() / 2) .attr('y', row.bandwidth() / 2) .text(d => d.state); return svg.node(); }50:T544,year_age = { // Define age groups order const ageGroupOrder = ['Children', 'Teenagers', 'Young Adults', 'Adults', 'Middle-aged Adults', 'Seniors', 'Elderly']; // Helper function to categorize age function categorizeAge(age) { if (age <= 12) return 'Children'; if (age <= 19) return 'Teenagers'; if (age <= 29) return 'Young Adults'; if (age <= 39) return 'Adults'; if (age <= 54) return 'Middle-aged Adults'; if (age <= 64) return 'Seniors'; return 'Elderly'; } // Extract year and categorize age data.forEach(d => { d.year = d.date.split('-')[0]; d.ageGroup = categorizeAge(d.age); }); // Group and count const countByYearAgeGroup = {}; data.forEach(d => { const key = d.year + "_" + d.ageGroup; if (!countByYearAgeGroup[key]) { countByYearAgeGroup[key] = { year: d.year, ageGroup: d.ageGroup, count: 0 }; } countByYearAgeGroup[key].count += 1; }); // Convert to array and sort let result = Object.values(countByYearAgeGroup); result = result.sort((a, b) => { if (a.year === b.year) { return ageGroupOrder.indexOf(a.ageGroup) - ageGroupOrder.indexOf(b.ageGroup); } return a.year.localeCompare(b.year); }); return result; }51:Td2b,chart = { // Specify the chart’s dimensions (except for the height). const width = 928; const marginTop = 30; const marginRight = 10; const marginBottom = 0; const marginLeft = 50; let series; let y; if (missing == "yes") { if(view == "Race"){ series = series_race_missing } if(view == "Age"){ series = series_age_missing }} else{ if(view == "Race"){ series = series_race } if(view == "Age"){ series = series_age }} // Compute the height from the number of stacks. const height = series[0].length * 25 + marginTop + marginBottom; // Prepare the scales for positional and color encodings. const x = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .range([marginLeft, width - marginRight]); if(view=="Race"){ y = d3.scaleBand() .domain(d3.groupSort(year_race, D => -d3.sum(D, d => d.count), d => d.year)) .range([marginTop, height - marginBottom]) .padding(0.08);} if(view=="Age"){ y = d3.scaleBand() .domain(d3.groupSort(year_age, D => -d3.sum(D, d => d.count), d => d.year)) .range([marginTop, height - marginBottom]) .padding(0.08);} const color = d3.scaleOrdinal() .domain(series.map(d => d.key)) .range(d3.schemeSpectral[series.length]) .unknown("#ccc"); // A function to format the value in the tooltip. const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en") // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); if(view=="Race"){ // Append a group for each series, and a rect for each element in the series. svg.append("g") .selectAll() .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(D => D.map(d => (d.key = D.key, d))) .join("rect") .attr("x", d => x(d[0])) .attr("y", d => y(d.data[0])) .attr("height", y.bandwidth()) .attr("width", d => x(d[1]) - x(d[0])) .append("title") .text(d => `${d.data[0]} ${d.key}\n${formatValue(d.data[1].get(d.key).count)}`); } if(view=="Age"){ svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(D => D.map(d => (d.key = D.key, d))) .join("rect") .attr("x", d => x(d[0])) .attr("y", d => y(d.data[0])) .attr("height", y.bandwidth()) .attr("width", d => x(d[1]) - x(d[0])) .append("title") .text(d => { const year = d.data[0]; const ageGroupData = d.data[1].get(d.key); const count = ageGroupData ? ageGroupData.count : 0; return `${year} ${d.key}\n${formatValue(count)}`; }); } // Append the horizontal axis. svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(width / 100, "s")) .call(g => g.selectAll(".domain").remove()); // Append the vertical axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()); // Return the chart with the color scale as a property (for the legend). return Object.assign(svg.node(), {scales: {color}}); }52:Td5f,fun1 = ()=> { const width = 700; const height = width+130; const margin = ({top: width/10, right: width/10, bottom: width/5, left: width/5}); const squareSize = 50; const xRange = [margin.left, margin.left + squareSize * years.length+16]; const yRange = [height - margin.bottom+20, height - margin.bottom - squareSize * months.length]; const x = d3.scaleBand() .domain(years) .range(xRange) .padding(0.03); const y = d3.scaleBand() .domain(months) .range(yRange) .padding(0.03); const color = d3.scaleSequential() .domain([0,max_value]) .interpolator(d3.interpolateYlOrBr) const xAxis = g => g .attr("transform", `translate(0, ${height - margin.bottom+25})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .style("text-anchor", "start") .style("font-size", "16px") .attr("dx", "-.8em") .attr("dy", ".8em") const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).ticks(null, "s")) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .style("font-size", "14px") .text(d => d) const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("font", "1rem verdana"); const make_class = (item) => item.toLowerCase().split(' ').join('_').split('-').join('') const make_id = d => `coords_${Math.floor(x(d.xval))}_${Math.floor(y(d.yval))}` const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("text-align", "center") .style("padding", "8px") .style("font", "12px sans-serif") .style("background", "lightsteelblue") .style("border", "0px") .style("border-radius", "8px") .style("pointer-events", "none"); const rects = svg.append("g") .selectAll("g") .data(monthData) .enter().append("g") .attr("class", (d, i) => `${i} bar`) .selectAll("g") .data(d => { const innerData = []; for (const month in d) { if (month !== "index") { innerData.push({ xval: d.index, yval: month, count: d[month] }); } } console.log(innerData) return innerData; }) .enter().append("g"); rects.append("rect") .attr("x", d => x(d.xval)) .attr("y", d => y(d.yval)) .attr("width", squareSize) .attr("height", squareSize) .style("fill", d => d.count === 0 ? "lightgray" : color(d.count)) .on("mouseover", function(event, d) { tooltip.transition() .duration(200) .style("opacity", 0.9); tooltip.html(`${d.yval}
${d.xval}
Shootings: ${d.count}`) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); d3.select(this) .style("stroke", "white") .style("stroke-width", 4); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); d3.select(this).style("stroke", "none"); }) ; svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }53:Td7f,fun2 = ()=>{ const width = 700; const height = width+ 130; const margin = ({top: width/10, right: width/10, bottom: width/5, left: width/5-50}); const max_value = 61 const squareSize = 50; const xRange = [margin.left, margin.left + squareSize * years.length+16]; const yRange = [height - margin.bottom+20, height - margin.bottom - squareSize * months.length]; const x = d3.scaleBand() .domain(years) .range(xRange) .padding(0.03); const y = d3.scaleBand() .domain(months) .range(yRange) .padding(0.03); const color = d3.scaleSequential() .domain([max_value, -max_value]) .interpolator(d3.interpolatePiYG) const xAxis = g => g .attr("transform", `translate(0, ${height - margin.bottom+25})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .style("text-anchor", "start") .style("font-size", "16px") .attr("dx", "-.8em") .attr("dy", ".8em") const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).ticks(null, "s")) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .style("font-size", "14px") .text(d => d) const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("font", "1rem verdana"); const make_class = (item) => item.toLowerCase().split(' ').join('_').split('-').join('') const make_id = d => `coords_${Math.floor(x(d.xval))}_${Math.floor(y(d.yval))}` const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("text-align", "center") .style("padding", "8px") .style("font", "12px sans-serif") .style("background", "lightsteelblue") .style("border", "0px") .style("border-radius", "8px") .style("pointer-events", "none"); const rects = svg.append("g") .selectAll("g") .data(month_Changes) .enter().append("g") .attr("class", (d, i) => `${i} bar`) .selectAll("g") .data(d => { const innerData = []; for (const month in d) { if (month !== "index") { innerData.push({ xval: d.index, yval: month, count: d[month] }); } } console.log(innerData) return innerData; }) .enter().append("g"); rects.append("rect") .attr("x", d => x(d.xval)) .attr("y", d => y(d.yval)) .attr("width", squareSize) .attr("height", squareSize) .style("fill", d => d.count === 0 ? "lightgray" : color(d.count)) .on("mouseover", function(event, d) { tooltip.transition() .duration(200) .style("opacity", 0.9); tooltip.html(`${d.yval}
${d.xval}
Changes: ${d.count}`) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); d3.select(this) .style("stroke", "white") .style("stroke-width", 4); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); d3.select(this).style("stroke", "none"); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }54:Tdae,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/calendar-view function Calendar(data, { x = ([x]) => x, y = ([, y]) => y, title, width = 928, cellSize = 17, weekday = "monday", formatDay = i => "SMTWTFS"[i], formatMonth = "%b", yFormat, colors = d3.interpolateYlOrBr } = {}) { const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); const countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7; const timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday; const weekDays = weekday === "weekday" ? 5 : 7; const height = cellSize * (weekDays + 2); const max = d3.quantile(Y, 0.9975, Math.abs); const color = d3.scaleSequential([0,max], colors).unknown("none"); formatMonth = d3.utcFormat(formatMonth); if (title === undefined) { const formatDate = d3.utcFormat("%B %-d, %Y"); const formatValue = color.tickFormat(100, yFormat); title = i => `${formatDate(X[i])}\n${formatValue(Y[i])}`; } else if (title !== null) { const T = d3.map(data, title); title = i => T[i]; } const years = d3.groups(I, i => X[i].getUTCFullYear()).reverse(); function pathMonth(t) { const d = Math.max(0, Math.min(weekDays, countDay(t.getUTCDay()))); const w = timeWeek.count(d3.utcYear(t), t); return `${d === 0 ? `M${w * cellSize},0` : d === weekDays ? `M${(w + 1) * cellSize},0` : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${weekDays * cellSize}`; } const svg = d3.create("svg") .attr("width", width) .attr("height", height * years.length) .attr("viewBox", [0, 0, width, height * years.length]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg.selectAll("g") .data(years) .join("g") .attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`); year.append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7)) .join("text") .attr("x", -5) .attr("y", i => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); const cell = year.append("g") .selectAll("rect") .data(weekday === "weekday" ? ([, I]) => I.filter(i => ![0, 6].includes(X[i].getUTCDay())) : ([, I]) => I) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", i => timeWeek.count(d3.utcYear(X[i]), X[i]) * cellSize + 0.5) .attr("y", i => countDay(X[i].getUTCDay()) * cellSize + 0.5) .attr("fill", i => color(Y[i])); if (title) cell.append("title") .text(title); const month = year.append("g") .selectAll("g") .data(([, I]) => d3.utcMonths(d3.utcMonth(X[I[0]]), X[I[I.length - 1]])) .join("g"); month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return Object.assign(svg.node(), {scales: {color}}); } 55:Tda7,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/calendar-view function Calendar1(data, { x = ([x]) => x, y = ([, y]) => y, title, width = 928, cellSize = 17, weekday = "monday", formatDay = i => "SMTWTFS"[i], formatMonth = "%b", yFormat, colors = d3.interpolatePiYG } = {}) { const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); const countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7; const timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday; const weekDays = weekday === "weekday" ? 5 : 7; const height = cellSize * (weekDays + 2); const max = d3.quantile(Y, 0.9975, Math.abs); const color = d3.scaleSequential([max,-max], colors).unknown("none"); formatMonth = d3.utcFormat(formatMonth); if (title === undefined) { const formatDate = d3.utcFormat("%B %-d, %Y"); const formatValue = color.tickFormat(100, yFormat); title = i => `${formatDate(X[i])}\n${formatValue(Y[i])}`; } else if (title !== null) { const T = d3.map(data, title); title = i => T[i]; } const years = d3.groups(I, i => X[i].getUTCFullYear()).reverse(); function pathMonth(t) { const d = Math.max(0, Math.min(weekDays, countDay(t.getUTCDay()))); const w = timeWeek.count(d3.utcYear(t), t); return `${d === 0 ? `M${w * cellSize},0` : d === weekDays ? `M${(w + 1) * cellSize},0` : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${weekDays * cellSize}`; } const svg = d3.create("svg") .attr("width", width) .attr("height", height * years.length) .attr("viewBox", [0, 0, width, height * years.length]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg.selectAll("g") .data(years) .join("g") .attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`); year.append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7)) .join("text") .attr("x", -5) .attr("y", i => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); const cell = year.append("g") .selectAll("rect") .data(weekday === "weekday" ? ([, I]) => I.filter(i => ![0, 6].includes(X[i].getUTCDay())) : ([, I]) => I) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", i => timeWeek.count(d3.utcYear(X[i]), X[i]) * cellSize + 0.5) .attr("y", i => countDay(X[i].getUTCDay()) * cellSize + 0.5) .attr("fill", i => color(Y[i])); if (title) cell.append("title") .text(title); const month = year.append("g") .selectAll("g") .data(([, I]) => d3.utcMonths(d3.utcMonth(X[I[0]]), X[I[I.length - 1]])) .join("g"); month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return Object.assign(svg.node(), {scales: {color}}); } 56:T555,{ const cameraUsageCounts = { 'With Camera': shootings.filter(d => d.body_camera).length, 'Without Camera': shootings.filter(d => !d.body_camera).length }; const pieData = d3.pie().value(d => d[1])(Object.entries(cameraUsageCounts)); const total = d3.sum(pieData, d => d.value); const pieWidth = 30; const pieHeight = 30; const pieRadius = Math.min(pieWidth, pieHeight) / 2; const arcGenerator = d3.arc().innerRadius(0).outerRadius(pieRadius - 10); const color = d3.scaleOrdinal(d3.schemeCategory10); const svg = d3.create("svg") .attr("viewBox", [0, 0, pieWidth, pieHeight]); const pieSvg = svg.append("g") .attr("transform", `translate(${pieWidth / 2},${pieHeight / 2})`); pieSvg.selectAll("path") .data(pieData) .enter() .append("path") .attr("d", arcGenerator) .attr("fill", d => color(d.data[0])); pieSvg.selectAll("text") .data(pieData) .enter() .append("text") .attr("transform", d => { const centroid = arcGenerator.centroid(d); return `translate(${centroid[0]}, ${centroid[1]})`; }) .attr("dy", "0.35em") .attr("text-anchor", "middle") .style("font-size", "0.5px") .text(d => { const percentage = (d.value / total * 100).toFixed(1); return `${d.data[0]}(${percentage}%)`; }); return svg.node(); }57:T6cb,{ const outcomeCounts = d3.rollups(shootings, v => v.length, d => d.body_camera, d => d.manner_of_death); const cameraStatus = (camera) => camera ? "With Camera" : "Without Camera"; const barWidth = 800; const barHeight = 400; const barMargin = { top: 20, right: 180, bottom: 40, left: 180 }; const x = d3.scaleLinear().domain([0, d3.max(outcomeCounts, d => d3.max(d[1], g => g[1]))]).range([barMargin.left, barWidth - barMargin.right]); const y = d3.scaleBand() .domain(outcomeCounts.flatMap(d => d[1].map(g => `${cameraStatus(d[0])}: ${g[0]}`))) .range([barMargin.top, barHeight - barMargin.bottom]) .padding(0.1); const barSvg = d3.create("svg") .attr("viewBox", [0, 0, barWidth, barHeight]); barSvg.append("g") .selectAll("rect") .data(outcomeCounts.flatMap(d => d[1].map(g => ({ key: `${cameraStatus(d[0])}: ${g[0]}`, value: g[1] })))) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.key)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()) .attr("fill", "steelblue"); barSvg.append("g") .attr("fill", "#000") .selectAll("text") .data(outcomeCounts.flatMap(d => d[1].map(g => ({ key: `${cameraStatus(d[0])}: ${g[0]}`, value: g[1] })))) .join("text") .attr("x", d => x(d.value) + 3) .attr("y", d => y(d.key) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d.value) .attr("font-size", "15px"); barSvg.append("g") .attr("transform", `translate(0,${barHeight - barMargin.bottom})`) .call(d3.axisBottom(x).ticks(null, "s")); barSvg.append("g") .attr("transform", `translate(${barMargin.left},0)`) .call(d3.axisLeft(y)); return barSvg.node(); }58:T5a9,The bar chart provides an insight of police shooting incidents, differentiating cases based on whether or not a body camera was in use and if the individual was shot or shot and tasered. The tallest bar, "Without Camera: shot," indicates that a majority of incidents occurred without body camera footage, with a count of 4105 cases. The bar "With Camera: shot" shows that 542 incidents were recorded where body cameras were in use. The smallest categories are "Without Camera: shot and Tasered" with 212 incidents and "With Camera: shot and Tasered" with 36 incidents, suggesting that the combined use of a firearm and a taser is less frequent. The data presented in the bar chart does indeed suggest that the use of body cameras does not significantly affect the use of tasers in conjunction with firearms. The comparison between the "With Camera" and "Without Camera" categories for both "shot" and "shot and Tasered" incidents shows that the number of shootings where a taser was also used is relatively low in both scenarios. If body cameras were influencing the use of less-lethal options such as tasers, we might expect a higher proportion of "With Camera: shot and Tasered" incidents. However, the data does not show a marked increase in taser use when body cameras are present. This could indicate that the decision to deploy a taser is influenced more by situational factors or departmental policies than by the presence of a body camera.59:[{"id":"25381f474ffc101eb1623705032274291b07984b3acc8fbf7835632a9643d80da965e4c45598e585177c3cd58187d94ee6fe7214aa4cf77f88846a67e8fd3d6e","href":"https://static.observableusercontent.com/files/25381f474ffc101eb1623705032274291b07984b3acc8fbf7835632a9643d80da965e4c45598e585177c3cd58187d94ee6fe7214aa4cf77f88846a67e8fd3d6e","name":"shootings.csv","type":"text/csv","lastModified":1702531378079.429,"size":527909}] 29:{"id":"cf2b269942a7068e","slug":null,"title":"Group Project: Proposal","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-12-14T05:22:58.079Z","update_time":"$D2023-12-14T05:24:57.369Z","view_time":null,"first_public_time":"$D2023-12-14T05:22:58.079Z","has_unpublished_edits":null,"fork":{"id":"c1ba66db2760b83e","slug":"group-project-us-shootings","title":"Group Project: Proposal","owner":{"id":"7d51446c4bf655e5","login":"can-wang-ws","name":"Can Wang's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"363a29857ee7dfb0","login":"rui-wang-ws","name":"Rui Wang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8381a4687c875a4b4c0743dde4a71ab070ee2edb7baff937e9ade98623cde4a4","tier":"starter_2024","bio":"","following":false},"version":968,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"36f446ec46587b65","login":"rui-wang","name":"Rui Wang","avatar_url":"https://avatars-next.observableusercontent.com/c475e3c91a661a5df9ce542adbf50d0183ef95b3cca2d9eaa5b7b48bd9d3ccbb","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"36f446ec46587b65","login":"rui-wang","name":"Rui Wang","avatar_url":"https://avatars-next.observableusercontent.com/c475e3c91a661a5df9ce542adbf50d0183ef95b3cca2d9eaa5b7b48bd9d3ccbb","tier":null,"role":"editor"},{"type":"team","id":"363a29857ee7dfb0","login":"rui-wang-ws","name":"Rui Wang's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/8381a4687c875a4b4c0743dde4a71ab070ee2edb7baff937e9ade98623cde4a4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Group Project: Proposal","cells":[{"id":0,"value":"md`# Group Project: Proposal\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"# US Police Shootings Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"=> Can Wang, Rui Wang, Cecilia Jin\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"The dataset for this project is sourced from Kaggle and contains detailed records of police shootings in the United States. The dataset includes fundamental personal information of the individuals shot, including their name, age, gender, and race, along with specifics of the shooting incident such as the date, location, method of death, whether the individual was armed, and other contextual details (e.g., mental illness, police body camera usage, whether the individual attempted to flee). Each record also categorizes the type of weapon used by the individual shot, if any. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"shootings = await FileAttachment(\"shootings.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"shootings","database":"$undefined"},{"id":32,"value":"md`## Questions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"### Question 1 \n\nWhat are the characteristics of individuals shot by police? What is the age distribution, gender distribution, and racial distribution of these individuals? Were they carrying weapons? \n\n### Question 2 \n\nWhich regions have higher occurrence of shooting? Identify the top 10 cities that have the highest shooting records. \n\n### Question 3\n\nAre there discernible trends over the five years between 2015-2020 that sugguest changes in the frequency of police shootings? Do police shootings happen more often in certain months of the year or on specific days of the week?\n\n### Question 4\n\nWhat is the prevalence of body camera usage in these incidents recorded, and does it affect the outcomes?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"# Q1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"data = FileAttachment(\"shootings.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"shots = data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"## Characteristics of shot individuals\ndata fields we are working on \n1. armed\n \ngun, knife, unknown, unarmed, toy weapon, vehicle, machete, Taser, sword, ax ....\n\ndata aggregration ? ---->\n\narmed, unarmed, unknown\n\ngun, knife, melee weapons, unarmed\n\ntoy weapon ??","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":801,"value":"select distinct armed, count(*) as number\nfrom shots\ngroup by armed\norder by number desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"var:shots"},{"id":803,"value":"yearStr = year.toString() + \"%\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"select distinct gender, count(*) as number\nfrom shots where date like ${yearStr}\ngroup by gender\norder by number desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"GenderYear","database":"var:shots"},{"id":813,"value":"select distinct race as name, count(*) as value\nfrom shots where date like ${yearStr}\ngroup by race\norder by value desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"RaceYear","database":"var:shots"},{"id":844,"value":"SELECT ' <18' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age < 18 AND date LIKE ${yearStr}\n \nUNION\n \nSELECT '18-24' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age >= 18 AND age <= 24 AND date LIKE ${yearStr}\n \nUNION\n \nSELECT '25-34' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age >= 25 AND age <= 34 AND date LIKE ${yearStr}\n \nUNION\n \nSELECT '35-44' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age >= 35 AND age <= 44 AND date LIKE ${yearStr}\n \nUNION\nSELECT '45-54' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age >= 45 AND age <= 54 AND date LIKE ${yearStr}\n \nUNION\nSELECT '55-64' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age >= 55 AND age <= 64 AND date LIKE ${yearStr}\n\nUNION\nSELECT '>64' AS age_range, COUNT(id) AS number\nFROM shots\nWHERE age >= 65 AND date LIKE ${yearStr}\n\nORDER BY age_range","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"AgeYear","database":"var:shots"},{"id":817,"value":"AgeYear","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"select distinct signs_of_mental_illness, count(*) as number\nfrom shots where date like ${yearStr}\ngroup by signs_of_mental_illness \norder by number desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"MentalYear","database":"var:shots"},{"id":821,"value":"select distinct body_camera, count(*) as number\nfrom shots where date like ${yearStr}\ngroup by body_camera \norder by number desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"CameraYear","database":"var:shots"},{"id":825,"value":"select distinct threat_level as name, count(*) as value\nfrom shots where date like ${yearStr}\ngroup by threat_level\norder by value desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"ThreatYear","database":"var:shots"},{"id":828,"value":"select distinct flee as name, count(*) as value\nfrom shots where date like ${yearStr}\ngroup by flee\norder by value desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"FleeYear","database":"var:shots"},{"id":831,"value":"select distinct arms_category as name, count(*) as value\nfrom shots where date like ${yearStr}\ngroup by arms_category\norder by value desc","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"ArmsYear","database":"var:shots"},{"id":871,"value":"// turn countryScale into a scalePoint\nageScaleBand = d3.scaleBand()\n .domain(age_ranges)\n // changed from [0, visHeight] to [0, visWidth]\n .range([0, 200])\n .padding(0.2)\n// turn countryScale into a scalePoint\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"// turn countryScale into a scalePoint\nage_range_scale = d3.scalePoint()\n .domain(age_ranges)\n // changed from [0, visHeight] to [0, visWidth]\n .range([0, 100])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"ageScale = d3.scaleLinear()\n .domain([0, d3.max(AgeYear, d=> d.number)])\n .nice() // make the domain start and end on round values\n // changed from [0, visWidth] to [visHeight, 0]\n .range([100, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"// changed populationScale to countryScale\nxAxis = d3.axisBottom(age_range_scale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"// changed countryScale to populationScale\nyAxis = d3.axisLeft(ageScale).tickFormat(d3.format('~s'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"# Dashboard by Year\ndrag to view data of a specific year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":807,"value":"viewof year = slider({max:years[years.length-1],min:years[0], step:1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":901,"value":"# Q2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":903,"value":"top10Cities = {\n const cityCounts = d3.rollup(shootings, v => v.length, d => d.city);\n \n const sortedCities = Array.from(cityCounts).sort((a, b) => d3.descending(a[1], b[1]));\n \n const top10Cities = sortedCities.slice(0, 10);\n \n return top10Cities;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"The bar chart visualizes the top 10 cities in terms of police shooting incidents. The horizontal axis represents the number of shootings, while the vertical axis lists the cities. Each bar's length correlates to the number of shootings in that city, providing a clear visual representation of the relative frequency of these incidents across different locations. The addition of numerical labels at the end of each bar further quantifies the data, making it easy to discern the exact number of incidents in each city. Los Angeles leads with 78 shootings, followed by Phoenix with 66, and Houston with 51, indicating a higher prevalence of such incidents in these larger cities.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":914,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"This map provides a spatial representation of police shooting incidents in the top 10 cities across the United States. Each city is marked with a circle, the color intensity of which is determined by the number of shootings, represented through a blue sequential color scale. Darker shades indicate a higher frequency of incidents, providing an immediate visual cue to the areas with the most severe occurrence. Interactive tooltips appear upon hovering over each circle, displaying the city's name and its exact count of shootings. The visual data presented in the map indicates a trend where Southern cities appear to have a higher incidence of police shootings. While this pattern is visually evident, it is important to consider additional factors such as city population, regional law enforcement policies, and socio-economic conditions that could influence these results.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":918,"value":"sortedStates = {\n const stateCounts = d3.rollup(shootings, v => v.length, d => d.state);\n const sortedStates = Array.from(stateCounts).sort((a, b) => d3.descending(a[1], b[1]));\n return sortedStates;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"minMaxRate = d3.extent(sortedStates, d => d[1]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"color = d3.scaleSequential()\n .domain(minMaxRate)\n .interpolator(d3.interpolateBlues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"legend({\n color: color,\n title: '# of shootings'\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":791,"value":"# Q3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":789,"value":"import {Legend,legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"data_days = d3.rollups(\n data, \n group => group.length,\n d => new Date(d.date)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"daily_changes = {let result = [];\n\nfor (let i = 0; i < data_days.length; i++) {\n if (i === 0) {\n // For the first day, the change is 0\n result.push([data_days[i][0], 0]);\n } else {\n // For subsequent days, calculate the change from the previous day\n let change = data_days[i][1] - data_days[i - 1][1];\n result.push([data_days[i][0], change]);\n }\n}\n\nreturn result \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"data_month = d3.rollups(\n data, \n group => group.length,\n d => d.date.substring(0,7)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"data_year = d3.rollups(\n data, \n group => group.length,\n d => d.date.substring(0,4)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"years = d3.map(data_year, d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"year_gender = {\n \ndata.forEach(d => d.year = d.date.split('-')[0]);\n\nconst countByYearRace = {};\ndata.forEach(d => {\n const key = d.year + \"_\" + d.gender;\n if (!countByYearRace[key]) {\n countByYearRace[key] = { year: d.year, gender: d.gender, count: 0 };\n }\n countByYearRace[key].count += 1;\n});\n\n\nlet result = Object.values(countByYearRace);\n\nresult = result.sort((a, b) => {\n if (a.year === b.year) {\n return a.gender.localeCompare(b.gender);\n }\n return a.year.localeCompare(b.year);\n});\n\n return result\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"year_race = {\n \ndata.forEach(d => d.year = d.date.split('-')[0]);\n\nconst countByYearRace = {};\ndata.forEach(d => {\n const key = d.year + \"_\" + d.race;\n if (!countByYearRace[key]) {\n countByYearRace[key] = { year: d.year, race: d.race, count: 0 };\n }\n countByYearRace[key].count += 1;\n});\n\n\nlet result = Object.values(countByYearRace);\n\nresult = result.sort((a, b) => {\n if (a.year === b.year) {\n return a.race.localeCompare(b.race);\n }\n return a.year.localeCompare(b.year);\n});\n\n return result\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"year_state = d3.rollup(data, v => v.length, d => d.state);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"year_age_missing = year_age.map(item => {\n // Check if the year is 2020\n if (item.year === \"2020\") {\n return { ...item, count: item.count * 2 };\n }\n return item;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"year_race_missing = year_race.map(item => {\n // Check if the year is 2020\n if (item.year === \"2020\") {\n return { ...item, count: item.count * 2 };\n }\n return item;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"series_age ={// \nconst ageGroups = Array.from(new Set(year_age.map(d => d.ageGroup)));\n\n\nconst dataByYear = Array.from(d3.group(year_age, d => d.year), ([year, values]) => {\n const yearData = { year };\n ageGroups.forEach(ageGroup => {\n yearData[ageGroup] = values.filter(v => v.ageGroup === ageGroup).reduce((sum, v) => sum + v.count, 0);\n });\n return yearData;\n});\n\nconst series_age = d3.stack()\n .keys(ageGroups)\n .value((d, key) => d[key])\n (dataByYear);\n\nseries_age.forEach(layer => {\n layer.forEach(segment => {\n const year = segment.data.year;\n const ageData = year_age.find(d => d.year === year && d.ageGroup === layer.key);\n segment.data = [year, new Map([[layer.key, ageData]])];\n });\n});\n\n\n return series_age\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"series_age_missing ={// \nconst ageGroups = Array.from(new Set(year_age_missing.map(d => d.ageGroup)));\n\n\nconst dataByYear = Array.from(d3.group(year_age_missing, d => d.year), ([year, values]) => {\n const yearData = { year };\n ageGroups.forEach(ageGroup => {\n yearData[ageGroup] = values.filter(v => v.ageGroup === ageGroup).reduce((sum, v) => sum + v.count, 0);\n });\n return yearData;\n});\n\nconst series_age = d3.stack()\n .keys(ageGroups)\n .value((d, key) => d[key])\n (dataByYear);\n\nseries_age.forEach(layer => {\n layer.forEach(segment => {\n const year = segment.data.year;\n const ageData = year_age_missing.find(d => d.year === year && d.ageGroup === layer.key);\n segment.data = [year, new Map([[layer.key, ageData]])];\n });\n});\n\n\n return series_age\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"series_race = d3.stack()\n .keys(d3.union(year_race.map(d => d.race))) // distinct series keys, in input order\n .value(([, D], key) => D.get(key).count) // get value for each series key and stack\n (d3.index(year_race, d => d.year, d => d.race)); // group by stack then series key","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"series_race_missing = d3.stack()\n .keys(d3.union(year_race_missing.map(d => d.race))) // distinct series keys, in input order\n .value(([, D], key) => D.get(key).count) // get value for each series key and stack\n (d3.index(year_race_missing, d => d.year, d => d.race)); // group by stack then series key","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"columns = [\"yes\", \"no\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"viewof missing = Inputs.radio(columns, {value: 'view_full', label: 'Deal with Missing Data'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"viewof view = Inputs.select([\"Age\", \"Race\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"{\nlet key;\nif(view==\"Race\"){\nreturn key = legend({color: chart.scales.color, title: \"Race\", })\n\n}\n\n\nif (view == \"Age\") {\n const ageColorScale = d3.scaleOrdinal()\n .domain([\"<= 12\", \"13-19\", \"20-29\", \"30-39\", \"40-54\", \"55-64\", \"65-69\", \">=70\"])\n .range(d3.schemeSpectral[8]); \n\n return legend({\n color: ageColorScale,\n title: \"Age Groups\",\n tickSize: 0\n });\n}\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"We only have data from 2015 to middle of June 2020. We could choose to double the value of 2020 to predict how was the data during entire year of 2020.\n\nFrom the stacked bar chart, we could see that from 2015 to 2020 the occurrence of shootings by police decreased gradually. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"typeof(years[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"months = \n{let months = [];\nfor (let i = 0; i < 12; i++) {\n let date = new Date(2020, i, 1); \n let month = date.toLocaleString('en-US', { month: 'long' });\n months.push(month);\n}\nreturn months}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"monthData = {let aggregatedData = [];\n\n\ndata.forEach(item => {\n let date = new Date(item.date);\n let year = date.getFullYear().toString();\n let month = date.toLocaleString('en-US', { month: 'long' });\n\n let yearData = aggregatedData.find(y => y.index === year);\n if (!yearData) {\n yearData = { index: year };\n months.forEach(m => yearData[m] = 0);\n aggregatedData.push(yearData);\n }\n\n yearData[month]++;\n});\n\n\nreturn aggregatedData\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"month_Changes = {let monthDataChanges = [];\n\nfor (let i = 0; i < monthData.length; i++) {\n let yearData = { index: monthData[i].index };\n for (let j = 0; j < months.length; j++) {\n const month = months[j];\n const previousMonth = j === 0 ? \"December\" : months[j - 1];\n const previousYear = j === 0 ? i - 1 : i;\n\n if (i === 0 && j === 0) {\n yearData[month] = 0;\n } else {\n const previousValue = previousYear >= 0 ? monthData[previousYear][previousMonth] : 0;\n const change = monthData[i][month] - previousValue;\n \n yearData[month] = change;\n }\n }\n monthDataChanges.push(yearData);\n}\n\nreturn monthDataChanges;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"monthData[5].June = 38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"max_value = 106","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"max = 61","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$53","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"legend1 = ()=>{\n return Legend(d3.scaleSequential([0, max_value], d3.interpolateYlOrBr), {\n title: \"Shooting number\",\n})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"legend2 = ()=>{\n return Legend(d3.scaleSequential([max,-max], d3.interpolatePiYG), {\n title: \"Shooting number changes\",\n})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"From the graph below, we could see that shootings usually occurred in the starting months, the ending months and the middle months of a year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":363,"value":"{\n const ages = fun1();\n const barchart_gender = fun2()\n const legend_2 = legend2()\n const legend_1 = legend1();\n \nreturn html`\n\n

\n\n

\n ${legend_1}\n

\n ${legend_2}\n

\n\n

\n ${ages}\n

\n ${barchart_gender}\n

\n`;\n\n\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"$54","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"$55","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"Calendar(data_days, {\n x: d => d[0],\n y: d => d[1],\n weekday:\"sunday\",\n width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"Calendar1(daily_changes, {\n x: d => d[0],\n y: d => d[1],\n weekday:\"sunday\",\n width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"The heat map reveals that there are no discernible patterns or trends in the occurrence of shootings on specific days. But shootings do concentrate on certain months from December to March, and from June to August. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"# Q4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":929,"value":"$56","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"This pie chart offers a striking visual representation of the use of body cameras in police shooting incidents. The data, clearly divided into two segments, shows a vast majority of incidents, 88.2%, occurred without the use of body cameras, while only a small fraction, 11.8%, involved their use.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":933,"value":"$57","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"$58","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":939,"value":"# Summary \n\nThis project focuses on analyzing a dataset of police shootings in the United States. The aim is to understand the dynamics of these incidents, including characteristics of the individuals involved, regional distribution, trends over time, and the impact of body camera usage. \n\nBy visualizations, the project explores various aspects like age, gender, race, weapon use, and geographic distribution of shootings. It also examines patterns in the frequency of shootings over time and the prevalence of body camera usage during these incidents. This detailed analysis seeks to contribute to informed discussions for a safer, more equitable society.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W59","stdlib":"1"}} 24:null