1
0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 10:08:52 +08:00

minor changes

This commit is contained in:
lana-k
2025-11-02 13:45:23 +01:00
parent 4a47e4ff0f
commit 521662b271

View File

@@ -18,7 +18,7 @@ To build a graph, a result set must follow the following requirements:
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,9 +49,9 @@ 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.
@@ -62,13 +62,13 @@ There are the following settings in `Style` > `Nodes` panel:
- 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:
@@ -86,36 +86,45 @@ There are the following settings in `Style` > `Nodes` panel:
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
@@ -154,8 +163,8 @@ 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.
@@ -190,15 +199,13 @@ hierarchy attributes to group nodes.
#### 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