Public
Edited
Jan 5, 2024
chart = SankeyChart(
{ links: summarizedData, nodes: nodes },
{
nodeGroup: (d) => d.id.split(/\W/)[0],
nodeSort: null,
height: 400,
width: 470
}
)
import { SankeyChart } from "@d3/sankey-component"
nodes = [
{ id: "Same Tenant, Higher Real Rent", rank: 4 },
{ id: "New Tenant, Higher Real Rent", rank: 3 },
{ id: "Same Tenant, Higher Nominal Rent", rank: 6 },
{ id: "New Tenant, Higher Nominal Rent", rank: 5 },
{ id: "Same Tenant, Same Nominal Rent", rank: 8 },
{ id: "New Tenant, Same Nominal Rent", rank: 7 },
{ id: "Same Tenant, Lower Nominal Rent", rank: 10 },
{ id: "New Tenant, Lower Nominal Rent", rank: 9 },
{ id: "Newly Occupied", rank: 2 },
{ id: "Newly Vacant", rank: 1 },
{ id: "Still Vacant", rank: 0 },
{ id: "Occupied", rank: NaN },
{ id: "Vacant", rank: NaN }
]
summarizedData = turnover.reduce((acc, unit) => {
const left = unit.occupantBefore == "Tenant" ? "Occupied" : "Vacant";
var right = "";
const after = unit.occupantAfter;
var rank = 0;
if (left == "Occupied") {
if (after == "Vacant") {
right = "Newly Vacant";
rank = 1;
} else {
const newSame =
unit.moveInDateAfter > unit.moveInDateBefore ? "New" : "Same";
if (unit.rentAfter > (unit.rentBefore * 307.917) / 298.598) {
right = newSame + " Tenant, Higher Real Rent";
rank = 3;
} else if (unit.rentAfter > unit.rentBefore) {
right = newSame + " Tenant, Higher Nominal Rent";
rank = 4;
} else if (unit.rentAfter == unit.rentBefore) {
right = newSame + " Tenant, Same Nominal Rent";
rank = 5;
} else {
right = newSame + " Tenant, Lower Nominal Rent";
rank = 6;
}
}
}
if (left == "Vacant") {
if (after == left) {
right = "Still Vacant";
} else {
right = "Newly Occupied";
rank = 2;
}
}
const existing = acc.find(
(item) => item.source === left && item.target === right
);
if (existing) {
existing.value += 1;
} else {
acc.push({
source: left,
target: right,
value: 1,
rank: rank
});
}
return acc;
}, [])
2023-turnover@1.tsv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
