Published
Edited
Apr 5, 2022
outcomes_by_breed_chart = StackedHorizontalBarChart(dogs_outcomes_by_breed, {
x: d => d.count,
y: d => d.breed,
z: d => d.outcome,
yDomain: d3.groupSort(dogs_outcomes_by_breed, D => d3.sum(D, d => d.count), d => d.breed).slice(-20),
xLabel: "Count →",
zDomain: outcomes,
order: d3.stackOrderDescending,
width,
height: 700,
marginLeft: 130,
})
normalized_outcomes_by_breed_chart = NormalizedBarChart(dogs_outcomes_by_breed, {
x: d => d.count,
y: d => d.breed,
z: d => d.outcome,
yDomain: d3.groupSort(dogs_outcomes_by_breed, D => d3.sum(D, d => d.count), d => d.breed).slice(-20),
zDomain: outcomes,
order: d3.stackOrderDescending,
xLabel: "Percent →",
width,
marginLeft: 130,
})
outcomes_by_age_chart = StackedHorizontalBarChart(dogs_outcomes_by_age, {
x: d => d.count,
y: d => d.age,
z: d => d.outcome,
xLabel: "Count →",
zDomain: outcomes,
yDomain: ["<1", "1-3", "4-6", "7-10", ">10", "Unknown"],
order: d3.stackOrderDescending,
width,
height: 250,
marginLeft: 50,
})
normalized_outcomes_by_age_chart = NormalizedBarChart(dogs_outcomes_by_age, {
x: d => d.count,
y: d => d.age,
z: d => d.outcome,
zDomain: outcomes,
offset: d3.stackOffsetExpand,
yDomain: ["<1", "1-3", "4-6", "7-10", ">10", "Unknown"],
order: d3.stackOrderDescending,
width,
height: 250,
marginLeft: 50,
})
raw_data = loadSocrata(url)
dogs = raw_data.filter(animal => animal.animal_type == "Dog")
dogs_outcomes = dogs.reduce((acc, curr) => {
let obj = {};
obj.breed = curr.breed || "Unknown";
obj.age = curr.age_upon_outcome == "NULL" ? "Unknown" : (curr.age_upon_outcome || "Unknown");
obj.outcome = curr.outcome_type || "Unknown";
acc.push(obj);
return acc;
}, [])
outcomes = [...new Set(dogs_outcomes.map(item => item.outcome))]
dogs_outcomes_by_breed = dogs_outcomes.reduce((acc, curr) => {
let isElemExist = acc.findIndex(item => {
return item.breed === curr.breed && item.outcome === curr.outcome;
})
if (isElemExist === -1) {
let obj = {};
obj.breed = curr.breed;
obj.outcome = curr.outcome;
obj.count = 1;
acc.push(obj)
} else {
acc[isElemExist].count += 1
}
return acc;
}, [])
dogs_outcomes_by_age_grouped = dogs_outcomes.reduce((acc, curr) => {
let obj = {};
if (curr.age.includes("day") || curr.age.includes("week") || curr.age.includes("month") || curr.age == "0 years") {
obj.age = "<1"
}
else if (curr.age.includes("year")) {
var years = parseInt(curr.age.replace(/\D/g, ''));
if (1 <= years && years <= 3) {
obj.age = "1-3";
}
else if (4 <= years && years <= 6){
obj.age = "4-6";
}
else if (7 <= years && years <= 10) {
obj.age = "7-10";
}
else if (11 <= years) {
obj.age = ">10";
}
}
else {
obj.age = curr.age;
}
obj.outcome = curr.outcome;
acc.push(obj)
return acc;
}, [])
dogs_outcomes_by_age = dogs_outcomes_by_age_grouped.reduce((acc, curr) => {
let isElemExist = acc.findIndex(item => {
return item.age === curr.age && item.outcome === curr.outcome;
})
if (isElemExist === -1) {
let obj = {};
obj.age = curr.age;
obj.outcome = curr.outcome;
obj.count = 1;
acc.push(obj)
} else {
acc[isElemExist].count += 1
}
return acc;
}, [])
viewof explore = navio(dogs, {attribWidth: 30, height: 400})
Inputs.table(explore)
import { StackedBarChart as StackedHorizontalBarChart } from "@d3/stacked-horizontal-bar-chart"
import { StackedBarChart as NormalizedBarChart } from "@incakoala/stacked-bar-chart-normalized"
import { Legend, Swatches } from "@d3/color-legend"
import { navio } from "@john-guerra/navio"
import {loadSocrata} from "@john-guerra/socrata-load-multiples-pages"
import {aq,op} from "@uwdata/arquero"
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.
