From 7e11ab810d895a78ca98fc3db51552f0a9188599 Mon Sep 17 00:00:00 2001 From: lana-k Date: Thu, 30 Oct 2025 23:11:09 +0100 Subject: [PATCH] Update Graph.md --- Graph.md | 109 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 89 insertions(+), 20 deletions(-) diff --git a/Graph.md b/Graph.md index a4308a8..b9298a9 100644 --- a/Graph.md +++ b/Graph.md @@ -1,7 +1,7 @@ # Graph -Sqliteviz allows building a graph. To build a graph run a query to get data. -Then open visualisation panel by clicking ![](./img/visualisation.svg) +Sqliteviz allows building a graph. To build a graph, run a query to get data. +Then open the visualisation panel by clicking ![](./img/visualisation.svg) in any of the two side toolbars and choose a graph mode by clicking ![](./img/graph.svg). ## Requirements for result set @@ -15,41 +15,110 @@ To build a graph, a result set must follow the following requirements: Each JSON can have more fields used for graph styling (read more in [Graph styling](#graph-styling)). -## Graph settings +## Graph structure Start building a graph by setting a mapping from your records to nodes and edge properties. -Go to `Structure` -> 'Graph' and set the following fields: +Go to `Structure` > `Graph` and set the following fields: - Object type – a field containing 0 for node records and 1 for edge records. -- Node Id – a field containing node identifier +- Node Id – a field containing the node identifier - Edge source - a field keeping a node identifier where the edge starts. - Edge target - a field keeping a node identifier where the edge ends. -![Fig. 1: Table](./img/Screenshot_pivot_table.png) +This is already enough to build a graph with default styling and circular layout. -There are several built-in chart views for a pivot. But you can build your own -with `Custom chart` view (fig. 4). +![Fig. 1: Graph structure settings](./img/Screenshot_graph_structure.png) -![Fig. 4: Custom Chart](./img/Screenshot_pivot_custom_chart.png) +## Graph styling -> **Note:** You can switch to other pivot views and back to `Custom chart` – -> all your custom chart settings will be remembered. But if you switch the -> visualisation mode from pivot to any other mode, unsaved changes will be lost. +### General +Set a background color of the graph in `Style` > `General` panel. -## Pivot table SQL +### Nodes -Pivot table (in the form of a result set) can be built on the SQL-level and, -technically speaking, can be visualised as any other result set. Practically -though there are a couple of challenges with that: +There are the following settings in `Style` > `Nodes` panel: -1. Visualising a dataset of long/tall shape is much more convenient in Plotly - (chart editor) rather than one of wide/fat shape. -2. SQLite doesn't have a special constructs like `PIVOT` or `CROSSTAB` in - its SQL dialect. +- Label - a field containing a node label. Note that if the graph has too many nodes, + some labels can be visible only at a certain zoom level. +- Label Color - a color of node labels +- Size - set a node size. There are 3 modes of node sizing: constant, variable and calculated. + `Constant` means that all nodes have the same size. + + `Variable` allows you to choose a field where the node size will be taken. + + `Calculated` allows to choose a method that will be used to calculate the node size. + Currently, 3 methods are available: total node degree, degree by in-edges and degree by out-edges. + + For variable and calculated sizing it's also possible to set scale, the minimum size and the sizing mode - area or diameter. + In the diameter mode the difference between node sizes will be more noticeable. +- Color - set a node color. There are 3 modes of node color: constant, variable and calculated. + + `Constant` means that all nodes have the same color. + + `Variable` allows you to choose a field by which the color will be determined. + With this option you can also choose if the color value should be taken directly or mapped to a color palette. + `Direct` mode means that in JSON representing a node, the value available by the selected field will be used as a color. + The color value can be set in different ways: + + **As Hex, 8-digit (RGBA) Hex** + ``` + "#000" + "000" + "#369C" + "369C" + "#f0f0f6" + "f0f0f6" + "#f0f0f688" + "f0f0f688" + ``` + **RGB, RGBA** + ``` + "rgb (255, 0, 0)" + "rgb 255 0 0" + "rgba (255, 0, 0, .5)" + { "r": 255, "g": 0, "b": 0 } + ``` + + **HSL, HSLA** + ``` + "hsl(0, 100%, 50%)" + "hsla(0, 100%, 50%, .5)" + "hsl(0, 100%, 50%)" + "hsl 0 1.0 0.5" + { "h": 0, "s": 1, "l": .5 } + ``` + + **HSV, HSVA** + ``` + "hsv(0, 100%, 100%)" + "hsva(0, 100%, 100%, .5)" + "hsv (0 100% 100%)" + "hsv 0 1 1" + { "h": 0, "s": 100, "v": 100 } + ``` + + **Named colors** + Case insenstive names are accepted, using the list of [colors in the CSS spec][3]. + ``` + "RED" + "blanchedalmond" + "darkblue" + ``` + + When `Map to` option is selected, the value by the selected field can be anything because it won't be used directly as a color. + In this case each distinct value instead will be mapped to a certain color, so nodes with the same value will have the same color. + You can choose a palette used in color mapping. + + `Calculated` color mode allows to choose a method that will be used to determine a color. + Currently, 3 methods are available: total node degree, degree by in-edges and degree by out-edges. + + [How to build a pivot table in SQL(ite)][1] explores two options with static (or beforehand-known) and dynamic columns. [1]: ../How-to-build-a-pivot-table-in-SQ-Lite +[2]: https://github.com/bgrins/TinyColor?tab=readme-ov-file#accepted-string-input +[3]: https://www.w3.org/TR/css-color-4/#named-colors