Appearance

  2. Examples

Performance (Github) ​

performancebig-graphsrendering

This example demonstrates the performances of Ogma while rendering a large graph.

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.
    // this improves performances for large graphs
    edges: false,
    nodeTexts: false,
    edgeTexts: false
  },
  interactions: {
    drag: {
      enabled: false // disable node dragging
    }
  }
});

ogma.styles.addNodeRule({
  text: {
    font: 'Roboto',
    size: 12
  },
  innerStroke: {
    minVisibleSize: 5
  }
});

const graph = await Ogma.parse.jsonFromUrl('files/github.json');
// pre-position to see the animation
await ogma.view.locateRawGraph(graph);
// batch-add nodes and edges
await ogma.setGraph(graph, { batchSize: 2000 });

// update graph info
document.getElementById('n')!.textContent = 'nodes: ' + ogma.getNodes().size;
document.getElementById('e')!.textContent = 'edges: ' + ogma.getEdges().size;
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700"
      rel="stylesheet"
      type="text/css"
    />

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