I have been trying to create some graph visualizations using Ontotext GraphDB. I would like the colors to be consistent between various visualizations that I make of the same data. I understand that the coloring is based on the type, but it does not seem to be consistent. For example, if I create a visual graph with only nodes of type A
, the color assigned to the nodes may be red, but if I create a visual graph with nodes of type A
and type B
, then it does not appear that the color of nodes of type A
are guaranteed to still be red.
I would like to understand the mechanism by which the visualization system assigns colors based on types.
As a side note, I am also having an issue with larger networks where the nodes of the graph become larger than the size of the window, so that I cannot view all of the nodes at once, even if I zoom out all the way.
Colors are based on the type of the node and the colors for types are generated each time (we do not persist them). Unfortunately you cannot specify the Visual Graph node colors in GraphDB Workbench without touching the source code, so you need to clone GraphDB Workbench from github and set the colors for your types in the source code but I will guide you how to do it, it is very straightforward.
Clone or fork the project from here https://github.com/Ontotext-AD/graphdb-workbench
(there is a good guide there how to run your workbench against a running GraphDB)
Open src/js/angular/graphexplore/controllers/graphs-visualizations.controller.js and find the function $scope.getColor.
You can specify your colors and types there i.e:
$scope.getColor = function (type) {
if (type === 'http://myBarType') {
return "#6495ED"
}
if (type === 'http://myFooType')
{
return "#90EE90";
}
if (angular.isUndefined(type2color[type])) {
type2color[type] = colorIndex;
colorIndex++;
}