vega-lite-api

vl.data(data)

Create a new data reference for a chart or lookup.

The behavior of this method depends on the argument type:

• If the argument is an Array, sets the values property.
• If the argument is an Iterable, sets the values property.
• If the argument is a String, sets the url property.
• Otherwise, sets the properties defined on the input argument(s), if provided.

data Method Overview

• align
• autosize
• background
• bounds
• center
• config
• data
• datasets
• description
• encode
• facet
• fields
• hconcat
• height
• key
• layer
• mark
• mark
• name
• padding
• params
• project
• render
• repeat
• resolve
• select
• spacing
• title
• toSpec
• toString
• toView
• transform
• usermeta
• vconcat
• view
• width

data API Reference

# data.align(value)

The alignment to apply to grid rows and columns. The supported string values are "all", "each", and "none".

• For "none", a flow layout will be used, in which adjacent subviews are simply placed one after the other.
• For "each", subviews will be aligned into a clean grid structure, but each row or column may be of variable size.
• For "all", subviews will be aligned and each row or column will be sized identically based on the maximum observed size. String values for this property will be applied to both grid rows and columns.

Alternatively, an object value of the form {"row": string, "column": string} can be used to supply different alignments for rows and columns.

Default value: "all".

# data.autosize(value)

How the visualization size should be determined. If a string, should be one of "pad", "fit" or "none". Object values can additionally specify parameters for content sizing and automatic resizing.

Default value: pad

# data.background(value)

CSS color property to use as the background of the entire view.

Default value: "white"

# data.bounds(value)

The bounds calculation method to use for determining the extent of a sub-plot. One of full (the default) or flush.

• If set to full, the entire calculated bounds (including axes, title, and legend) will be used.
• If set to flush, only the specified width and height values for the sub-view will be used. The flush setting can be useful when attempting to place sub-plots without axes or legends into a uniform grid structure.

Default value: "full"

# data.center(value)

Boolean flag indicating if subviews should be centered relative to their respective rows or columns.

An object value of the form {"row": boolean, "column": boolean} can be used to supply different centering values for rows and columns.

Default value: false

# data.config(value)

Vega-Lite configuration object. This property can only be defined at the top-level of a specification.

# data.data(data)

The input data specification.

The behavior of this method depends on the argument type:

• If the argument is an Array, sets the data.values property.
• If the argument is an Iterable, sets the data.values property.
• If the argument is a String, sets the data.url property.
• Otherwise, sets the data property.

# data.datasets(value)

A global data store for named datasets. This is a mapping from names to inline datasets. This can be an array of objects or primitive values or a string. Arrays of primitive values are ingested as objects with a data property.

# data.description(value)

Description of this mark for commenting purpose.

# data.encode(…encoding)

Specify visual encodings for the mark.

# data.facet(…values)

Facet into sub-plots by partitioning data values.

# data.fields(…values)

Fields to retrieve in a lookupData reference.

# data.hconcat(…values)

Create a hconcat chart that visualizes this data reference.

# data.height(value)

The height of a visualization.

• For a plot with a continuous y-field, height should be a number.
• For a plot with either a discrete y-field or no y-field, height can be either a number indicating a fixed height or an object in the form of {step: number} defining the height per discrete step. (No y-field is equivalent to having one discrete step.)
• To enable responsive sizing on height, it should be set to "container".

Default value: Based on config.view.continuousHeight for a plot with a continuous y-field and config.view.discreteHeight otherwise.

Note: For plots with row and column channels, this represents the height of a single view and the "container" option cannot be used.

See also: height documentation.

# data.key(…values)

Key field to lookup in a lookupData reference.

# data.layer(…values)

Create a layer chart that visualizes this data reference.

# data.mark(…mark)

Set the mark type and default visual properties.

The behavior of this method depends on the argument type:

• If the argument is a String, sets the mark.type property.
• Otherwise, sets the mark property.

# data.mark(…values)

Create a new mark that visualizes this data reference.

# data.name(value)

Name of the visualization for later reference.

# data.padding(value)

The default visualization padding, in pixels, from the edge of the visualization canvas to the data rectangle. If a number, specifies padding for all sides. If an object, the value should have the format {"left": 5, "top": 5, "right": 5, "bottom": 5} to specify padding for each side of the visualization.

Default value: 5

# data.params(…params)

An array of parameters that may be simple variables or more complex selections that map user input to data queries.

# data.project(projection)

The cartographic projection to apply to geographical data.

# data.render(…values)

Compile and render the Vega-Lite visualization and return the DOM element containing the Vega View.

# data.repeat(…values)

Repeat a chart template to generate multiple plots.

# data.resolve(value)

Scale, axis, and legend resolutions for view composition specifications.

# data.select(…params)

An array of parameters that may be simple variables or more complex selections that map user input to data queries. This method provides backwards compatiblity with earlier API versions; it is deprecated and may be removed in future versions. Use params() instead.

# data.spacing(value)

The spacing in pixels between sub-views of the composition operator. An object of the form {"row": number, "column": number} can be used to set different spacing values for rows and columns.

Default value: Depends on "spacing" property of the view composition configuration (20 by default)

# data.title(value)

Title for the plot.

# data.toSpec(…values)

Return the Vega-Lite specification as a JavaScript object.

# data.toString(…values)

Return the Vega-Lite specification as a JSON string.

# data.toView(…values)

Compile the Vega-Lite specification and return the resulting Vega View object.

# data.transform(…transform)

The data transformations to apply.

# data.usermeta(value)

Optional metadata that will be passed to Vega. This object is completely ignored by Vega and Vega-Lite and can be used for custom metadata.

# data.vconcat(…values)

Create a vconcat chart that visualizes this data reference.

# data.view(value)

An object defining the view background’s fill and stroke.

Default value: none (transparent)

# data.width(value)

The width of a visualization.

• For a plot with a continuous x-field, width should be a number.
• For a plot with either a discrete x-field or no x-field, width can be either a number indicating a fixed width or an object in the form of {step: number} defining the width per discrete step. (No x-field is equivalent to having one discrete step.)
• To enable responsive sizing on width, it should be set to "container".

Default value: Based on config.view.continuousWidth for a plot with a continuous x-field and config.view.discreteWidth otherwise.

Note: For plots with row and column channels, this represents the width of a single view and the "container" option cannot be used.

See also: width documentation.

This site is open source. Improve this page.