cancel
Showing results for 
Search instead for 
Did you mean: 

What is the variable that defines color of the nodes in neovis.js

sucheta
Graph Buddy

Hi,

Here is the code of neovis.js which i use in my code to display the neo4j output.
However, I want to implement something with the colors. That is why i want to know what defines / what variable defines the colors that the nodes in neovis.js display in its javascript counterpart.

Link to neovis.js

4 REPLIES 4

MuddyBootsCode
Graph Steward

That's a good question. I haven't made much use of neovis but have you tried maybe changing the colors in your neo4j desktop and seeing if you get a change in your neovis representation? That's the first thing that pops into my head.

shan
Graph Buddy

For every label that you define under label, there is a community property where you can define a property used for coloring nodes. For example, assume there is a node label User, every user has a gender property, and your goal is to color every gender differently:

config = {
    ...
    labels: {
    ...
        "User": {
            "community": "gender"
            ....
        }
...
}

this does what I described above. I am not sure how you can control what colors are specifically used but that should be doable too.

duane_nickull
Node Link

I have dived into this question quite deeply.  Here is the use case:

I have a graph that has may nodes. The nodes are colored by node type but users can use my custom JS controls to resize the graph. Users can refocus the graph on any single node (I read out the properties and set that node as the starting node in my cypher) and they can also resize the graph by altering the depth of the graph from a new center node.  The issue is that when it first renders, the center node is perhaps yellow, but when they start on a new node, the colors change (ie - the node types do not display deterministic colors based on the node type).

The desired behavior is that the nodes will always display a consistent color based on the "type" of node, regardless of the starting node in any graph query.

I have found A list of colors inside the master neovis.js file. I found it in a minified version so you will need to search for a substring from this blob:

this.defaultGroups=[{border:"#2B7CE9",background:"#97C2FC",highlight:{border:"#2B7CE9",background:"#D2E5FF"},hover:{border:"#2B7CE9",background:"#D2E5FF"}},{border:"#FFA500",background:"#FFFF00",highlight:{border:"#FFA500",background:"#FFFFA3"},hover:{border:"#FFA500",background:"#FFFFA3"}},{border:"#FA0A10",background:"#FB7E81",highlight:{border:"#FA0A10",background:"#FFAFB1"},hover:{border:"#FA0A10",background:"#FFAFB1"}},{border:"#41A906",background:"#7BE141",highlight:{border:"#41A906",background:"#A1EC76"},hover:{border:"#41A906",background:"#A1EC76"}},{border:"#E129F0",background:"#EB7DF4",highlight:{border:"#E129F0",background:"#F0B3F5"},hover:{border:"#E129F0",background:"#F0B3F5"}},{border:"#7C29F0",background:"#AD85E4",highlight:{border:"#7C29F0",background:"#D3BDF0"},hover:{border:"#7C29F0",background:"#D3BDF0"}},{border:"#C37F00",background:"#FFA807",highlight:{border:"#C37F00",background:"#FFCA66"},hover:{border:"#C37F00",background:"#FFCA66"}},{border:"#4220FB",background:"#6E6EFD",highlight:{border:"#4220FB",background:"#9B9BFD"},hover:{border:"#4220FB",background:"#9B9BFD"}},{border:"#FD5A77",background:"#FFC0CB",highlight:{border:"#FD5A77",background:"#FFD1D9"},hover:{border:"#FD5A77",background:"#FFD1D9"}},{border:"#4AD63A",background:"#C2FABC",highlight:{border:"#4AD63A",background:"#E6FFE3"},hover:{border:"#4AD63A",background:"#E6FFE3"}},{border:"#990000",background:"#EE0000",highlight:{border:"#BB0000",background:"#FF3333"},hover:{border:"#BB0000",background:"#FF3333"}},{border:"#FF6000",background:"#FF6000",highlight:{border:"#FF6000",background:"#FF6000"},hover:{border:"#FF6000",background:"#FF6000"}},{border:"#97C2FC",background:"#2B7CE9",highlight:{border:"#D2E5FF",background:"#2B7CE9"},hover:{border:"#D2E5FF",background:"#2B7CE9"}},{border:"#399605",background:"#255C03",highlight:{border:"#399605",background:"#255C03"},hover:{border:"#399605",background:"#255C03"}},{border:"#B70054",background:"#FF007E",highlight:{border:"#B70054",background:"#FF007E"},hover:{border:"#B70054",background:"#FF007E"}},{border:"#AD85E4",background:"#7C29F0",highlight:{border:"#D3BDF0",background:"#7C29F0"},hover:{border:"#D3BDF0",background:"#7C29F0"}},{border:"#4557FA",background:"#000EA1",highlight:{border:"#6E6EFD",background:"#000EA1"},hover:{border:"#6E6EFD",background:"#000EA1"}},{border:"#FFC0CB",background:"#FD5A77",highlight:{border:"#FFD1D9",background:"#FD5A77"},hover:{border:"#FFD1D9",background:"#FD5A77"}},{border:"#C2FABC",background:"#74D66A",highlight:{border:"#E6FFE3",background:"#74D66A"},hover:{border:"#E6FFE3",background:"#74D66A"}},{border:"#EE0000",background:"#990000",highlight:{border:"#FF3333",background:"#BB0000"},hover:{border:"#FF3333",background:"#BB0000"}}]

duane_nickull
Node Link

To answer your question, I believe the colors are dynamically and nondeterministically assigned based on node type.