Public
Edited
Mar 15, 2023
state_plot = Plot.plot({
grid: false,
margin: 40,
height: 800,
x: {
label: "Inflation adjusted per capita spending on policing →",
tickFormat: d3.format("$,.0f")
},
y: {
label: "↑ Percent of reported crimes cleared by law enforcement"
// tickFormat: d3.format(".0%"),
// ticks: 0
},
marks: [
Plot.line(state_data, {
x: "per_cap_spending",
y: state_rate,
curve: "catmull-rom"
}),
Plot.dot(state_data, {
x: "per_cap_spending",
y: state_rate,
fill: "currentColor",
title: (d) =>
`${d.year} \n
${dollar_format(
d.per_cap_spending
)} per capita spending (inflation adjusted) \n
${percent_format(d[state_rate])} clearance rate for ${state_rate_input}`
}),
Plot.text(state_data, {
filter: (d) => (d.year % 5 === 0) & ((d.year != 2010) & (d.year != 2005)),
x: "per_cap_spending",
y: state_rate,
text: (d) => `${d.year}`,
dy: -10,
dx: 17
}),
Plot.text(state_data.slice(36), {
x: "per_cap_spending",
y: state_rate,
text: ["2021"],
dy: -8,
dx: 17
}),
Plot.text(state_data.slice(20), {
x: "per_cap_spending",
y: state_rate,
text: ["2005"],
dy: -8,
dx: -22
}),
Plot.text(state_data.slice(25), {
x: "per_cap_spending",
y: state_rate,
text: ["2010"],
dy: -12,
dx: 0
}),
Plot.text(state_data.slice(29), {
x: "per_cap_spending",
y: state_rate,
text: ["2014"],
dy: -10,
dx: 16
}),
Plot.axisY({
tickFormat: d3.format(".0%"),
interval: 0.01
}),
Plot.text(state_data.slice(13), {
x: "per_cap_spending",
y: state_rate,
text: [text1],
dx: 250
}),
Plot.text(state_data.slice(13), {
x: "per_cap_spending",
y: state_rate,
text: [text2],
dx: 20,
dy: 500
})
]
})
state_data = FileAttachment(
"2023 - slightly cleaned state level data@3.csv"
).csv({ typed: true })
dollar_format = d3.format("$,.0f")
percent_format = d3.format(".0%")
import { Plot } from "@mkfreeman/plot-tooltip"
html`<style>svg { font-size: 14px !important }`
text2 = {
if (state_rate_input == "All Offenses") {
return "... while clearance rates have fallen ↓";
} else {
return "";
}
}
text1 = {
if (state_rate_input == "All Offenses") {
return "Per capita spending has increased... → ";
} else {
return "";
}
}
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.
