diff --git a/docs/source/customizing.rst b/docs/source/customizing.rst index 8dcc07b..37918c8 100644 --- a/docs/source/customizing.rst +++ b/docs/source/customizing.rst @@ -36,19 +36,34 @@ The ``color_nodes`` method By calling the :meth:`neo4j_viz.VisualizationGraph.color_nodes` method, you can color nodes based on a node property (field). -This method will give a distinct color (if possible) to each unique value of the node ``property`` that you provide as -the first positional argument. +It's possible to color the nodes based on a discrete or continuous property. +In the discrete case, a new color from the ``colors`` provided is assigned to each unique value of the node property. +In the continuous case, the ``colors`` should be a list of colors representing a range that are used to create a gradient of colors based on the values of the node property. By default the Neo4j color palette that works for both light and dark mode will be used. If you want to use a different color palette, you can pass a dictionary or iterable of colors as the ``colors`` parameter. A color value can for example be either strings like "blue", or hexadecimal color codes like "#FF0000", or even a tuple of RGB values like (255, 0, 255). -Here is an example of providing a list of custom colors to the ``color_nodes`` method: + +If some nodes already have a ``color`` set, you can choose whether or not to override it with the ``override`` +parameter. + + +By discrete node property (field) +********************************* + +To not use the default colors, we can provide a list of custom colors based on the discrete node property (field) "caption" to the ``color_nodes`` method: .. code-block:: python + from neo4j_viz.colors import PropertyType + # VG is a VisualizationGraph object - VG.color_nodes("caption", ["red", "#7fffd4", (255, 255, 255, 0.5), "hsl(270, 60%, 70%)"]) + VG.color_nodes( + "caption", + ["red", "#7fffd4", (255, 255, 255, 0.5), "hsl(270, 60%, 70%)"], + property_type=PropertyType.DISCRETE + ) The full set of allowed values for colors are listed `here `_. @@ -60,7 +75,7 @@ this snippet: from palettable.wesanderson import Moonrise1_5 # VG is a VisualizationGraph object - VG.color_nodes("caption", Moonrise1_5.colors) + VG.color_nodes("caption", Moonrise1_5.colors) # PropertyType.DISCRETE is default In this case, all nodes with the same caption will get the same color. @@ -69,12 +84,31 @@ To avoid that, you could use another palette or extend one with additional color :doc:`Visualizing Neo4j Graph Data Science (GDS) Graphs tutorial <./tutorials/gds-example>` for an example on how to do the latter. -If some nodes already have a ``color`` set, you can choose whether or not to override it with the ``override`` -parameter. + +By continuous node property (field) +*********************************** + +To not use the default colors, we can provide a list of custom colors representing a range to the ``color_nodes`` method: + +.. code-block:: python + + from neo4j_viz.colors import PropertyType + + # VG is a VisualizationGraph object + VG.color_nodes( + "centrality_score", + [(255, 0, 0), (191, 64, 0), (128, 128, 0), (64, 191, 0), (0, 255, 0)] # From red to green + property_type=PropertyType.CONTINUOUS + ) + +In this case, the nodes will be colored based on the value of the "centrality_score" property, with the lowest values being colored red and the highest values being colored green. +Since we only provided five colors in the range, the granularity of the gradient will be limited to five steps. + +`palettable` and `matplotlib` are great libraries to use to create custom color gradients. Sizing nodes --------------- +------------ Nodes can be given a size directly by providing them with a size property, upon creation. This can for example be done by passing a size as an integer to the ``size`` parameter of the diff --git a/examples/gds-example.ipynb b/examples/gds-example.ipynb index d1f4497..cb8d44e 100644 --- a/examples/gds-example.ipynb +++ b/examples/gds-example.ipynb @@ -118,7 +118,7 @@ }, { "cell_type": "code", - "execution_count": 8, + "execution_count": 7, "metadata": { "tags": [ "preserve-output" @@ -129,14 +129,14 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", " \n", + " " + ], + "text/plain": [ + "" + ] + }, + "execution_count": 11, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "VG.color_nodes(\"subject\")\n", + "VG.render()" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Now, let us color by our continuous node property \"size\" that we computed above with PageRank, again using the default colors.\n", + "We set `override=True` so as to replace the previous coloring completely.\n", + "Note how the nodes are colored from yellow to purple, and how that also corresponds to the nodes' sizes." ] }, { @@ -253,14 +305,14 @@ "data": { "text/html": [ "\n", - "
\n", + "
\n", "