Data-driven styles
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css" rel="stylesheet">
<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>
<!-- we force the loading of the font awesome -->
<i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>
<script>
'use strict';
var ogma = new Ogma({
container: 'graph-container'
});
// Load data from a json file.
ogma.parse.jsonFromUrl('files/solarCity-nostyle.json').then(function (g) {
ogma.setGraph(g);
ogma.view.locateGraph();
});
// Define the Node style rules
ogma.styles.addNodeRule({
// the label is the value os the property name.
text: function (node) { return node.getData('properties.name'); },
// the size is proportional to the funding_total property
radius: ogma.rules.slices({
field: 'properties.funding_total',
values: { nbSlices: 7, min: 3, max: 10 }
}),
// the color is based on the funding_total property (from red to purple)
color: ogma.rules.slices({
field: 'properties.funding_total',
values: ['#161344', '#3f1c4c', '#632654', '#86315b', '#a93c63', '#cd476a', '#f35371']
}),
// assign icons based on the node category
icon: {
content: ogma.rules.map({
field: 'categories',
values: {
'COMPANY': "\uF135",
'INVESTOR': "\uF19c",
'MARKET': "\uF3a5"
}
}),
font: 'Font Awesome 5 Free',
style: 'bold',
color: 'white'
}
});
// use images stored in the picture property if available
ogma.styles.addNodeRule(function (node) {
return !!node.getData('properties.picture');
}, {
image: {
url: function (node) {
return node.getData('properties.picture');
}
},
icon: {
// If there is an image, don't display the icon
content: null
}
});
// Define the Edge style rules
ogma.styles.addEdgeRule({
// the label is the value os the property name.
text: function (edge) { return edge.getData('type'); },
// the size is proportional to the raised_amount_usd property
width: ogma.rules.slices({
field: 'properties.raised_amount_usd',
values: { nbSlices: 3, min: 1, max: 5 }
}),
// the color is based on the raised_amount_usd property (from blue to black)
color: ogma.rules.slices({
field: 'properties.raised_amount_usd',
values: ['#54aef3', '#326896', '#132b43'],
reverse: true
}),
// the shape is based on the type of edge
shape: ogma.rules.map({
field: 'type',
values: {
'INVESTED_IN': 'arrow',
'ACQUIRED': 'tapered',
'HAS_MARKET': 'dotted'
}
})
});
</script>
</body>
</html>
