I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
current = setup.update(permutations[sorting]())
// note: here the graph expect source and target to be 0-based and correspond to existing nodes.
graph = FileAttachment("miserables.json").json()
permutations = orders(graph, {distance})
orders = ({ nodes, links }, { distance = "manhattan" }) => {
const n = nodes.length;
const graph = reorder.graph().nodes(nodes).links(links).init();
let dist_adjacency;
const leafOrder = reorder
.optimal_leaf_order()
.distance(reorder.distance[distance]);
function computeLeaforder() {
const adjacency = reorder.graph2mat(graph);
return leafOrder(adjacency);
}
function computeLeaforderDist() {
if (!dist_adjacency) dist_adjacency = reorder.graph2valuemats(graph);
return reorder.valuemats_reorder(dist_adjacency, leafOrder);
}
function computeBarycenter() {
const barycenter = reorder.barycenter_order(graph);
return reorder.adjacent_exchange(graph, ...barycenter);
}
function computeRCM() {
return reorder.reverse_cuthill_mckee_order(graph);
}
function computeSpectral() {
return reorder.spectral_order(graph);
}
const orders = {
none: () => d3.range(n),
name: () =>
d3.range(n).sort((a, b) => d3.ascending(nodes[a].name, nodes[b].name)),
count: () => d3.range(n).sort((a, b) => nodes[b].count - nodes[a].count),
group: () =>
d3
.range(n)
.sort(
(a, b) =>
d3.ascending(nodes[a].group, nodes[b].group) ||
d3.ascending(nodes[a].name, nodes[b].name)
),
leafOrder: computeLeaforder,
leafOrderDist: computeLeaforderDist,
barycenter: computeBarycenter,
rcm: computeRCM,
spectral: computeSpectral
};
return orders;
}
orderingsOptions = [
"none",
"name",
"count",
"group",
"leafOrder",
"leafOrderDist",
"barycenter",
"rcm",
"spectral"
]
distanceOptions = ({
euclidean: "Euclidean (L2) distance.",
manhattan: "Manhattan (L1) distance.",
minkowski: "Minkowski distance.",
chebyshev: "Chebyshev distance.",
hamming: "Hamming distance.",
jaccard: "Jaccard distance.",
braycurtis: "Braycurtis distance."
})
reorder = require("reorder.js@2.2.4")
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.
