Pulse

This example shows how to use the pulse method. Node pulses are concentric circles that go away from nodes. Pulses can be triggered once or several times.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const COLORS = [
  '#161344',
  '#3f1c4c',
  '#632654',
  '#86315b',
  '#a93c63',
  '#cd476a',
  '#f35371',
  'white'
];

const pulse_options = {
  number: 5,
  duration: 1700,
  interval: 600,
  startColor: 'inherit',
  endColor: 'rgb(113,199,183)',
  width: 5,
  startRatio: 1,
  endRatio: 5
};

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

// Change the background color.
ogma.setOptions({ backgroundColor: 'rgb(113,199,183)' });

// Rule to randomly color the nodes.
// This random function must be deterministic.
ogma.styles.addNodeRule({
  color: n => COLORS[+n.getId() % COLORS.length]
});

// Generate a random graph
ogma.generate
  .random({ nodes: N, edges: 0 })
  // Assign this graph to Ogma
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.layouts.grid({ locate: true, duration: 0, cols: 3 }))
  .then(() => {
    // Trigger a pulse manually on the node '0'
    ogma.getNode('4')!.pulse(pulse_options);

    // Set a timer that triggers pulses every 3s.
    let current_pulse = 0;
    setInterval(() => {
      ogma.getNode(current_pulse++ % N)!.pulse(pulse_options);
      current_pulse++;
    }, 3000);
  });

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

Pulse ​

Pulse