mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
Update Graph.md
This commit is contained in:
lana-k
109
Graph.md
109
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 
|
||||
Sqliteviz allows building a graph. To build a graph, run a query to get data.
|
||||
Then open the visualisation panel by clicking 
|
||||
in any of the two side toolbars and choose a graph mode by clicking .
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
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).
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user