Appearance
Performance (Cosmic Web)
This example demonstrates the performances of Ogma while rendering a large graph.
It loads a large graph exported from the Gephi software. The dataset comes from the "Cosmic Web" study of the network of galaxies. See <a href="https://cosmicweb.barabasilab.com" target="_blank" rel="noopener"
cosmicweb.barabasilab.com</a .
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.setOptions({
detect: {
// disable the detection of edges and texts, making them impossible to hover or select.
// edges: false,
// nodes: false,
nodeTexts: false,
edgeTexts: false
},
interactions: {
drag: {
//enabled: false // disable node dragging
}
}
});
ogma.styles.addNodeRule({
text: {
size: 12,
content: node => node.getId()
},
innerStroke: {
minVisibleSize: 5,
width: 1,
color: 'black'
}
});
ogma.styles.addEdgeRule({
minVisibleSize: 0.3,
color: 'source'
});
const graph = await Ogma.parse.jsonFromUrl(
'files/ccnr-universe-fa2-ncolorModularity-nsizeBeteewnessCentrality.json'
);
await ogma.view.locateRawGraph(graph);
ogma.events.on(['addNodes', 'addEdges'], () => {
document.getElementById('n')!.textContent = 'nodes: ' + ogma.getNodes().size;
document.getElementById('e')!.textContent = 'edges: ' + ogma.getEdges().size;
});
await ogma.setGraph(graph, { batchSize: 5000 });
html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="graph-container"></div>
<div id="n" class="info n">
loading a large graph, it can take a few seconds...
</div>
<div id="e" class="info e"></div>
<script src="index.ts" type="module"></script>
</body>
</html>
css
body {
background-color: #000;
}
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
.info {
position: absolute;
color: #fff;
background: #141229;
font-size: 12px;
font-family: monospace;
padding: 5px;
}
.info.n {
top: 0;
left: 0;
}
.info.e {
top: 20px;
left: 0;
}