I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
// Computation of a minimum spanning tree
krus = cy.elements().kruskal((e) => e._private.data.length2)
// The computation of the tree will be performed by Cytoscape
cy = {
let nodes = G.nodes.map((n) => ({ data: { id: `n${n.index}` } }));
let edges = G.links.map(function (e) {
let source_node = `n${e.source.index}`;
let target_node = `n${e.target.index}`;
return {
data: {
source: source_node,
target: target_node,
id: `${source_node}--${target_node}`,
length2: e.length2
}
};
});
return cytoscape({
elements: {
nodes: nodes,
edges: edges
}
});
}
// Generation of the random geometric graph.
G = {
new_graph;
let N = Math.round(1000 * s);
let R = 4000;
let seed = 0.1234;
seed = Math.random();
let random_source_x = d3.randomLcg(seed);
let random_source_y = d3.randomLcg(seed / 2);
let random_x = d3.randomUniform.source(random_source_x)(0, w);
let random_y = d3.randomUniform.source(random_source_y)(0, h);
let pts = d3.range(N).map(() => [random_x(), random_y()]);
let nodes = pts.map((p, i) => ({
x: p[0],
y: p[1],
index: i,
cy_data: { id: `n${i}` }
}));
let links = nodes
.map((node, i) => nodes.slice(i + 1).filter((n) => dist2(node, n) < R))
.map((a, i) =>
a.map((o) => ({
source: nodes[i],
target: nodes[o.index],
length2: Math.sqrt(dist2(nodes[i], nodes[o.index])),
cy_data: { id: `n${i}--n${o.index}` }
}))
)
.flat();
nodes.forEach(
(o) =>
(o.valence = links.filter(
(l) => l.source.index == o.index || l.target.index == o.index
).length)
);
let max_valence = d3.max(nodes.map((o) => o.valence));
let root_node = nodes.filter((o) => o.valence == max_valence)[0];
let G = { nodes, links, max_valence, root_node };
return G;
function dist2(o1, o2) {
return (o1.x - o2.x) ** 2 + (o1.y - o2.y) ** 2;
}
}
s = r ** 2
r = w / 1000
w = width < 1100 ? width : 1100
h = 0.625 * w
cytoscape = require("cytoscape")
import { Scrubber } from "@mbostock/scrubber"
revealed = {
let div = d3
.create("div")
.attr("id", "reveal_it")
.style("text-align", "center")
.style("opacity", reveal)
.text(
reveal < 1 ? "Revealing??" : "Or, more importantly, just really cool!!"
);
return div.node();
}
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.
