Pulse
Node pulses are concentric circles that go away from nodes.
Pulses can be triggered once or several times. More info here.
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="graph-container"></div>
<script>
'use strict';
var COLORS = ['#161344','#3f1c4c','#632654','#86315b','#a93c63','#cd476a','#f35371', 'white'];
var pulse_options = {
number: 5,
duration: 1700,
interval: 600,
startColor: 'inherit',
endColor: 'rgb(113,199,183)',
width: 5,
startRatio: 1,
endRatio: 5,
};
var ogma = new Ogma({
container: 'graph-container'
});
var N = 10;
// 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: function (n) { return COLORS[n.getId() % COLORS.length]; }
});
// Generate a random graph
ogma.generate.random({ nodes: N, edges: 0 })
.then(function (graph) {
// Assign this graph to Ogma
ogma.setGraph(graph);
ogma.view.locateGraph();
// Trigger a pulse manually on the node '0'
ogma.getNode('0').pulse(pulse_options);
// Set a timer that triggers pulses every 3s.
var current_pulse = 0;
setInterval( function () {
ogma.getNode(current_pulse++ % N).pulse(pulse_options);
current_pulse++;
}, 3000);
});
</script>
</body>
</html>