Skip to main content

Scales

A scale is a mapping from data values to visual values such as a color, position or size.

Network Panorama represents scales in the same way as Vega. Internally, it uses the vega-encode package to construct a d3-scale function from the provided specification.

A scale maps from element in a *domain" to elements in a "range".

Domains​

Domains can be specified in one of two ways:

  • explicitly (e.g., as [0, 40])
  • as the extent of a particular field (e.g., { "data": "my-network.nodes", "field": "degree"} })

Example scales​

Linear​

{
    "name": "radius",
    "type": "linear",
    "range": [1, 500],
    "domain": [0, 40]
}

Ordinal​

{
    "name": "groupColor",
    "type": "ordinal",
    "domain": ["a", "b", "c"],
    "range": ["red", "green", "blue"]
}

Color scale​

See the list of color scheme names.

{
        "name": "color",
        "type": "linear",
        "scheme": "blues",
        "domain": [0, 10]
}

Time​

The domain is in Unix time.

{
  "name": "time",
  "type": "time",
  "range": [0, 500],
  "domain": [-10098172800000, -8488886400000 ]
}

Ranges​

A range can be defined using:

  • an array of literal values (e.g., [0, 100])
  • a reference to the size of the bounding box in layout (width/height/x/y or area)
  • an expression

Defining scale ranges with expressions​

It can be useful to define the rage of a scale using an expression . For example, when specifying a glyph to be drawn inside a cell of an adjacency matrix, it may be useful to define a scale in terms of the size of the matrix cell.

NetPanorama extends the syntax of Vega-Lite to support this by either:

  • setting rangeExpressions to be an array of expressions; each element of the array is evaluated as an expression, and the resulting array is used as if it had been set as the domain
  • setting a rangeMapFunction: this defines an expression that is applied to each element of the domain

For a linear scale whose domain is a start and end value, it may be most concise to use a domainExpression; for an ordinal scale whose domain includes many values, it may be most concise to use a domainMapFunction.

For example:

"scales": [
  {
    "name": "innerPos",
    "type": "ordinal",
    "domain": ["B", "Y", "G", "P"],

    "range": [0, 1, 2, 3],
    "rangeMapFunction": "datum * bounds.width/ 4",
    }
],