zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 10:08:52 +08:00
Code Issues Projects Releases Wiki Activity

minor changes

Browse Source
This commit is contained in:
lana-k
2025-11-02 13:45:23 +01:00
parent 4a47e4ff0f
commit 521662b271
1 changed files with 65 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
Graph.md
View File

@@ -1,6 +1,6 @@
# Graph # Graph
Sqliteviz supports graph (network) visualisation. To build a graph, first run a query to get data. Sqliteviz supports graph (network) visualisation. To build a graph, first run a query to get data.
Then open the visualisation panel by clicking ![](./img/visualisation.svg) Then open the visualisation panel by clicking ![](./img/visualisation.svg)
in any of the two-side toolbars and choose the graph mode by clicking ![](./img/graph.svg). in any of the two-side toolbars and choose the graph mode by clicking ![](./img/graph.svg).
@@ -9,16 +9,16 @@ in any of the two-side toolbars and choose the graph mode by clicking ![](./img/
To build a graph, a result set must follow the following requirements: To build a graph, a result set must follow the following requirements:
- the first column must contain JSON documents (subsequent columns in the result set are ignored) - the first column must contain JSON documents (subsequent columns in the result set are ignored)
- each JSON document has a key indicating whether the document represents a node/vertex (value `0`) - each JSON document has a key indicating whether the document represents a node/vertex (value `0`)
or an edge (value `1`) or an edge (value `1`)
- each JSON document representing a node has a key with the node/vertex id - each JSON document representing a node has a key with the node/vertex id
- each JSON document representing an edge has a key with the edge source node/vertex and a key with - each JSON document representing an edge has a key with the edge source node/vertex and a key with
the edge target node/vertex the edge target node/vertex
That is what is the minimum required for a graph, but the JSON documents can have more fields used That is what is the minimum required for a graph, but the JSON documents can have more fields used
in graph styling (read [Graph styling](#graph-styling)). in graph styling (read [Graph styling](#graph-styling)).
See also an example in [How to get result set suitable for graph visualisation][1]. See also an example in [How to get a result set suitable for graph visualisation][1].
## Graph structure ## Graph structure
@@ -49,29 +49,29 @@ There are the following settings in `Style` > `Nodes` panel:
- Label Color - a color of node labels - Label Color - a color of node labels
- Size - set a node size. There are 3 modes of node sizing: constant, variable and calculated. - Size - set a node size. There are 3 modes of node sizing: constant, variable and calculated.
* `Constant` means that all nodes have the same given size. - `Constant` means that all nodes have the same given size.
* `Variable` allows you to choose a field where the node size is taken from. - `Variable` allows you to choose a field where the node size is taken from.
* `Calculated` allows you to choose a method that is used to calculate the node size. - `Calculated` allows you to choose a method that is used to calculate the node size.
Currently, 3 methods are available: total node degree, degree by in-edges and Currently, 3 methods are available: total node degree, degree by in-edges and
degree by out-edges. degree by out-edges.
For variable and calculated sizing it's also possible to set the scale, the minimum For variable and calculated sizing it's also possible to set the scale, the minimum
size and the sizing mode - area or diameter. In the diameter mode the difference size and the sizing mode - area or diameter. In the diameter mode the difference
between node sizes is more noticeable. between node sizes is more noticeable.
- Color - set a node color. There are 3 modes of node color: constant, variable and calculated. - 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. - `Constant` means that all nodes have the same color.
* `Variable` allows you to choose a field by which the color is determined. - `Variable` allows you to choose a field by which the color is determined.
With this option you can also choose if the color value should be taken directly or mapped to a With this option you can also choose if the color value should be taken directly or mapped to a
color palette. color palette.
* `Direct` mode means that in the JSON document representing the node, the value in the selected - `Direct` mode means that in the JSON document representing the node, the value in the selected
field is used as a color. The color value in the JSON document can be set in [different field is used as a color. The color value in the JSON document can be set in different
ways][2]: ways:
1. As Hex, 8-digit (RGBA) Hex: 1. As Hex, 8-digit (RGBA) Hex:
``` ```
#000 #000
000 000
@@ -82,67 +82,76 @@ There are the following settings in `Style` > `Nodes` panel:
#f0f0f688 #f0f0f688
f0f0f688 f0f0f688
``` ```
2. RGB, RGBA: 2. RGB, RGBA:
``` ```
rgb (255, 0, 0) // As a string:
rgb(255, 0, 0)
rgb 255 0 0 rgb 255 0 0
rgba (255, 0, 0, .5) rgba(255, 0, 0, .5)
// As a nested structure:
{ "r": 255, "g": 0, "b": 0 } { "r": 255, "g": 0, "b": 0 }
``` ```
3. HSL, HSLA: 3. HSL, HSLA:
``` ```
// As a string:
hsl(0, 100%, 50%) hsl(0, 100%, 50%)
hsla(0, 100%, 50%, .5) hsla(0, 100%, 50%, .5)
hsl(0, 100%, 50%) hsl(0, 100%, 50%)
hsl 0 1.0 0.5 hsl 0 1.0 0.5
// As a nested structure:
{ "h": 0, "s": 1, "l": .5 } { "h": 0, "s": 1, "l": .5 }
``` ```
4. HSV, HSVA: 4. HSV, HSVA:
``` ```
// As a string:
hsv(0, 100%, 100%) hsv(0, 100%, 100%)
hsva(0, 100%, 100%, .5) hsva(0, 100%, 100%, .5)
hsv (0 100% 100%) hsv(0 100% 100%)
hsv 0 1 1 hsv 0 1 1
// As a nested structure:
{ "h": 0, "s": 100, "v": 100 } { "h": 0, "s": 100, "v": 100 }
``` ```
5. Named colors: 5. Named colors:
Case insensitive names are accepted, using the list of [colors in the CSS Case insensitive names are accepted, using the list of [colors in the CSS
spec][3]. spec][2].
``` ```
RED RED
blanchedalmond blanchedalmond
darkblue darkblue
``` ```
When `Map to` option is selected, the value by the selected field can be anything because it 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 will be mapped to a certain won't be used directly as a color. In this case each distinct value will be mapped to a certain
color, so nodes with the same value will have the same color. Click on a color palette to open a color, so nodes with the same value will have the same color. Click on a color palette to open a
palette selector. palette selector.
`Calculated` color mode allows to choose a method that will be used to determine a color. `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 Currently, 3 methods are available: total node degree, degree by in-edges and degree by
out-edges. You can also choose a color palette that will be used in a mapping of calculated out-edges. You can also choose a color palette that will be used in a mapping of calculated
values into an actual color. values into an actual color.
- Color As - defines how color mapping should work - continuously or categorically. - Color As - defines how color mapping should work - continuously or categorically.
Continuous mode is more suitable when the mapped values have a meaningful order. It looks more Continuous mode is more suitable when the mapped values have a meaningful order. It looks more
informative with sequential palettes. In that case the lowest value corresponds to the first informative with sequential palettes. In that case the lowest value corresponds to the first
color in the palette and the highest value - to the last color. The color of each intermediate color in the palette and the highest value - to the last color. The color of each intermediate
value reflects the position of that value in the range. value reflects the position of that value in the range.
Categorical mode just uses the next color in the palette for each new distinct value. Categorical mode just uses the next color in the palette for each new distinct value.
- Colorscale Direction - use the selected palette as is or reverse it. - Colorscale Direction - use the selected palette as is or reverse it.
### Edges ### Edges
@@ -154,18 +163,18 @@ There are the following settings in `Style` > `Edges` panel:
- Label Color - a color of edge labels - Label Color - a color of edge labels
- Size - set an edge thickness. There are 2 modes of edge sizing: constant and variable. - Size - set an edge thickness. There are 2 modes of edge sizing: constant and variable.
* `Constant` means that all edges have the same thickness. - `Constant` means that all edges have the same thickness.
* `Variable` allows you to choose a field where the edge size is taken from. - `Variable` allows you to choose a field where the edge size is taken from.
For variable sizing it's also possible to set the scale and the minimum size. For variable sizing it's also possible to set the scale and the minimum size.
- Color - set an edge color. There are 2 modes of edge color: constant and variable. They work - Color - set an edge color. There are 2 modes of edge color: constant and variable. They work
similar to the node color modes. similar to the node color modes.
- Color As - defines how color mapping should work - continuously or categorically, similar to the - Color As - defines how color mapping should work - continuously or categorically, similar to the
node color setting. node color setting.
- Colorscale Direction - use the selected palette as is or reverse it. - Colorscale Direction - use the selected palette as is or reverse it.
### Layout ### Layout
@@ -175,30 +184,28 @@ In this layout all nodes are just placed along a circle.
#### Random #### Random
This layout places nodes randomly for each seed value. The seed value allows you to restore the This layout places nodes randomly for each seed value. The seed value allows you to restore the
random layout you liked when you open the inquiry and run the query next time. random layout you liked when you open the inquiry and run the query next time.
![Fig. 2: Random layout](./img/Screenshot_graph_random.png) ![Fig. 2: Random layout](./img/Screenshot_graph_random.png)
#### Circle pack #### Circle pack
Arranges nodes as a bubble chart according to specified attributes. You can choose multiple Arranges nodes as a bubble chart according to specified attributes. You can choose multiple
hierarchy attributes to group nodes. hierarchy attributes to group nodes.
![Fig. 3: Circle pack layout](./img/Screenshot_graph_circle_pack.png) ![Fig. 3: Circle pack layout](./img/Screenshot_graph_circle_pack.png)
#### ForceAtlas2 #### ForceAtlas2
A continuous graph layout algorithm. Read more details about the algorithm and its settings in the A continuous graph layout algorithm. Read more details about the algorithm and its settings in the
[article][4]. The algorithm works iteratively. When you choose ForceAtlas2 layout or run the query, [article][3]. The algorithm works iteratively. When you choose ForceAtlas2 layout or run the query,
it is automatically run 50 iterations of the algorithm. You can change the amount of steps run it is automatically run 50 iterations of the algorithm. You can change the amount of steps run
automatically in `Initial Iterations`. You can also run and stop the algorithm manually by automatically in `Initial Iterations`. You can also run and stop the algorithm manually by
clicking `Start`/`Stop` button. clicking `Start`/`Stop` button.
![Fig. 3: ForceAtlas2 layout](./img/Screenshot_graph_force_atlas2.png) ![Fig. 3: ForceAtlas2 layout](./img/Screenshot_graph_force_atlas2.png)
[1]: ./How-to-get-result-set-suitable-for-graph-visualisation [1]: ./How-to-get-result-set-suitable-for-graph-visualisation
[2]: https://github.com/bgrins/TinyColor/blob/d5ad0c6/README.md#accepted-string-input [2]: https://www.w3.org/TR/css-color-4/#named-colors
[3]: https://www.w3.org/TR/css-color-4/#named-colors [3]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679
[4]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679