I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
orderGraph = (
{ nodes, links },
{ distance = "manhattan", ordering = "leafOrder", id = null } = {}
) => {
const n = nodes.length;
if (id) {
links = convertLinksToIndexes({ nodes, links }, { id });
}
// console.log("links after 👏🏼", links);
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);
}
switch (ordering) {
case "leafOrder":
return computeLeaforder();
case "leafOrderDist":
return computeLeaforderDist();
case "barycenter":
return computeBarycenter();
case "rcm":
return computeRCM();
case "spectral":
return computeSpectral();
default:
return computeLeaforder();
}
}
current = setup.update(orderGraph(graph, {distance, ordering: sorting}))
// note: here the graph expect source and target to be 0-based and correspond to existing nodes.
graph = FileAttachment("miserables.json").json()
function orderMatrix( matrix ) {
const before = performance.now();
const transpose = reorder.transpose(matrix);
console.log("transpose", performance.now() - before);
const dist_rows = reorder.dist()(matrix);
console.log("dist_rows", performance.now() - before);
const dist_cols = reorder.dist()(transpose);
console.log("dist_cols", performance.now() - before);
const order = reorder.optimal_leaf_order();
console.log("order", performance.now() - before);
const row_perm = order.distanceMatrix(dist_rows)(matrix);
console.log("row_perm", performance.now() - before);
const col_perm = order.distanceMatrix(dist_cols)(transpose);
console.log("col_perm", performance.now() - before);
return { row_perm, col_perm };
}
toyMatrix = [[1, 0, 0, 0, 1, 0, 0, 0],
[0, 1, 1, 0, 0, 1, 0, 1],
[0, 1, 1, 0, 1, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0],
[1, 0, 1, 0, 1, 0, 0, 0],
[0, 1, 0, 0, 0, 1, 0, 1],
[0, 0, 0, 1, 0, 0, 1, 0],
[0, 1, 0, 0, 0, 1, 0, 1]]
orderMatrix(toyMatrix)
orderingsOptions = [
"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")
function tableToMatrix(data) {
// Get quantitative attributes
const cols = Object.keys(data[0]).filter((c) => !isNaN(data[0][c]));
const catMatrix = data.map((v) => cols.map((c) => v[c]));
// Array.from(d3.group(dataAsMatrix.flat(), d => d).keys())
catMatrix.columns = cols;
return catMatrix;
}
import { convertLinksToIndexes } from "@john-guerra/network-utilities"
{
const before = performance.now();
const res = orderMatrix(fifaMatrix);
mutable time = performance.now() -before;
return res;
}
mutable time = null;
fifaData = FileAttachment("fifaData.csv.zip").zip().then(res => res.file("fifaData.csv").csv({typed: true}))
fifaMatrix = tableToMatrix(fifaData.slice(0, 20))
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.
