function make_hoverable_link(t) {
let ht = d3
.create("span")
.style("cursor", "pointer")
.style("color", "blue")
.style("text-decoration", "underline")
.text("Show")
.node();
tippy(ht, { content: t, theme: "light-border" });
return ht;
}
missing_locations = d3
.sort(
data.filter((o) => isNaN(o.latitude)),
(o) => o.date
)
.reverse()
filtered_data = {
let filtered_data = data.filter(
(o) => extent[0] <= o.year && o.year <= extent[1]
);
if (school_shootings) {
filtered_data = filtered_data.filter((o) => o.location == "school");
}
return filtered_data;
}
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;
}
tippy_style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
tippy = require("tippy.js@6")
import { stateShapes } from "@observablehq/us-county-datasets"
import { interval } from "@mootari/range-slider@1781"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
