Vega Reference

Introduction

This document describes the Vega specification syntax. A Vega specification is a JSON-formatted structure that describes a visualization, which can be sent to the back end for rendering.

See Tutorials, Accumulator Example, and Source Data Type with Transforms for examples of using Vega. You can also see and edit examples in Try Vega.

Resources

Standards

The JavaScript Object Notation (JSON) Data Interchange Format

Vega Concepts

MapD APIs

MapD Connector API

Specification Language Syntax

The Vega specification includes properties for describing the source data, mapping the data to the visualization area, and visual encoding. Top-level properties for the MapD implementation of Vega include the following:

Property	Type	Description
Width and Height Properties	`unsigned integer`	Visualization area width and height.
Data Property	`array`	Source data.
Projections Property	`array`	Projection data.
Scales Property	`array`	Data-to-visualization area mapping.
Marks Property	`array`	Geometric primitive used to visually encode data.

The root Vega specification has the following JSON structure:

{
  "width": <number>,
  "height": <number>,
  "data": [],
  "projections": [],
  "scales": [],
  "marks": []
}

Format rules

Property names are case-sensitive.
Property values are typed.
Unsupported properties are ignored by the rendering engine.

Width and Height Properties

Width and height properties give the width and height of the visualization area, in pixels. Both properties are required and must be positive, unsigned integers.

Example:

Set the viewing area width to 384 pixels and the height to 564 pixels.

vegaSpec = {
    width: 384,
    height: 564,
    data: [ ... elided ... ],
    projections: [ ... elided ... ]
    scales: [ ... elided ... ],
    marks: [ ... elided ... ]
};

Data Property

The Vega data model uses tabular data, similar to a spreadsheet. The data are organized in rows with any number of named columns.

General data property JSON format:

"data": [
  {
    "name": <dataID>,
    "format": <datasourceFormat>,
    "values": <valueSet> | "SQL": <dataSource> | "source": <dataSource> "transform": [ ... elided ... ]
  },
  {
     ...
  }
]

Use the data property to specify the visualization data sources by providing an array of one or more data definitions. A data definition must be an object identified by a unique name, which can be referenced in other areas of the specification. Data can be statically defined inline ("values":), can reference columns from a database table using a SQL statement ("SQL":), or can be loaded from an existing data set ("source":).

The data specification has the following properties:

Property	Data Type	Required	Description
name	string	X	User-assigned database table name.
format	string		How the data are parsed. `polys` and `lines` are the only supported `format` mark types and are for rendering purposes only.
Data Source	string		Data source: `values`: Embedded, static data values defined inline as JSON. `source`: Name of an existing Vega data set to use as this data set’s source. Use in combination with a ``transform``pipeline to derive new data. Currently, you can only source one existing data set. `sql`: A SQL query that loads the data.
transform	string		An array of transforms to perform on the input data. The output of the transform pipeline then becomes the value of this data set. Currently, can only be used with `source` data set types.

Examples:

Load discrete x- and y column values using the values database table type:

vegaSpec = {
    width: 384,
    height: 564,
    data: [
        {
          name: "coordinates",
          values: [ {"x":0, "y":3}, {"x":1, "y":5} ],
    scales: [ ... elided ... ],
    marks: [ ... elided ... ]
};

Use the sql database table type to load latitude and longitude coordinates from the tweets_data database table:

vegaSpec = {
    width: 384,
    height: 564,
    data: [
        {
          name: "tweets",
          sql: "SELECT lon as x, lat as y FROM tweets_data WHERE (lon >= -32 AND lon < 66) AND (lat >= -45 AND lat < 68)"
        }
    ],
    scales: [ ... elided ... ],
    marks: [ ... elided ... ]
};

Use the source type to use the data set defined in the sql data section and perform aggregation transforms:

vegaSpec = {
      width: 384,
      height: 564,
      data: [
              {
                      name: "tweets",
                      sql: "SELECT lon as x, lat as y FROM tweets_data WHERE (lon >= -32 AND lon < 66) AND (lat >= -45 AND lat < 68)"
              },
              {
                      name: "tweets_stats",
                      source: "tweets",
                      transform: [
                              {
                                      type: "aggregate",
                                      fields: ["x", "x"],
                                      ops: ["min", "max"],
                                      as: ["minx", "maxx"]
                              }
                      ]
              },
      ],
      scales: [ ... elided ... ],
      marks: [ ... elided ... ]
}

`name`

The name property uniquely identifies a data set, and is used for reference by other Vega properties, such as the Marks Property.

`format`

The format property indicates that data preprocessing is needed before rendering the query result. If this property is not specified, data is assumed to be in row-oriented JSON format.

This property is required for Polys Type and Lines Type mark types and the value must be polys or lines.

Format Property Description

type

Marks property type:

polys for Polys Type
lines for Lines Type

coords

Applies to type: lines.

Specifies x and y arrays, which must both be the same size.

This permits column extraction pertaining to line rendering and place them in a rendering buffer. The coords property also dictates the ordering of points in the line.

Separate x- and y-array columns are also supported.

layout

(optional) Applies to type: lines.

Specifies how vertices are packed in the vertices column. All arrays must have the same layout:

interleaved: (default) All elements corresponding to a single vertex are ordered in adjacent pairs. For example, x0, y0, x1, y1, x2, y2.
sequential: All elements of the same axis are adjacent. For example, x0, x1, x2, y0, y1, y2.

For lines, each row in the query corresponds to a single line.

This lines format example of interleaved data renders ten lines, all of the same length.

"data": [
  {
    "name": "table",
    "sql": "select lineArrayTest.rowid as rowid, vertices, color from lineArrayTest order by color desc limit 10;",
    "format": {
      "type": "lines",
      "coords": {
        "x": ["vertices"],
        "y": [
          {"from": "vertices" }
        ]
      },
      "layout": "interleaved"
    }
  }
]

In this lines format example of sequential data, x only stores points corresponding to the x coordinate and y only stores points corresponding to the y coordinate. Make sure that columns only contain a single coordinate if using multiple columns in sequential layout.

"data": [
  {
    "name": "table",
    "sql": "select lineArrayTestSeq.rowid as rowid, x, y, color from lineArrayTestSeq order by color desc limit 10;",
    "format": {
      "type": "lines",
      "coords": {
        "x": ["x"],
        "y": ["y"]
      },
    "layout": "sequential"
    }
  }
],

The following example shows a polys format:

"data": [
  {
    "name": "polys",
    "format": "polys",
    "sql": "SELECT ... elided ..."
  }
]

Data Source

The database table source property key-value pair specifies the location of the data and defines how the data is loaded:

Key	Value	Description
`source`	String	Data is loaded from an existing data set.
`sql`	SQL statement	Data is loaded using a SQL statement.
`values`	JSON data	Data is loaded from static, key-value pair data definitions.

`transform`

Transforms process a data stream to calculate new aggregated statistic fields and derive new data streams from them. Currently, transforms are specified only as part of a source data definition. Transforms are defined as an array of specific transform types that are executed in sequential order. Each element of the array must be an object and must contain a type property. Currently, two transform types are supported: aggregate and formula.

Property Description

aggregate

Performs aggregation operations on input data columns to calculate new aggregated statistic fields and derive new data streams from them. The following properties are required:

fields: An array of strings referencing columns from the sourced data table.

ops: An array of keyword strings and objects indicating the predefined operation to perform. For objects, the type property is required to name the type of the aggregation function. Supported operators:

count: The total count of data objects in the group.
countdistinct: The number of distinct values in an input data column; operates only on numeric or dictionary-encoded string columns.
distinct: An array of distinct values from an input data column; operates only on numeric or dictionary-encoded string columns.
max: The maximum field value.
mean / average / avg: The mean (average) field value.
median: The median of an input data column; operates only on numeric columns.
min: The minimum field value.
missing: The count of field values that are null or undefined.
quantile: An array of quantile separators; see https://en.wikipedia.org/wiki/Quantile. Operates only on numeric columns:
- numQuantiles: The number of contiguous intervals to create; returns the separators for the intervals. The number of separators equals numQuantiles - 1. Range: 1-100. Default: 4
- includeExtrema: Whether to include min and max values (extrema) in the resulting separator array. When true, the resulting array size is numQuantiles + 1. Values: true or false. Default: false
sum: The sum of field values.
stddev: The sample standard deviation of field values.
stddevp: The population standard deviation of field values.
valid: The count of field values that are not null nor undefined.
variance: The sample variance of field values.
variancep: The population variance of field values.

as: An array of strings used as output names of the operations for later reference.

formula

Evaluates a user-defined expression. The following properties are required:

expr: An expression string to be evaluated. Expressions currently support these operators and functions.

as: A string used as an output name for later reference.

Note: Currently, expressions can only be performed against outputs (as values) from prior aggregate transforms.

See Example: Using the source Data Type with Transforms for an example of using the source and transform properties.

Projections Property

Vega projections map longitude and latitude data to projected x and y coordinates. When working with geospatial data in MapD, you can use projections to define geographic points and regions.

General projections property JSON format:

"projections": [
       {
         "name": "<projectionName>",
         "type": "<projectionType>",
         "bounds": {
               "x": [<minLong>,<maxLong>],
               "y": [<minLat>,<maxLat>]
         }
       }
]

When you specify a projection, you must reference it in the Marks Property using the transform object. For example, if you define the projection my_mercator_projection:

"projections": [
{
   "name": "my_mercator_projection",
   "type": "mercator",
   "bounds": {
     "x": [-120.0, 120.0],
     "y": [-20.0,20.0]
   }
 }
 ]

you then reference it as follows:

"marks": [
{
   "type": "symbol",
   "from": { "data": "fec_contributions_oct" },
   "properties": { ... elided ... }
   "transform": {
      "projection": "my_mercator_projection"
   }
 }
 ]

The projections specification has the following properties:

Property Data Type Required Description

name string X User-assigned name of the projection.

type

string

X

Projection type. Currently supported types:

mercator: Mercator map projection.

bounds

object

Specifies the longitude and latitude bounding box for the projection. Default values:

x: [-180.0, 180.0]
y: [-85.0, 85.0]

Example:

Use Vega projection projection alongside array columns:

{
      "width": 1024,
      "height": 1024,
      "data": [
              {
                      "name": "table",
                      "sql": "SELECT rowid, coords[1] as x, coords[2] as y FROM cities WHERE coords[1] BETWEEN $minLon AND $maxLon AND coords[2] BETWEEN $minLat AND $maxLat"
              }
      ],
      "projections": [
      {
              "name": "projection",
              "type": "mercator",
              "bounds": {
              "x": [-120.0, 120.0],
              "y": [-20.0, 20.0]
              }
      }
      ],
      "scales": [
      ],
      "marks": [
              {
                      "type": "symbol",
                      "from": {"data": "table"},
                      "properties": {
                              "shape": "circle",
                              "xc": {
                                      "field": "x"
                              },
                              "yc": {
                                      "field": "y"
                              },
                              "fillColor": "darkblue",
                              "width": 25,
                              "height": 25
                      },
                      "transform": {
                              "projection": "projection"
                      }
              }
      ]
}

Scales Property

The scales property maps visually encoded data values to pixel positions with attributes, such as color. See the D3 scales documentation for additional background information about scales.

General scales property JSON format:

"scales": [
  {
    "name": <scaleID>,
    "type": <scaleType>,
    "domain": <inputValues>,
    "range": <outputValues>"
    "accumulator": <accumulatorType>
    "default": <defaultOutputValue>,
    "nullValue": <nullDataValue>
  },
  {
     ...
  }
],

The scales specification is one or more arrays with the following properties:

Property Field	Data Type	Required	Description
name	string	X	User-defined scale name.
type	string		Scale type, which specifies the``domain``-to-`range` transform: `linear`: Quantitative, continuous scale that preserves proportion among data items. `log`: Quantitative scale that applies a logarithmic transform to the data. `ordinal`: Discrete domain and range scale. `pow`: Quantitative scale that applies an exponential transform to the input data. `quantize`: Quantitative, discrete scale that divides input data into segments. `sqrt`: Quantitative scale that applies an square root transform to the input data. `threshold`: Discrete scale that maps arbitrary domain subsets to discrete range values.
domain	array		Domain. Array of input interval data values.
range	string or array		Range. Array of output interval visual data values.
default	number		Default output value to use when domain value does not map to range value.
accumulator	string		Accumulation rendering type: `blend`: Blends colors by category. Works only for discrete output scales (ordinal, quantize, and threshold). `density`: Performs count aggregation per pixel and applies the supplied color based on the normalization of the per-pixel aggregated counts over a specified range. The range is determined by the required `minDensityCnt` and `maxDensityCnt` properties. `minDensityCnt` and `maxDensityCnt` can be explicit integer values or one of the following keywords that automatically compute statistical information about the per-pixel counts: `min` `max` `-1stStdDev` `-2ndStdDev` `1stStdDev` `2ndStdDev` `pct`: Apply a color range based on percentage accumulation for a specific category.
nullValue	number		Output value to use when input value is `null`.

Note: As a general rule, limit the total number of domain and range values used to a maximum of 1000. Exceeding this limit can cause an error.

Example:

Define two scales, x and y. For the x scale, linearly transform input data values between -100 and 999 to the visualization area width. For the y scale, linearly transform input data values between 0 and 500 to the visualization area height. The width and height range values are pre-defined literals that reference the Width and Height Properties.

vegaSpec = {
    width: 384,
    height: 564,
    data: [ ... elided ... ],
    scales: [
        {
            name: "x",
            type: "linear",
            domain: [ -100, 999 ],
            range: "width"
        },
        {
            name: "y",
            type: "linear",
            domain: [ 0, 500 ],
            range: "height"
        }
    ],
    marks: [ ... elided ... ]
};

`name`

The name property uniquely identifies the scale for reference by other properties.

`type`

The type property specifies how to transform the input, domain data to output, range visual values. Vega supports the following transforms, categorized by quantitative, discrete, and discretizing scales:

Quantitative Scales

Type	Description	Additional Information
`linear`	Preserves proportional differences, where range value y can be expressed as a linear function of the domain value `x: y = mx + b`.	D3 linear scale
`log`	Applies a logarithmic transform to the input domain value before the output range value is computed. The mapping to the range value y can be expressed as a logarithmic function of the domain value x: `y = m log(x) + b`. As `log(0) = -∞`, a log scale domain must be strictly-positive or strictly-negative. The domain must not include or cross zero. A log scale with a positive domain has a well-defined behavior for positive values. A log scale with a negative domain has a well-defined behavior for negative values. For a negative domain, input and output values are implicitly multiplied by `-1`. The behavior of the scale is undefined if you compute a negative value for a log scale with a positive domain, and vice versa. `log` scale values must be positive. Default = base `10`.	D3 logarithmic scale
`pow`	Applies an exponential transform to the input domain value before the output range value is computed. Range value y can be expressed as a polynomial function of the domain value x: `y = mx^k + b`, where `k` is the exponent. Power scales also support negative domain values, and input value and resulting output value are then multiplied by -1. Default exponent = `1`.	D3 power scale
`sqrt`	A shorthand for power scales with an exponent of 0.5, indicating a square root transform. `sqrt` scale values must be positive.	D3 sqrt scale

Discrete Scales

Type Description Resource

ordinal

Applies a discrete domain-to-range transform, and functions as a lookup table from a domain value to a range value.

Specify a default value for domain values that do not map to a range.

D3 ordinal scale

Discretizing Scales

Type	Description	Resource
`quantize`	Divides input domain values into uniform segments based on the number of values in, or the cardinality of, the output range, where range value y can be expressed as a quantized linear function of the domain value x: `y = m round(x) + b.`	D3 quantize scale
`threshold`	Maps arbitrary, non-uniform subsets of the domain to discrete range values. The input domain is continuous but divided into slices based on a set of domain threshold values. The range must have N+1 elements, where N is the number of domain threshold boundaries.	D3 threshold scale

`domain`

The domain field specifies the domain of input data values. For quantitative data, this can take the form of a two-element array.

Example:

Specify minimum and maximum input values.

domain: [ -100, 999 ]

For ordinal or categorical data, the domain can be an array of valid input values.

Example:

Specify valid input data languages.

"domain": ["en",  "es", "fr"]

`range`

Scale range specifies the set of visual values. For numeric values, the range can take the form of a two-element array with minimum and maximum values. For ordinal or quantized data, the range can be an array of desired output values, which are mapped to elements in the specified domain.

Scale ranges can be specified in the following ways:

As an array of static values: "range": [0, 500] or "range": ['a', 'b', 'c'].
Using pre-defined literals: "range": "width" or "range": "height".

Example:

Specify a color scale that quantizes input values between 0 and 100 among five visual output colors.

{
  name: "color",
  type: "quantize",
  domain: [ 0, 100 ],
  range: [ "#115f9a", "#1984c5", "#c9e52f", "#d0ee11", "#d0f400"
  ]
}

Scale ranges can accept width and height string literals that map to the Width and Height Properties.

Value	Description
`width`	A spatial range that is the value of t``width``.
`height`	A spatial range that is the value of `height`. The direction of the range, top-to-bottom or bottom-to-top, is determined by to the scale type.

Example:

Specify a y scale that linearly maps input values between 0 and 500 to the height of the visualization area.

{
    name: "y",
    type: "linear",
    domain: [ 0, 500 ],
    range: "height"
}

`default`

The default scales property specifies the output value to use when the input domain value does not map to the range.

The default property is not applicable to the threshold scale type, which maps domain values outside of the range to either the lowest or highest range value.

`accumulator`

The accumulator property enables you to identify regional density of data in a layer of a backend render and apply pixel coloring based on the accumulation mode that you have defined. Each data point is rendered individually, providing an accurate representation of data distribution in a spatial setting.

Mode Description

density

Perform count aggregation per pixel and define a color for a pixel by normalizing the count and applying a color to it based on a color scale.

You can activate density accumulation for any scale that takes as input a continuous domain (linear, sqrt, pow, log, threshold scales) and outputs a color range. The range is determined by the required minDensityCnt and maxDensityCnt properties. minDensityCnt and maxDensityCnt can be explicit integer values or one of the following keywords that automatically compute statistical information about the per-pixel counts:

min
max
-1stStdDev
-2ndStdDev
1stStdDev
2ndStdDev

Note: Domain values of density accumulators must be between 0 and 1 inclusive.

blend Blend by category (ultimately an ordinal scale). You can provide a color to a category and blend those colors to show the density of the distinct categorical values at a pixel.

pct For a specific category, apply color based on the percentage of the category in a region.

Example:

Apply a density accumulator to a linear scale named pointcolor:

{
  "name": "pointcolor",
  "type": "linear",
  "domain": [0.0,1.0],
  "range": ["blue","red"],
  "clamp": true,
  "accumulator": "density",
  "minDensityCnt": 1,
  "maxDensityCnt": 100
}

The color at a pixel is determined by normalizing per-pixel aggregated counts and using that value in the scale function to calculate a color. Normalization is performed according to the required minDensityCnt and maxDensityCnt properties. After normalization, minDensityCnt == 0 and maxDensityCnt == 1.

minDensityCnt and maxDensityCnt can have explicit integer values or use one of the following keywords to compute statistical information about per-pixel counts: min, max, -1stStdDev, -2ndStdDev, 1stStdDev, 2ndStdDev.

For more detailed examples of using accumulators, see Example: Vega Accumulator.

`nullValue`

The nullValue scales property specifies the output value to use when the input value is null.

Marks Property

Marks visually encode data using geometric primitives.

The marks property has the following general JSON format:

"marks": [
  {
    "type": <marksType>,
    "from": { data: <dataSourceID> },
    "properties": { <propName>: <propVal> }, ... { <propName>: <propVal> }
    "transform": { <transformType>: <transformName> }
  },
  {
     ...
  }
],

A marks specification includes the following properties:

Property	Data Type	Required	Description
type	string	X	Graphical marks type or shape.
from	object	lines polys	Database table associated with the marks.
properties	object	X	Visual encoding rules. Valid properties depend on marks `type`.
transform	object		Transforms applied to a mark.

Each marks property is associated with the specified Data Property.

Example:

Associate the points geometric primitive with tweets data items.

vegaSpec = {
    "width": 384,
    "height": 564,
    "data": [
        {
            "name": "tweets",
            "sql": "SELECT  ... elided ... "
        }
    ],
    "scales": [ ... elided ... ],
    "marks": [
        {
            "type": "points",
            "from": { data: "tweets" },
            "properties": { ... elided ... }
        },
        { ... elided ... }
    ]
};

Marks are rendered in marks property array order.

Marks property values can be constants or as data references. You can use the Scales Property to transform marks property values to the visualization area.

Example:

Apply the x and y scales to the x and y database table columns to scale the data to the visualization area width and height.

const exampleVega = {
  "width:" 384,
  "height:" 564,
  "data:" [ ... elided ... ],
  "scales:" [
    {
      "name:" "x",
      "type:" "linear",
      "domain:" [-3650484.1235206556,7413325.514451755],
      "range:" "width"
    },
    {
      "name:" "y",
      "type:" "linear",
      "domain:" [-5778161.9183506705, 10471808.487466192],
      "range:" "height"
    }
  ],
  "marks:" [
    {
      "type:" "points",
      "from:" { "data:" "tweets" },
      "properties:" {
        "x:" { "scale:" "x", "field:" "x" },
        "y:" { "scale:" "y","field:" "y"}
      }
    }
  ]
};

`type`

The marks property must include a type property that specifies the geometric primitive to use to render the data.

marks type	Description
`points`	Render marks as points. See Points Type.
`lines`	Render marks as lines. See Lines Type.
`polys`	Render marks as a polygon. See Polys Type.
`symbol`	Render marks as a shape. See Symbol Type.

Points Type

The points marks type renders data as a point.

Vega supports the following points properties:

Property	Data Type	Description
`fillColor`	color	Fill color. Must be a scale/data reference, a string, or a color represented by a 32-bit integer or unsigned integer. See Color Value Reference.
`fillOpacity`	number	The fill opacity, from transparent (`0`) to opaque (`1`). If used with `opacity`, the values are multiplied together to determine final opacity.
`opacity`	number	The line opacity as a whole, from transparent (`0`) to opaque (`1`). If used with `fillOpacity`, the values are multiplied together to determine final opacity.
`size`	number	Graphical primitive size, in pixels. Must be a scale/data reference or a number.
`x`	number	Primary x-coordinate, in pixels. Must be a scale/data reference or a number for `points`, or a scale/data reference for polys. See Value Reference.
`y`	number	Primary y-coordinate, in pixels. Must be a scale/data reference or a number for `points`, or a scale/data reference for polys. See Value Reference.
`z`	number	Primary depth-coordinate, in pixels. Must be a scale/data reference or a number for `points`. See Value Reference.

Specify x and y coordinate values using either constants, or domain and range values of a data reference. If the from property is not specified, the x and y properties fields must be constants.

Example: Define a point with size, color, and opacity:

{
  "width" : 1024,
  "height" : 1024,
  "data": [
    {
      "name" : "table",
        "values": [
          {"x": 412, "y": 512, "val": 0.9,"color": "red"},
          {"x": 512, "y": 512, "val": 0.3, "color": "violet"},
          {"x": 612, "y": 512, "val": 0.5,"color": "green"}
        ]
     }
      ],
  "marks" : [
    {
      "type" : "points",
      "from" : {"data" : "table"},
        "properties" : {
          "x" : { "field" : "x" },
          "y" : { "field" : "y" },
          "fillColor" : {
              "field" : "color"
                      },
                      "size" : 150.0,
                      "fillOpacity" : {
                              "field" : "val"
                      },
                      "opacity" : 0.8
               }
             }
       ]
     }

Lines Type

The lines marks type renders data as a line.

The data format property must be specified as lines. This causes the rendering engine to assume a lines database table layout and to xtract line-related columns from the table.

Vega supports the following lines properties:

Property	Data Type	Description
`lineJoin`	string	Line join method: `bevel` Extension of a line end. `miter` Clipped extension of a line end. `round` Semi-circle at a line end.
`miterLimit`	number	The miter limit at which to bevel a line join, in pixels. Must be a positive number. Default = `10.0`
`opacity`	number	The line opacity as a whole, from transparent (`0`) to opaque (`1`). If used with `strokeOpacity`, the values are multiplied together to determine final opacity.
`strokeColor`	color	Stroke color. Must be a scale/data reference, a string, or a color represented by a 32-bit integer or unsigned integer. See Color Value Reference. Default color = `white`
`strokeOpacity`	number	The stroke opacity, from transparent (`0`) to opaque (`1`). If used with `opacity`, the values are multiplied together to determine final opacity.
`strokeWidth`	number	Stroke width, in pixels. Must be a scale/data reference or a number.
`x`	number	Primary x-coordinate, in pixels. Must be a scale/data reference or a number for `lines`, or a scale/data reference for polys. See Value Reference.
`y`	number	Primary y-coordinate, in pixels. Must be a scale/data reference or a number for `lines`, or a scale/data reference for polys. See Value Reference.

Specify x and y coordinate values using either constants, or domain and range values of a data reference. If the from property is not specified, the x and y properties fields must be constants.

Example:

{
  "type": "lines",
  "from": {"data": "table"},
  "properties": {
    "x": {
      "field": "x",
      "scale": "x"
    },
    "y": {
      "field": "y",
      "scale": "y"
    },
    "strokeColor": {
      "scale": "strokeColor",
      "field": "color"
    },
    "strokeWidth": 2,
    "lineJoin": "miter",
    "miterLimit": 10
  }
}

Polys Type

The polys type renders data as a polygon, and the data property from property must be set to polys.

Because the data format property is polys, the rendering engine assumes a polys database table layout and extracts the poly-related columns from the table. A polys database table layout implies that the first data column is the vertex x- and y-positions. The vertices are interleaved x and y values, such that vertex[0] = vert0.x, vertex[1] = vert0.y, vertex[2] = vert1.x, and vertex[3] = vert1.y, for example. The next three positions of a polys database table are the triangulated indices, and line loop and drawing information for unpacking multiple, associated polygons that can be packed as a single data item.

Vega supports the following polys properties:

Property	Data Type	Description
`fillColor`	color	Fill color. Must be a scale/data reference, a string, or a color represented by a 32-bit integer or unsigned integer. See Color Value Reference.
`fillOpacity`	number	The fill opacity, from transparent (`0`) to opaque (`1`). If used with `opacity`, the values are multiplied together to determine final opacity.
`lineJoin`	string	Line join method: `bevel` Extension of an endpoint. `miter` Clipped extension of an endpoint. `round` Semi-circle at an endpoint.
`miterLimit`	number	The miter limit at which to bevel a line join, in pixels. Must be a positive number. Default = `10.0`
`opacity`	number	The polygon opacity as a whole, from transparent (`0`) to opaque (`1`). If used with `strokeOpacity` or `fillOpacity`, the values are multiplied together to determine final opacity.
`strokeColor`	color	Stroke color. Must be a scale/data reference, a string, or a color represented by a 32-bit integer or unsigned integer. See Color Value Reference. Default color = `white`
`strokeOpacity`	number	Stroke opacity, from transparent (`0`) to opaque (`1`). If used with `opacity`, the values are multiplied together to determine final opacity.
`strokeWidth`	number	Stroke width, in pixels. Must be a scale/data reference or a number.
`x`	number	Primary x-coordinate, in pixels. Must be a scale/data reference or a number for `points`, or a scale/data reference for polys. See Value Reference.
`y`	number	Primary y-coordinate, in pixels. Must be a scale/data reference or a number for `points`, or a scale/data reference for polys. See Value Reference.

Example:

const exampleVega = {
  "width": 1004,
  "height": 336,
  "data": [
    {
      "name": "polys",
      "format": "polys",
      "sql": "SELECT ... elided ..."
    }
  ],
  "scales": [ ... elided ... ]
  "marks": [
    {
      "type": "polys",
      "from": {
        "data": "polys"
      },
      "properties": {
        "x": {
          "scale": "x",
          "field": "x"
        },
        "y": {
          "scale": "y",
          "field": "y"
        },
        "fillColor": {
          "scale": "polys_fillColor",
          "field": "avgContrib"
        },
        "strokeColor": "white",
        "strokeWidth": 0,
        "lineJoin": "miter",
        "miterLimit": 10
      }
    }
  ]
}

Symbol Type

The symbol marks type renders data as one of the following shapes:

Shape Literal	Description
`circle`	Circle
`cross`	Cross
`diamond`	Diamond
`hexagon-horiz`	Horizontal hexagon
`hexagon-vert`	Vertical hexagon
`square`	Square
`triangle-down`	Triangle pointing down
`triangle-left`	Triangle pointing left
`triangle-right`	Triangle pointing right
`triangle-up`	Triangle pointing up

Vega supports the following symbol properties:

Property	Data Type	Description
`fillColor`	color	Fill color. Must be a scale/data reference, a string, or a color represented by a 32-bit integer or unsigned integer. See Color Value Reference.
`fillOpacity`	number	The fill opacity, from transparent (`0`) to opaque (`1`). If used with `opacity`, the values are multiplied together to determine final opacity.
`height`	number	Mark height, in pixels.
`stroke`	color	Stroke color.
`lineJoin`	string	Stroke line join method: `miter` (default) `round` `bevel`
`miterLimit`	number	Miter limit at which to bevel a line join.
`opacity`	number	The symbol opacity as a whole, from transparent (`0`) to opaque (`1`).
`shape`	string	Shape name listed in the above table.
`strokeWidth`	number	Stroke width, in pixels.
`strokeOpacity`	number	Stroke opacity, from transparent (`0`) to opaque (`1`). If used with `opacity`, the values are multiplied together to determine final opacity.
`width`	number	Mark width, in pixels.
`x`	number	Primary x-coordinate, in pixels. Must be a scale/data reference or a number for `symbol`, or a scale/data reference for polys. See Value Reference.
`x2`	number	Secondary x-coordinate, in pixels. See Value Reference.
`xc`	number	Center x-coordinate, in pixels. Incompatible with `x` and `x2`. See Value Reference.
`y`	number	Primary y-coordinate, in pixels. Must be a scale/data reference or a number for `symbol`, or a scale/data reference for polys. See Value Reference.
`y2`	number	Secondary y-coordinate, in pixels. See Value Reference.
`yc`	number	Center y-coordinate, in pixels. Incompatible with `y` and `y2`. See Value Reference.
`z`	number	Primary depth-coordinate, in pixels. Must be a scale/data reference or a number for `symbol`. See Value Reference.

Note: Currently, in symbol mark types, strokes are not visible beneath other marks, regardless of opacity settings.

Specify x and y coordinate values using either constants or domain and range values of a data reference. If the from property is not specified, the x and y properties fields must be specified using constant values.

Examples:

const exampleVega = {
  "width": 733,
  "height": 530,
  "data": [
    {
      "name": "heatmap_query",
      "sql": "SELECT ... elided ... "
    }
  ],
  "scales": [ ... elided ... ],
  ],
  "marks": [
    {
      "type": "symbol",
      "from": {
        "data": "heatmap_query"
      },
      "properties": {
        "shape": "square",
        "x": { "field": "x" },
        "y": { "field": "y" },
        "width": 1,
        "height": 1,
        "fillColor": { "scale": "heat_color", "field": "cnt" }
      }
    }
  ]
};

The following example defines symbol mark types including fill, stroke, and general opacity properties:

{
  "width" : 1024,
  "height" : 1024,
  "data": [
      {
          "name" : "table",
          "values": [
              {"x": 200,  "x2": 0.0, "y": 200.0, "y2": 0.0, "val" : 0, "color" : "red", "color2": "yellow", "opacity": 1.0, "fillOpacity":0.75, "strokeOpacity": 0.25},
              {"x": 220.806,  "x2": 0.0, "y": 263.75, "y2": 0.0, "val" : 1, "color" : "blue", "color2": "green", "opacity": 0.5, "fillOpacity": 0.5, "strokeOpacity": 0.5},
              {"x": 240.61216,  "x2": 0.0, "y": 327.5, "y2": 0.0, "val" : 0, "color" : "maroon", "color2": "magenta", "opacity": 0.1, "fillOpacity": 0.25, "strokeOpacity": 0.75}
          ]
      }
  ],
  "marks" : [
      {
          "type" : "symbol",
          "from" : {"data" : "table"},
          "properties" : {
                      "shape" : "circle",
              "xc" : { "field" : "x" },
              "yc" : { "field" : "y" },
                      "width": 150.0,
                  "height": 150.0,
              "opacity": 0.9,
              "fillOpacity": {
                  "field": "fillOpacity"
              },
              "fillColor" : {
                  "field": "color2"
              },
                      "strokeWidth" : 10.0,
                      "strokeColor" : {
                  "field": "color"
              },
              "strokeOpacity": {
                  "field": "strokeOpacity"
              }
          }
      }
   ]
}

`from`

The from field specifies the input database table to use.

Data Source Field	Data Type	Description
`data`	string	Name of the data source. The `data` name must be defined in the Data Property. See Data Property.

Example:

Use the tweets database table for marks input data.

vegaSpec = {
    "width": 384,
    "height": 564,
    "data": [
        {
          "name": "tweets",
          "sql": "SELECT ... elided ... "
        }
    ],
    "scales": [ ... elided ... ],
    "marks": [
        {
            "type": "polys",
            "from": {"data": "tweets"},
            "properties": { ... elided ... }
        }
    ]
};

If from is not specified, the data source is implicitly a single point with the value defined in the points properties.

`properties`

The properties property specifies type-dependent visual encoding that define the position and appearance of mark instances.

Typically, a single mark instance is generated per input data element, except for polys, which use multiple data elements to represent a line or area shape.

The properties property defines visual encoding rules. The property value is specified using one of the Value Reference options.

See the Points Type, Polys Type, and Symbol Type for a list of properties supported by each marks type.

Value Reference

A value reference describes how to specify marks properties values. The value can be a constant or data object reference:

Name	Type Description
`value`	Any	Constant value. If `field` is specified, `value` is ignored.
`field`	Field Reference	Perform a lookup on the current data value. The marks `from` property determines the source data table and the `field` name must be a column defined in the `data`. See Data Property.
`scale`	Field Reference	Name of a scale transform to apply to the mark. If the input is an object, it indicates a field value from which to dynamically look up the scale name and follows the Field Reference format. See Scales Property.

Examples:

Statically set the point fillColor and size.

"marks:" [
  {
    "type:" "points",
    "from:" {
      "data:" "tweets"
    },
    "properties:" {

         ... elided ...

      "fillColor": "blue",
      "size": 3
      }
    }
  }
]

For the x marks property, apply the x scale transform to the implicit x-coordinate data column.

"marks": [
  {
    "type": "polys",
    "from": {
      "data": "polys"
    },
    "properties": {
      "x": {
        "scale": "x",
        "field": "x"
      },

      ... elided ...

    }
  }
]

Field Reference

A field reference is either a string literal or an object. For object values, the following properties are supported:

Property	Type	Description
Property Name	FieldRef	Perform a lookup on the property name. This is the default operation when a field reference is a string.

Color Value Reference

Typically, color values are specified as a single RGB color value. To specify specific color fields or use a different color space, use one of the following color value reference formats:

Property Value Field Data Type Description

field string Name of the attribute from the data: sql field.

colorSpace

string

Space in which the color is defined:

Hue-Chroma-Luminance color space. See HCL color space.
- Use r, g, and b property names.
Hue, saturation, and lightness color space. See HSL and HSV color space.
- Use h, s, and l property names.
Lab color space. A perceptual color space with distances based on human color judgments. The L dimension represents luminance, the A dimension represents green-red opposition and the B dimension represents blue-yellow opposition. See Lab color space.
- Use l, a, and b property names.
RGB color space. A version of LAB, which uses polar coordinates for the AB plane. See RGB color space.
- Use h, c, and l property names.

Examples:

Set the red and blue channels of an RGB color as constants, and uses a scale transform to determine the green channel:

"fill": {
 "r": {"value": 255},
 "g": {"scale": "green", "field": "g"},
 "b": {"value": 0}
}

Use the rgb color space for the color field:

"fillColor": {
    "field": "color",
    "colorSpace": "rgb"
}

`transform`

The transform object specifies any Projections Property defined in Vega projections to be applied to the mark. Each transform is specified as a key:value pair in the transform object:

},
"transform": {
      "<key>": "<value>"
}

The value references an existing Vega object by name.

For example, the following transform references the projection my_mercator_projection defined in the top-level Vega projections property.

"projections": [
{
  "name": "my_mercator_projection",
  "type": "mercator",
  "bounds": {
    "x": [-120.0, 120.0],
    "y": [-20.0, 20.0]
  }
}
]
"marks": [
{
  "type": "symbol",
  "from": { "data": "fec_contributions_oct" },
  "properties": { ... elided ... }
  "transform": {
    "projection": "my_mercator_projection"
  }
}
]

Note: Currently, the only supported transform is projection.

Main Content

Vega Reference

Introduction

Resources

Standards

Related Vega Implementations

Vega Concepts

MapD APIs

Specification Language Syntax

Format rules

Width and Height Properties

Data Property

name

format

Data Source

transform

Projections Property

Scales Property

name

type

Quantitative Scales

Discrete Scales

Discretizing Scales

domain

range

default

accumulator

nullValue

Marks Property

type

Points Type

Lines Type

Polys Type

Symbol Type

from

properties

Value Reference

Field Reference

Color Value Reference

transform

`name`

`format`

`transform`

`name`

`type`

`domain`

`range`

`default`

`accumulator`

`nullValue`

`type`

`from`

`properties`

`transform`