31:Ta81,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 = d3.sort( filtered_data.filter((o) => !isNaN(o.latitude)), (o) => -o.fatalities ); 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) / 100)) .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], [3 * w, 3 * h] ]) .scaleExtent([1, 6]) .duration(500) .on("zoom", function (evt) { map.attr("transform", evt.transform); }) ); return div.node(); }32:Td61,yearly_bar_chart = { let filtered_data = data; if (school_shootings) { filtered_data = filtered_data.filter((o) => o.location == "school"); } let plot; if (width < cut) { 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: 1000, height: 500, 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:Tba3,{ // 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 updated_mass_shooting_data.forEach(function (o) { if (o.date.getTime() == 1684123200000) { o.latitude = 36.745903; o.longitude = -108.204246; } else if (o.date.getTime() == 1683345600000) { o.latitude = 33.1327; o.longitude = -96.6608; } else if (o.date.getTime() == 1654056000000) { o.latitude = 36.07001; o.longitude = -95.91986; } else if (o.date.getTime() == 1653364800000) { o.latitude = 29.199444; o.longitude = -99.788333; } else if (o.date.getTime() == 1654747200000) { o.latitude = 39.66956; o.longitude = -77.563032; } else if (o.date.getTime() == 1655352000000) { o.latitude = 33.46902; o.longitude = -86.73067; } else if (o.date.getTime() == 1656907200000) { o.latitude = 42.185; o.longitude = -87.801111; } else if (o.date.getTime() == 1658030400000) { o.latitude = 39.6329; o.longitude = -86.1205; } else if (o.date.getTime() == 1665633600000) { o.latitude = 35.811861; o.longitude = -78.534858; } else if (o.date.getTime() == 1668315600000) { o.latitude = 38.0395846; o.longitude = -78.5051731; } else if (o.date.getTime() == 1668834000000) { o.latitude = 38.8810244; o.longitude = -104.7610351; } else if (o.date.getTime() == 1652500800000) { o.latitude = 42.9097295; o.longitude = -78.855039; } else if (o.date.getTime() == 1681099200000) { o.latitude = 38.255697; o.longitude = -85.746228; } else if (o.date.getTime() == 1679889600000) { o.latitude = 36.093056; o.longitude = -86.825556; } else if (o.date.getTime() == 1676264400000) { o.latitude = 42.7018; o.longitude = -84.4822; } else if (o.date.getTime() == 1674450000000) { o.latitude = 37.458889; o.longitude = -122.436944; } else if (o.date.getTime() == 1674277200000) { o.latitude = 34.061944; o.longitude = -118.123611; } else if (o.date.getTime() == 1669093200000) { o.latitude = 36.772778; o.longitude = -76.248889; } else if (o.date.getTime() == 1688356800000) { o.latitude = 39.9386796; o.longitude = -75.2244999; } else if (o.date.getTime() == 1692763200000) { o.latitude = 33.68388; o.longitude = -117.6203624; } else if (o.date.getTime() == 1693022400000) { o.latitude = 30.349167; o.longitude = -81.696111; } else if (o.date.getTime() == 1698206400000) { o.latitude = 44.0900168; o.longitude = -70.1835889; } else if (o.date.getTime() == 1701838800000) { o.latitude = 36.10779; o.longitude = -115.14376; } else if (o.date.getTime() == 1718942400000) { o.latitude = 33.8138492; o.longitude = -92.4287282; } }); return updated_mass_shooting_data; }34:[{"id":"57ea804c5f9157c60f16bee94636f0f96a23a87c68b30a86fae0bea2dbb94ef07a25b08d540202458cf5269195956370c0f89a9f4c7ff1429b8be136ccf5c911","href":"https://static.observableusercontent.com/files/57ea804c5f9157c60f16bee94636f0f96a23a87c68b30a86fae0bea2dbb94ef07a25b08d540202458cf5269195956370c0f89a9f4c7ff1429b8be136ccf5c911","name":"mother_jones_mass_shootingsJuly2024.csv","type":"text/csv","lastModified":1723144322083.675,"size":179269},{"id":"fccf16bd52e3adc3f47b704ad11bac42d6e61e44f960283d3fd82bc3e61dba292f81c09cc4d03e85981b208a862a3636d700f9f350f209889513e61de45b9713","href":"https://static.observableusercontent.com/files/fccf16bd52e3adc3f47b704ad11bac42d6e61e44f960283d3fd82bc3e61dba292f81c09cc4d03e85981b208a862a3636d700f9f350f209889513e61de45b9713","name":"mass_shooting_data@12.csv","type":"text/csv","lastModified":1683547367539.3,"size":172532},{"id":"7e3b11fb765acb055f96240bb59cd4e5aae8974baa49fcb20538a00ceba9c793ab2246638537cc8ed6f92396b8f9856ae512ef4952126d6badf5d3e512bcf086","href":"https://static.observableusercontent.com/files/7e3b11fb765acb055f96240bb59cd4e5aae8974baa49fcb20538a00ceba9c793ab2246638537cc8ed6f92396b8f9856ae512ef4952126d6badf5d3e512bcf086","name":"mass_shooting_data_unmodified@1.csv","type":"text/csv","lastModified":1683311721268.387,"size":171512},{"id":"83fff86a4e575c7e49840d99f17adef0acaedb89d684076e7bb8852ed5b3bbfa357c867f0e119eb0988c2165a06b64f4ffa11de1bc25698a8e4ca885e01b246f","href":"https://static.observableusercontent.com/files/83fff86a4e575c7e49840d99f17adef0acaedb89d684076e7bb8852ed5b3bbfa357c867f0e119eb0988c2165a06b64f4ffa11de1bc25698a8e4ca885e01b246f","name":"mass_shooting_data@9.csv","type":"text/csv","lastModified":1683313805991.826,"size":171715},{"id":"f67044faf37e399074ab39248d19f729b195da94166535e77f8a7a23fbc5f116158bc2c2dce691dd89ac7df5fb8419fbca3e906a4b21a6b5cfe164574d51328f","href":"https://static.observableusercontent.com/files/f67044faf37e399074ab39248d19f729b195da94166535e77f8a7a23fbc5f116158bc2c2dce691dd89ac7df5fb8419fbca3e906a4b21a6b5cfe164574d51328f","name":"mass_shooting_data@10.csv","type":"text/csv","lastModified":1683316010579.453,"size":171711},{"id":"04b1e7c85cb3ffc64f0a84908225cba45d862d55a12ec162c2c9d427dfbe18f871116a399a5ef22ccf711f73645eae5004f87716c033e68db46aa513bb7df9b1","href":"https://static.observableusercontent.com/files/04b1e7c85cb3ffc64f0a84908225cba45d862d55a12ec162c2c9d427dfbe18f871116a399a5ef22ccf711f73645eae5004f87716c033e68db46aa513bb7df9b1","name":"mass_shooting_data@11.csv","type":"text/csv","lastModified":1683387102202.786,"size":171712},{"id":"9b012c658a86b2bd4b0a6a749a436e6a701527c8a4d095da2c324d745e6d03c1f705af65fb7132a22bd125b529022905ed23588fc076ea39beb4922a34597d96","href":"https://static.observableusercontent.com/files/9b012c658a86b2bd4b0a6a749a436e6a701527c8a4d095da2c324d745e6d03c1f705af65fb7132a22bd125b529022905ed23588fc076ea39beb4922a34597d96","name":"mass_shooting_data@13.csv","type":"text/csv","lastModified":1684329596598.505,"size":173518}] 2f:{"title":"Mass shootings in the US","cells":[{"id":0,"value":"# Mass shootings in the US","pinned":false,"hidden":false,"mode":"md"},{"id":1070,"value":"According 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. The data is viewable as a map, bar plot, or table.","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":351,"value":"viewof school_shootings = Inputs.toggle({ label: \"School shootings:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"table = {\n let table = Inputs.table(\n d3.sort(Object.assign([], data), (o) => -o.date),\n {\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 align: { date: \"center\", fatalities: \"center\", summary: \"center\" },\n rows: rows\n }\n );\n\n d3.select(table).selectAll(\"input\").remove();\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"rows = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":1059,"value":"cut = 750","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"## The data\n\nThe data comes from [Mother Jones' mass shooting respository](https://www.motherjones.com/politics/2012/12/mass-shootings-mother-jones-full-data/). You can read the criteria for inclusion on [their methodology page](https://www.motherjones.com/politics/2012/07/mass-shootings-map/).\n\nI originally set this up to read directly from the Mother Jones repository. That's a bit slow, though. In addition, it seems that the lat/lon data has not been included since the Buffalo supermarket on May 14, 2022. Now, I've got a process by which I download the data here, process it, and then upload that result as a file attachment.\n\nIn order to initiate that process, hit the \"`Get updated data`\" button exactly once:","pinned":false,"hidden":false,"mode":"md"},{"id":734,"value":"viewof get_data = Inputs.button(\"Get updated data\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"{\n let table = Inputs.table(\n d3.sort(Object.assign([], missing_locations), (o) => -o.date),\n {\n columns: [\"case\", \"city\", \"date\", \"fatalities\", \"summary\", \"sources\"],\n format: {\n date: (d) => d3.timeFormat(\"%b %e, %Y\")(d).replace(\" \", \" \"),\n summary: make_hoverable_link,\n sources: (d, i) =>\n d\n .split(\"; \")\n .map((url) => `link`)\n },\n width: { fatalities: 80, date: 110 }\n }\n );\n\n d3.select(table).selectAll(\"input\").remove();\n return table;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"missing_locations[0].date.getTime()","pinned":true,"hidden":false,"mode":"ojs"},{"id":947,"value":"The updated data should now appear in the `updated_data` variable below. That can be downloaded and then the `mass_shooting_data.csv` file can be replaced. \n\n*But*, it does seem that location data is no longer included so that the most recent lat/lons need to be included in the code below, if we want these included on the map. That's why the `updated_data` variable has a bunch of `if` statements adding that missing data. The next two cells facilitate the process of adding that missing data.","pinned":false,"hidden":false,"mode":"md"},{"id":764,"value":" if (o.date.getTime() == ${missing_locations[0].date.getTime()}) {\n o.latitude = ;\n o.longitude = ;\n } else ","pinned":true,"hidden":false,"mode":"md"},{"id":515,"value":"missing_locations = d3\n .sort(\n updated_mass_shooting_data.filter((o) => isNaN(o.latitude)),\n (o) => o.date\n )\n .reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"updated_mass_shooting_data\n .filter((o) => o.city.slice(0, 3) == \"Hig\")[0]\n .date.getTime()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1092,"value":"d3.group(updated_mass_shooting_data, (o) => o.city.split(\", \")[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"updated_mass_shooting_data = {\n if (get_data == 1) {\n let data = d3.csvParse(\n await (\n await (\n await fetch(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQBEbQoWMn_P81DuwmlQC0_jr2sJDzkkC0mvF6WLcM53ZYXi8RMfUlunvP1B5W0jRrJvH-wc-WGjDB1/pub?gid=0&single=true&output=csv\"\n )\n ).text()\n ).replace(\"location\", \"city\") // Deal with the two \"location\" fields issue\n );\n\n data.forEach(function (o) {\n o.location = o.location.trim().toLowerCase(); // Clean up the location field\n o.year = parseInt(o.year);\n o.fatalities = parseInt(o.fatalities);\n o.latitude = parseFloat(o.latitude);\n o.longitude = parseFloat(o.longitude);\n let date;\n date = d3.timeParse(\"%m/%d/%y\")(o.date);\n if (date == null) {\n date = d3.timeParse(\"%m/%d/%Y\")(o.date);\n }\n o.date = date;\n });\n data = d3.sort(data, (o) => o.date);\n data.reverse();\n\n return data;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"data = {\n let data = await FileAttachment(\"mother_jones_mass_shootingsJuly2024.csv\").csv({\n typed: true\n });\n data.extent = d3.extent(data.map((o) => o.year));\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1080,"value":"d3.sort(Array.from(d3.group(data, (o) => o.city).values()), (a) => -a.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":884,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1098,"value":"({\n type: \"FeatureCollection\",\n features: stateShapes.features.filter((o) => parseInt(o.id) <= 56)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1137,"value":"stateShapes","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"import { stateShapes } from \"@observablehq/us-county-datasets\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"import { interval } from \"@mootari/range-slider@1781\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"_.uniq(data.map((o) => o.city.split(\", \")[1]))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}