Public
Edited
May 6
Animal_Shelter_Animals_20250505.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
top_species = d3.rollups(
animal_shelter,
v => v.length,
d => d.speciesname
)
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 10)
.map(d => d[0]) // just species names
getSeason = date => {
const month = date.getMonth(); // 0 = Jan
if (month === 11 || month < 2) return "Winter";
if (month < 5) return "Spring";
if (month < 8) return "Summer";
return "Fall";
}
seasonal_data = [
...animal_shelter
.filter(d => {
const date = new Date(d.intakedate);
return d.intakedate &&
top_species.includes(d.speciesname) &&
date.getFullYear() === selectedYear;
})
.map(d => ({
type: "Intake",
season: getSeason(new Date(d.intakedate)),
species: d.speciesname
})),
...animal_shelter
.filter(d => {
const intakeDate = new Date(d.intakedate);
const moveDate = new Date(d.movementdate);
return d.movementdate &&
top_species.includes(d.speciesname) &&
intakeDate.getFullYear() === selectedYear;
})
.map(d => ({
type: "Move Out",
season: getSeason(new Date(d.movementdate)),
species: d.speciesname
}))
]
seasonal_counts = d3.rollups(
seasonal_data,
v => v.length,
d => d.season,
d => d.type,
d => d.species
).flatMap(([season, types]) =>
types.flatMap(([type, speciesCounts]) =>
speciesCounts.map(([species, count]) => ({
season,
type,
species,
count
}))
)
)
viewof selectedYear = Inputs.select(
[...new Set(animal_shelter.map(d => new Date(d.intakedate).getFullYear()))].sort((a, b) => b - a),
{ label: "Filter by Intake Year", format: x => x.toString(), value: 2024 }
)
Plot.plot({
width: 800,
height: 500,
x: {
label: "Season",
domain: ["Winter", "Spring", "Summer", "Fall"]
},
y: {
label: "Number of Animals"
},
color: {
label: "Species",
legend: true
},
facet: {
data: seasonal_counts,
y: "type"
},
marks: [
Plot.barY(seasonal_counts, {
x: "season",
y: "count",
fill: "species"
})
]
})
import {select} from "@observablehq/inputs";
viewof characteristic = Inputs.select([
"Breed",
"Color",
"age_years"
], {
label: "Choose a characteristic"
})
processed = animal_shelter.map(d => {
let ageMatch = d.animalage?.match(/(\d+)\s+year/) || [];
let age_years = ageMatch.length > 1 ? parseInt(ageMatch[1]) : 0;
return {
Breed: d.breedname || "Unknown",
Color: d.basecolour || "Unknown",
age_years,
movementtype: d.movementtype || "Unknown"
};
});
{
const groupKey = characteristic;
const grouped = {};
for (let row of processed) {
const key = row[groupKey];
if (!grouped[key]) grouped[key] = { total: 0, adopted: 0 };
grouped[key].total++;
if (row.movementtype === "Adoption") grouped[key].adopted++;
}
const summary = Object.entries(grouped)
.map(([key, val]) => ({
[groupKey]: key,
adoption_rate: +(val.adopted * 100 / val.total).toFixed(2),
total: val.total
}))
.filter(d => d.total >= 10)
.sort((a, b) => b.adoption_rate - a.adoption_rate)
.slice(0, 20);
return Plot.plot({
x: { label: groupKey, tickRotate: -45 },
y: { label: "Adoption Rate (%)", domain: [0, 100] },
marks: [
Plot.barY(summary, { x: groupKey, y: "adoption_rate", tip: true })
],
height: 400,
width: 800
});
}
viewof pieFilterField = Inputs.select([
"speciesname",
"sexname",
"basecolour"
], {
label: "Filter movement type proportions by:",
value: "speciesname"
})
viewof pieFilterValue = Inputs.select(
Array.from(new Set(animal_shelter.map(d => d[pieFilterField] ?? "Unknown"))),
{
label: `Select a value from ${pieFilterField}`
}
)
{
const width = 600;
const height = 500;
const radius = Math.min(width, height) / 2 - 20;
const filtered = animal_shelter.filter(d => (d[pieFilterField] ?? "Unknown") === pieFilterValue);
const counts = {};
for (const d of filtered) {
const type = d.movementtype || "Unknown";
counts[type] = (counts[type] || 0) + 1;
}
const pieData = Object.entries(counts).map(([movementtype, count]) => ({
movementtype,
count
}));
const pie = d3.pie().value(d => d.count);
const arc = d3.arc().innerRadius(80).outerRadius(radius);
const arcs = pie(pieData);
const color = d3.scaleOrdinal()
.domain(pieData.map(d => d.movementtype))
.range(d3.schemeCategory10);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("font", "12px sans-serif");
// Draw pie
const g = svg.append("g")
.attr("transform", `translate(${radius + 20},${height / 2})`);
g.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.movementtype))
.attr("d", arc)
.append("title")
.text(d => `${d.data.movementtype}: ${d.data.count}`);
// Draw legend
const legend = svg.append("g")
.attr("transform", `translate(${radius * 2 + 60}, 40)`);
pieData.forEach((d, i) => {
const y = i * 20;
legend.append("rect")
.attr("x", 0)
.attr("y", y)
.attr("width", 12)
.attr("height", 12)
.attr("fill", color(d.movementtype));
legend.append("text")
.attr("x", 18)
.attr("y", y + 10)
.text(d.movementtype);
});
return svg.node();
}
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.
