Appearance

  2. Examples

Performance (Cosmic Web) ​

performancebig-graphsrendering

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;
}