2b:null 2c:["$","title",null,{"children":"Mass shootings in the US | Mattison Belardo | Observable"}] 31:Ta4e,map = { let w = width < 900 ? width : 900; let h = 0.625 * w; let div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`); let svg = div.append("svg").attr("width", w).attr("height", h); let map = svg.append("g"); let projection = d3.geoAlbersUsa().fitSize([w - 10, h], stateShapes); let path = d3.geoPath().projection(projection); map .append("path") .attr("d", path(stateShapes)) .attr("fill", "lightgray") .attr("stroke", "white") .attr("stroke-width", 1); // let filtered_data = data.filter( // (o) => o.latitude != "-" && extent[0] <= o.year && o.year <= extent[1] // ); // if (school_shootings) { // filtered_data = filtered_data.filter((o) => o.location == "school"); // } let refiltered_data = filtered_data.filter((o) => !isNaN(o.latitude)); map .selectAll("circle.incident") .data(refiltered_data) .join("circle") .attr("class", (o) => `incident year${o.year}`) .attr("cx", (o) => projection([o.longitude, o.latitude])[0]) .attr("cy", (o) => projection([o.longitude, o.latitude])[1]) .attr("r", (o) => Math.sqrt((o.fatalities * w) / 200)) .attr("fill", "#a00") .attr("stroke", "#600") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 0.5) .on("pointerenter", function () { d3.select(this) .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1); }) .on("pointerleave", function () { d3.select(this) .attr("stroke", "#600") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 0.5); }) .nodes() .forEach(function (c, i) { let this_incident = refiltered_data[i]; let content = `

${this_incident.case}

${this_incident.city}

${d3 .timeFormat("%b %_d, %Y")(this_incident.date) .replace(" ", " ")}

${this_incident.fatalities} fatalities

${this_incident.summary}

`; tippy(c, { content: content, allowHTML: true, theme: "light-border" }); }); svg.call( d3 .zoom() .extent([ [0, 0], [w, h] ]) .translateExtent([ [0, 0], [w, h] ]) .scaleExtent([1, 6]) .duration(500) .on("zoom", function (evt) { map.attr("transform", evt.transform); }) ); return div.node(); }32:Td4f,yearly_bar_chart = { let filtered_data = data; if (school_shootings) { filtered_data = filtered_data.filter((o) => o.location == "school"); } let plot; if (width < 750) { plot = Plot.plot({ width: width, y: { domain: d3.range(1982, 2024).reverse(), tickFormat: (y) => `'${y.toString().slice(2)}` }, x: { grid: true }, marks: [ Plot.barX( filtered_data, Plot.groupY( { x: "count" }, { y: "year", fill: (o) => extent[0] <= o.year && o.year <= extent[1] ? "rgba(200,0,0,1)" : "rgba(200,0,0,0.2)", opacity: function (o, i) { return 0.5; }, stroke: "#400", strokeWidth: 1, title: (o) => o.year } ) ), Plot.ruleY([0]) ] }); } else { plot = Plot.plot({ width: width, x: { domain: d3.range(1982, 2024), tickFormat: (y) => `'${y.toString().slice(2)}` }, y: { grid: true }, marks: [ Plot.barY( filtered_data, Plot.groupX( { y: "count" }, { x: "year", fill: (o) => extent[0] <= o.year && o.year <= extent[1] ? "rgba(200,0,0,1)" : "rgba(200,0,0,0.2)", opacity: function (o, i) { return 0.5; }, stroke: "#400", strokeWidth: 1, title: (o) => o.year } ) ), Plot.ruleY([0]) ] }); } let nodes = d3 .select(plot) .selectAll("rect") .on("pointerenter", function (a, b) { let year = d3.select(this).attr("data-year"); if (extent[0] <= year && year <= extent[1]) { d3.select(this).attr("stroke-width", 3); } // d3.select(map).selectAll("circle").attr("opacity", 0); // d3.select(map).selectAll(`circle.year${year}`).attr("opacity", 0.5); }) .on("pointerleave", function () { d3.select(this).attr("stroke-width", 1); }) .nodes() .forEach(function (bar) { let year = d3.select(bar).select("title").text().slice(0, 4); d3.select(bar).attr("data-year", year); if (extent[0] <= year && year <= extent[1]) { let incidents = filtered_data.filter((o) => o.year == year); let total_fatalities = d3.sum(incidents.map((o) => o.fatalities)); let tippy_content = [ `

${incidents.length} incident${ incidents.length == 1 ? "" : "s" } with ${total_fatalities} total fatalities

${o.case} in ${o.city} with ${o.fatalities} fatalities

") .join(""); tippy(bar, { content: `${tippy_content}`, allowHTML: true, theme: "light-border", followCursor: true }); } }); d3.select(plot) // .on("pointerleave", function () { // d3.select(map).selectAll("circle").attr("opacity", 0.5); // }) .selectAll("rect") .select("title") .remove(); return plot; }33:T51f,data = { let data = d3.csvParse( await ( await ( await fetch( "https://docs.google.com/spreadsheets/d/e/2PACX-1vQBEbQoWMn_P81DuwmlQC0_jr2sJDzkkC0mvF6WLcM53ZYXi8RMfUlunvP1B5W0jRrJvH-wc-WGjDB1/pub?gid=0&single=true&output=csv" ) ).text() ).replace("location", "city") // Deal with the two "location" fields issue ); data.forEach(function (o) { o.location = o.location.trim().toLowerCase(); // Clean up the location field o.year = parseInt(o.year); o.fatalities = parseInt(o.fatalities); o.latitude = parseFloat(o.latitude); o.longitude = parseFloat(o.longitude); let date; date = d3.timeParse("%m/%d/%y")(o.date); if (date == null) { date = d3.timeParse("%m/%d/%Y")(o.date); } o.date = date; // I'm not sure what the update schedule for lat/lon data is, // so I'm manally setting a couple of the recent and most // publicized shootings if (date.getTime() == 1653364800000) { o.latitude = 29.1995881; o.longitude = -99.7903341; } else if (date.getTime() == 1652500800000) { o.latitude = 42.9097295; o.longitude = -78.855039; } }); data = d3.sort(data, (o) => o.fatalities); data.reverse(); data.extent = d3.extent(data.map((o) => o.year)); return data; }34:[] 2f:{"id":"ff77405216a96891","slug":null,"title":"Mass shootings in the US","thumbnail":"9eaada35b4fcda4376321be547fb02c7d7632514b7a22234d2a312ebd8388242","access_level":"public","create_time":"$D2023-03-29T21:34:50.045Z","update_time":"$D2023-03-29T21:34:50.045Z","view_time":null,"first_public_time":"$D2023-03-29T21:34:50.045Z","has_unpublished_edits":null,"fork":{"id":"4cd91c7d019bce3b","slug":"mass-shootings-in-the-us","title":"Mass shootings in the US","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1f53a26ef1def300","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":"starter_2024"},"version":693,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null}],"members":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mass shootings in the US","cells":[{"id":0,"value":"# Mass shootings in the US\n\nAccording to [Mother Jones' data](https://www.motherjones.com/politics/2012/12/mass-shootings-mother-jones-full-data/), there were ${filtered_data.length} mass shootings ${school_shootings ? 'at schools' : \"\"} with a total of ${d3.sum(filtered_data.map((o) => o.fatalities))} fatalities between ${extent[0]} and ${extent[1]}. The bubble map below shows the locations of these shootings and the area of each circle is proportional to the number of fatalities. You can hover over or touch the circles to get more information on each incident. You can also double click or scroll to zoom into the map to help distinguish between incidents. In addition, you can focus on just school shootings or filter by date range to limit the number of circles shown.\n\nThere's also a bar chart a little further below that illustrates the shootings as a timeline; the bar chart is also affected by the filters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"topmatter","database":"$undefined"},{"id":436,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof extent = interval(data.extent, {\n step: 1,\n value: data.extent,\n label: \"Date range:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewof school_shootings = Inputs.toggle({ label: \"School shootings:\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"### Comments\n\nThe data comes from [Mother Jones'](https://www.motherjones.com/) and is pulled directly from [their respository](https://www.motherjones.com/politics/2012/12/mass-shootings-mother-jones-full-data/) so this page should always reflect their most recent updates. You can read Mother Jones' criteria for inclusion on [their methodology page](https://www.motherjones.com/politics/2012/07/mass-shootings-map/).\n\nSome of the most recent incidents seem to be missing exact latitude and longitude fields; in particular, ${missing_locations.length>1 ? `${missing_locations.length} incidents don't` : \"one incident doesn't\" } appear on the map but ${missing_locations.length>1 ? \"they are\" : \"is\"} reflected in the bar chart and listed explicitly in the following table. Perhaps, some of the recent data is still being updated?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"comments","database":"$undefined"},{"id":519,"value":"missing_table = {\n let table = Inputs.table(missing_locations, {\n columns: [\"case\", \"city\", \"date\", \"fatalities\", \"summary\"],\n format: {\n date: (d) => d3.timeFormat(\"%b %e, %Y\")(d).replace(\" \", \" \"),\n summary: make_hoverable_link\n },\n width: { fatalities: 80, date: 110 }\n });\n\n d3.select(table).selectAll(\"input\").remove();\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"As impactful as mass shootings are, they actually account for only a tiny proportion of total gun deaths. According to [CDC data](https://www.cdc.gov/nchs/pressroom/sosmap/firearm_mortality/firearm.htm), for example, over 45,000 people were killed by gun violence in 2020 alone - far more than sum total of the killings represented by the data here. \n\nThe real question we should ask is - why does this happen *at all*?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"final_comment","database":"$undefined"},{"id":579,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":524,"value":"function make_hoverable_link(t) {\n let ht = d3\n .create(\"span\")\n .style(\"cursor\", \"pointer\")\n .style(\"color\", \"blue\")\n .style(\"text-decoration\", \"underline\")\n .text(\"Show\")\n .node();\n tippy(ht, { content: t, theme: \"light-border\" });\n return ht;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"missing_locations = d3\n .sort(\n data.filter((o) => isNaN(o.latitude)),\n (o) => o.date\n )\n .reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"filtered_data = {\n let filtered_data = data.filter(\n (o) => extent[0] <= o.year && o.year <= extent[1]\n );\n if (school_shootings) {\n filtered_data = filtered_data.filter((o) => o.location == \"school\");\n }\n return filtered_data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"import { stateShapes } from \"@observablehq/us-county-datasets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"import { interval } from \"@mootari/range-slider@1781\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"