I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Aug 9, 2024
2 forks
16 stars
rows = 20
cut = 750
{
let table = Inputs.table(
d3.sort(Object.assign([], missing_locations), (o) => -o.date),
{
columns: ["case", "city", "date", "fatalities", "summary", "sources"],
format: {
date: (d) => d3.timeFormat("%b %e, %Y")(d).replace(" ", " "),
summary: make_hoverable_link,
sources: (d, i) =>
d
.split("; ")
.map((url) => `<a target="_blank" href="${url}">link</a>`)
},
width: { fatalities: 80, date: 110 }
}
);
d3.select(table).selectAll("input").remove();
return table;
}
missing_locations[0].date.getTime()
if (o.date.getTime() == ${missing_locations[0].date.getTime()}) {
o.latitude = ;
o.longitude = ;
} else
missing_locations = d3
.sort(
updated_mass_shooting_data.filter((o) => isNaN(o.latitude)),
(o) => o.date
)
.reverse()
updated_mass_shooting_data
.filter((o) => o.city.slice(0, 3) == "Hig")[0]
.date.getTime()
d3.group(updated_mass_shooting_data, (o) => o.city.split(", ")[1])
{
// 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;
}
updated_mass_shooting_data = {
if (get_data == 1) {
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;
});
data = d3.sort(data, (o) => o.date);
data.reverse();
return data;
}
}
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 = await FileAttachment("mother_jones_mass_shootingsJuly2024.csv").csv({
typed: true
});
data.extent = d3.extent(data.map((o) => o.year));
return data;
}
d3.sort(Array.from(d3.group(data, (o) => o.city).values()), (a) => -a.length)
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;
}
tippy_style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
tippy = require("tippy.js@6")
({
type: "FeatureCollection",
features: stateShapes.features.filter((o) => parseInt(o.id) <= 56)
})
stateShapes
import { stateShapes } from "@observablehq/us-county-datasets"
import { interval } from "@mootari/range-slider@1781"
_.uniq(data.map((o) => o.city.split(", ")[1]))
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.
