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, and spacer (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