Complex Encodings: Axis
Concepts
The complex encodings section of a create dataset can include straight and radial axes, with optional labels:
- Radial: One or more rings can be made, based on a desired radius (distance from the center.)
Each ring can take one of three visual styles:
internal
,external
, andspacer
(faint). - Straight: Straight axis take on one overall style, and are likewise placed as a distance from position (0, 0).
- Labels: Every axis may have an optional custom label. Straight axis may also have an additional min/max bound label.
Axis examples
Example: Radial axis
{
"node_encodings": {
"bindings": {"node": "n"},
"complex": {
"default": {
"pointAxisEncoding": {
"graphType": "point",
"encodingType": "axis",
"variation": "categorical",
"attribute": "degree",
"rows": [
{"r": 1, "internal": true, "label": "innermost heavy" },
{"r": 2, "space": true, "label": "innermost light" },
{"r": 3, "space": true },
{"r": 4, "internal": true },
{"r": 5, "space": true },
{"r": 6, "external": true },
{"r": 7, "space": true },
{"r": 8, "space": true },
{"r": 9, "external": true },
{"r": 10, "external": true, "label": "outermost heavy" },
{"r": 11, "space": true, "label": "outermost light" }
]
}
}
}
},
"edge_encodings": {"bindings": {"source": "s", "destination": "d"}},
"node_files": ["file123"],
"edge_files": ["file456"],
"metadata": {},
"name": "my viz"
}
Example: Radial axis pinning
To force nodes to follow a radial axis, set their initial x
and y
position, and add URL parameter ...&lockedR=true
A common initial position for a node with radius r
and id i
is:
x = r * cos(i)
y = r * sin(i)
Example: Horizontal axis
{
"node_encodings": {
"bindings": {"node": "n"},
"complex": {
"default": {
"pointAxisEncoding": {
"graphType": "point",
"encodingType": "axis",
"variation": "categorical",
"attribute": "degree",
"rows": [
{"y": 10, "internal": True, "label": "a" },
{"y": 20, "internal": True },
{"y": 50, "external": True, "label": "c",
"width": 20, "bounds": {"min": 40, "max": 400}},
]
}
}
}
},
"edge_encodings": {"bindings": {"source": "s", "destination": "d"}},
"node_files": ["file123"],
"edge_files": ["file456"],
"metadata": {},
"name": "my viz"
}
Example: Horizontal axis pinning
To force nodes to follow horizontal axis, set their initial y
position, and add URL parameter ...&lockedY=true