Mass Incarcerations in the US
import { Inputs } from "@observablehq/inputs";
import {range} from "@observablehq/inputs";
coordinates = per_state_with_coordinates
import {Plot} from "@observablehq/plot";
uniqueYears = Array.from(new Set(per_state_with_coordinates.map(d => +d.year)))
data = selectedYear === null ? per_state_with_coordinates : per_state_with_coordinates.filter(d => d.year === selectedYear)
plot = Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }),
Plot.dot(data, {
x: "longitude",
y: "latitude",
r: "incarcerated_total",
fill: "incarcerated_total",
}),
Plot.text(
data,
{
x: "longitude",
y: "latitude",
text: "state",
filter: (d => d.incarcerated_total > 50000),
fontSize: 12,
fontWeight: 600,
stroke: "white",
fill: "black",
textAnchor: "start",
dx: 15
}
),
],
color: {
type: "linear",
scheme: "Oranges",
legend: true,
range: [0, 2]
},
width: 802
})
plot1 = Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }),
Plot.dot(data, {
x: "longitude",
y: "latitude",
r: "incarcerated_black",
fill: "incarcerated_black",
}),
Plot.text(
data,
{
x: "longitude",
y: "latitude",
text: "state",
filter: (d => d.incarcerated_black > 20000),
fontSize: 12,
fontWeight: 600,
stroke: "white",
fill: "black",
textAnchor: "start",
dx: 15
}
),
],
color: {
type: "linear",
scheme: "Reds",
legend: true,
range: [0, 2]
},
width: 802
})
per_state_with_coordinates.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import {us} from "@observablehq/us-geographic-data"
nation = topojson.feature(us, us.objects.nation)
counties = topojson.feature(us, us.objects.counties)
states = topojson.feature(us, us.objects.states)
per_state_with_coordinates_modified.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
plot2 = {
return Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, {stroke: "#e2e2e2" }),
Plot.dot(df_with_ratio, {
x: "longitude",
y: "latitude",
r: "black_to_white_incarceration_ratio",
fill: "black_to_white_incarceration_ratio",
}),
Plot.text(
df_with_ratio,
{
x: "longitude",
y: "latitude",
text: "state",
filter: (d => d.black_to_white_incarceration_ratio > 2),
fontSize: 12,
fontWeight: 600,
stroke: "white",
fill: "black",
textAnchor: "start",
dx: 15
}
),
],
color: {
type: "linear",
scheme: "Reds",
legend: true,
range: [0, 10]
},
width: 802
})
}
import {Choropleth} from "@d3/choropleth"
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
statemap = new Map(states.features.map(d => [d.id, d]))
data2 = await FileAttachment("per_state_with_coordinates_modified.csv").csv();
years = Array.from(new Set(data2.map(d => d.year))).sort();
viewof selectedYears = html`<select>${years.map(year => html`<option>${year}</option>`)}</select>`;
updatePlot(year) {
// Filter data based on selected year
const yearData = data.filter(d => d.year === year);
// Update the ratio map with data for the selected year
ratio = new Map(yearData.map(d => [d.state, +d.black_to_white_incarceration_ratio]));
// Now update the plot (you would call your plot creation code here)
Plot.plot({
width: 975,
height: 610,
projection: "albers-usa",
color: {
type: "quantize",
n: 9,
domain: [0, 4], // Adjust this to match the range of your data
scheme: "Reds",
label: "Ratio",
legend: true
},
marks: [
Plot.geo(states, Plot.centroid({
fill: d => ratio.get(d.properties.name), // Adjusted to use the state name as the key
tip: true,
channels: {
County: d => d.properties.name,
State: d => statemap.get(d.id.slice(0,2)).properties.name // Ensure statemap is defined before using it here
}
})),
Plot.geo(states, {stroke: "#e2e2e2"})
]
})
// Add event listener to update the plot when the dropdown value changes
selectedYears.addEventListener('change', () => updatePlot(selectedYears.value));
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.
