Public
Edited
Oct 9, 2023
us_states.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
function calc_burden(x) {
const y = { ...x };
if (y["Affordability Ratio"] > 1) {
y["Burden"] = "Out of Reach";
return y;
} else if (y["Affordability Ratio"] > 0.8) {
y["Burden"] = "Unreasonable";
return y;
} else if (y["Affordability Ratio"] > 0.5) {
y["Burden"] = "Severely Burdened";
return y;
} else if (y["Affordability Ratio"] > 0.3) {
y["Burden"] = "Burdened";
return y;
} else {
y["Burden"] = "Affordable";
return y;
}
}
evaluated = data.map(calc_burden)
calc_pct_burden = () => {
const pct = d3.rollup(
evaluated,
(v) => v.length / evaluated.length,
(x) => x["Burden"]
);
const l = [];
for (let [k, v] of pct.entries()) {
const o = {};
o["Burden"] = k;
o["frequency"] = v;
l.push(o);
}
return l;
}
pct_burden = calc_pct_burden()
Plot.plot({
style: {
backgroundColor: "#FEF9EF"
},
x: { percent: true },
marks: [
Plot.barX(
pct_burden,
Plot.stackX({
x: "frequency",
fill: "Burden",
fillOpacity: 0.6,
inset: 0.5
})
),
Plot.textX(
pct_burden,
Plot.stackX({
x: "frequency",
text: (x) =>
x["frequency"] > 0.3
? Math.round(x["frequency"] * 100, 2).toString() +
"% " +
x["Burden"]
: null,
inset: 0.5
})
),
Plot.ruleX([0, 1])
],
color: {
field: "Burden",
domain: [
"Affordable",
"Burdened",
"Severely Burdened",
"Unreasonable",
"Out of Reach"
],
range: ["#8EB095", "#E7B770", "#DB694A", "#9D69A3", "#555555"]
}
})
us = FileAttachment("us-counties-10m.json").json()
unemployment = FileAttachment("us-county-unemployment.csv").csv();
county_ratios = evaluated.map((r) => {
const n = {
State: r.State,
County: r.County,
Ratio: r["Affordability Ratio"],
Burden: r["Burden"]
};
const id_match = unemployment.filter(
(u) => u.state == r.State && u.county == r.County
);
if (id_match.length > 0) {
n["id"] = id_match[0]["id"];
} else {
n["id"] = null;
}
return n;
})
import { colorTable } from "@mootari/colored-table-rows"
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.
