Senior Data Visualization Engineer at Graphicacy
Published
Edited
Jun 9, 2021
html`<div id="test" style="width:800px; height: 500px; border: 1px solid #888; background: #FCFCFC" />`
renderGraph(graphData)
md `## Build Hierarchical Graph`
graphData = ({ nodes: [nodesHierarchy], edges: GroMetGraph.edges });
constructRootNode(nodesHierarchy)
nodesHierarchy = hierarchyFn(GroMetGraph.nodes); // Transform the flat nodes structure into a hierarchical one
md `## Parse GroMEt`
GroMetGraph = {
const map = await mapGroMEt(gromet);
const graph = buildGraph(map);
return graph
}
hierarchyFn = d3.stratify()
.id((d) => d.id)
.parentId((d) => d.parent);
function changeKey (obj, before, after) {
if ({}.hasOwnProperty.call(obj, before)) {
obj[after] = obj[before];
delete obj[before];
obj[after].forEach(child => {
changeKey(child, before, after);
});
}
};
function constructRootNode(root) {
root.label = root.data.label;
root.concept = root.data.concept;
changeKey(root, 'children', 'nodes');
if (root.nodes) {
for (let i = 0; i < root.nodes.length; i++) {
constructRootNode(root.nodes[i]);
}
}
};
gromet = (await FileAttachment("SimpleSIR_gromet_FunctionNetwork.json")).json()
import {renderGraph} from "@rosaromerogomez/svg-flow-graph-test"
import {parseJSONL} from "@darionco/parsejsonl"
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.
