Appearance

  2. Examples

Circle-packing layout ​

layoutalgorithmsclustering

This example shows how to use the circle packing layout to position nodes in a group or a cluster. It is advised to use it when the nodes do not have any edges between them. The algorithm is implemented after "Visualization of Large Hierarchical Data by Circle Packing", Weixin Wang et al.

ts
import Ogma from '@linkurious/ogma';

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

const NodeTypes = [
  'red',
  'green',
  'blue',
  'orange',
  'purple',
  'pink',
  'brown',
  'grey',
  'black'
];

// color the types
ogma.styles.addNodeRule({
  color: node => node?.getData('type'),
  innerStroke: {
    minVisibleSize: 0,
    width: 1
  }
});

ogma.styles.addEdgeRule({
  width: 5,
  detectable: false
});

ogma.generate
  .random({ nodes: 520, edges: 140 })
  .then(graph => {
    graph.nodes.forEach(node => {
      node.attributes = node.attributes || {};
      node.attributes.radius = 5 + Math.random() * 30;
      node.attributes.draggable = false;
      node.data = {
        type: NodeTypes[Math.floor(Math.random() * NodeTypes.length)]
      };
    });
    return ogma.setGraph(graph);
  })
  .then(() => ogma.view.locateGraph())
  .then(() =>
    ogma.transformations
      .addNodeGrouping({
        groupIdFunction: node => node.getData('type'),
        nodeGenerator: (_, groupId) => ({
          attributes: {
            color: 'white',
            innerStroke: groupId
          }
        }),
        onGroupUpdate: (_, children) => {
          return Promise.resolve(
            ogma.algorithms.circlePack({
              nodes: children,
              margin: 10,
              sort: 'asc'
            })
          );
        },
        padding: 10,
        showContents: true
      })
      .whenApplied()
  )
  .then(() => ogma.layouts.force({ locate: true }));
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>
    <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;
}