Color pie
It's possible to pass an array of colors to the color attribute, in which case they are displayed as a pie-chart.
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'];
var ogma = new Ogma({
container: 'graph-container'
});
// Create a rule that assigns an array of colors to each node.
ogma.styles.addRule({
nodeAttributes: {
color: function (node) {
// in this case ids are numeric, so let's use it to decide how many slices to show
const i = + node.getId();
return COLORS.slice(0, 1 + (i % (COLORS.length)));
},
radius: 10
}
});
// Create a random graph
ogma.generate.random({ nodes: 12, edges: 0 })
.then(function (graph) {
return ogma.setGraph(graph);
}).then(function () {
return ogma.layouts.grid({ locate: true });
});
</script>
</body>
</html>