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: "#000000" }),
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: "#000000"}),
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: "#000000"}),
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",
label: "Incarcerated Black Individuals",
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]))
import {slider,button,select,text,radio,checkbox,number} from "@jashkenas/inputs"
data2 = await FileAttachment("per_state_with_coordinates_modified.csv").csv();
temp = data2.map(d => d.year);
yearnames = [...new Set(temp)].sort();
// Get unique years from the data
years = Array.from(new Set(data.map(d => d.year))).sort();
// Create dropdown
viewof selectedYears = select({ options: yearnames });
plot3 = 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: "Black Inmate per White Inmate",
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: {
State: d => statemap.get(d.id.slice(0,2)).properties.name // Ensure statemap is defined before using it here
}
})),
Plot.geo(states, {stroke: "#000000"})
]
})
ratio = {
const yearData = data2.filter(d => d.year === selectedYears);
return new Map(yearData.map(d => [d.state, +d.black_to_white_incarceration_ratio]));
}
marylandData = data2.filter(d => d.state === "Maryland");
marylandRatioOverYears = marylandData.map(d => ({
year: d.year,
ratio: +d.black_to_white_incarceration_ratio
})).sort((a, b) => a.year - b.year);
Plot.barY(marylandRatioOverYears, {x: "year", y: "ratio", sort: {x: "-y"}}).plot()
marylandData2 = data2.filter(d => d.state === "Maryland");
marylandDataTransformed = [];
marylandData2.forEach(d => {
marylandDataTransformed.push({year: d.year, group: "Black", count: +d.incarcerated_black});
marylandDataTransformed.push({year: d.year, group: "White", count: +d.incarcerated_white});
});
Plot.plot({
marginLeft: 60,
marginRight: 60,
label: null,
x: {label: "Number of Inmates"},
y: {padding: 0, label: "Year"},
marks: [
Plot.barY(marylandDataTransformed, {y: "year", x: "count", fill: "group", inset: 0.5}),
Plot.ruleX([0])
]
})
console.log(marylandData2);
maryland_incarceration_data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
barchart = Plot.plot({
marginLeft: 60,
marginRight: 60,
label: null,
x: {label: "Frequency"},
y: {padding: 0},
color: {legend: true},
marks: [
Plot.barX(maryland_incarceration_data, {fy: "year", y: "race", x: "count", inset: 0.5, fill: d => d.race === "Black" ? "black" : "gray"}),
Plot.gridX({stroke: "white", strokeOpacity: 0.5}),
Plot.ruleX([0])
]
})
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.
