1
0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +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
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
@@ -49,9 +49,9 @@ There are the following settings in `Style` > `Nodes` panel:
- 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 given size.
* `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.
- `Constant` means that all nodes have the same given size.
- `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.
Currently, 3 methods are available: total node degree, degree by in-edges and
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.
* `Constant` means that all nodes have the same color.
* `Variable` allows you to choose a field by which the color is determined.
- `Constant` means that all nodes have the same color.
- `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
color palette.
* `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
ways][2]:
- `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
ways:
1. As Hex, 8-digit (RGBA) Hex:
@@ -86,36 +86,45 @@ There are the following settings in `Style` > `Nodes` panel:
2. RGB, RGBA:
```
// As a string:
rgb(255, 0, 0)
rgb 255 0 0
rgba(255, 0, 0, .5)
// As a nested structure:
{ "r": 255, "g": 0, "b": 0 }
```
3. HSL, HSLA:
```
// As a string:
hsl(0, 100%, 50%)
hsla(0, 100%, 50%, .5)
hsl(0, 100%, 50%)
hsl 0 1.0 0.5
// As a nested structure:
{ "h": 0, "s": 1, "l": .5 }
```
4. HSV, HSVA:
```
// As a string:
hsv(0, 100%, 100%)
hsva(0, 100%, 100%, .5)
hsv(0 100% 100%)
hsv 0 1 1
// As a nested structure:
{ "h": 0, "s": 100, "v": 100 }
```
5. Named colors:
Case insensitive names are accepted, using the list of [colors in the CSS
spec][3].
spec][2].
```
RED
@@ -154,8 +163,8 @@ There are the following settings in `Style` > `Edges` panel:
- Label Color - a color of edge labels
- Size - set an edge thickness. There are 2 modes of edge sizing: constant and variable.
* `Constant` means that all edges have the same thickness.
* `Variable` allows you to choose a field where the edge size is taken from.
- `Constant` means that all edges have the same thickness.
- `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.
@@ -190,15 +199,13 @@ hierarchy attributes to group nodes.
#### ForceAtlas2
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
automatically in `Initial Iterations`. You can also run and stop the algorithm manually by
clicking `Start`/`Stop` button.
![Fig. 3: ForceAtlas2 layout](./img/Screenshot_graph_force_atlas2.png)
[1]: ./How-to-get-result-set-suitable-for-graph-visualisation
[2]: https://github.com/bgrins/TinyColor/blob/d5ad0c6/README.md#accepted-string-input
[3]: https://www.w3.org/TR/css-color-4/#named-colors
[4]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679
[2]: https://www.w3.org/TR/css-color-4/#named-colors
[3]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679