MTX

This example shows how to import a graph from a MTX file into an Ogma visualization. It uses the mtxFromUrl method to load the graph data from the file. The content of the file is available here.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

// 5 less gay but still pastel colors:
const colors = ['#FF6F61', '#98DDCA', '#B19CD9'];

const getColor = (degree: number) => {
  return colors[degree % colors.length];
};

ogma.styles.addNodeRule({
  color: node => getColor(node.getDegree()),
  radius: node => 5 * node.getDegree()
});

Ogma.parse
  .mtxFromUrl('files/codeminer.mtx')
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.layouts.force({ locate: true }))
  .then(() => {
    console.log('import done');
    const loader = document.getElementById('info')!;
    loader.parentElement!.removeChild(loader);
  });

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="info">loading...</div>
    <script type="module" src="index.ts"></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;
  top: 0;
  left: 0;
}

MTX ​

MTX