MBA Candidate at Columbia, Software Engineer, Former Managing Web Editor @ The Michigan Daily. Building things I can see.
Public
Edited
Feb 19, 2024
Importers
2 stars
ForceGraph(graphologyToD3(d3ToGraphology(miserables)), {
nodeId: (d) => d.id, // node identifier, to match links
nodeGroup: (d) => d.group, // group identifier, for color
nodeTitle: (d) => d.id, // hover text
width,
height: 520,
invalidation // stop when the cell is re-run
})
miserables
graphologyMiserables = d3ToGraphology(miserables)
restoredMiserables = graphologyToD3(graphologyMiserables)
graphologyToD3 = (
graphologyGraph,
{ nodeList = "nodes", edgeList = "links" } = {}
) => {
const outJSON = graphologyGraph.toJSON();
const d3JSON = {
[nodeList]: outJSON.nodes.map((d) => d.attributes),
[edgeList]: outJSON.edges.map((d) => d.attributes)
};
return d3JSON;
}
d3ToGraphology = (
graphData,
{
nodeList = "nodes",
edgeList = "links",
nodeId = "id",
edgeSource = "source",
edgeTarget = "target",
graphAttributes = {}
} = {}
) => {
const graph = new graphology(graphAttributes);
const modifiedData = 1;
graph.import({
nodes: graphData[nodeList].map((n) => ({ key: n[nodeId], attributes: n })),
edges: graphData[edgeList].map((e) => ({
source: e[edgeSource],
target: e[edgeTarget],
attributes: e
})),
attributes: graphAttributes
});
return graph;
}
graphology = require("graphology")
import {ForceGraph} from "@d3/force-directed-graph"
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.
