Akin toVega’sdata model, the basic data model used by Vega-Lite istabular data, similar to a spreadsheet or a database table. Individual data sets are assumed to contain a collection of records, which may contain any number of named data fields.
Vega-Lite’sdata
property describes the visualization’s data source as part of the specification, which can be eitherinline data (values
) ora URL from which to load the data (url
). Or, we can create an empty,named data source (name
), which can bebound at runtime or populated from top-leveldatasets
.
In addition, Vega-Lite includesdata generators which can generate data sets such as numerical sequences or geographic reference elements such as GeoJSON graticule or sphere objects.
Inline Data can be specified usingvalues
property. Here is a list of all properties of an inlinedata
source:
Property | Type | Description |
---|---|---|
values | Array | Required. The full data set, included inline. This can be an array of objects or primitive values, an object, or a string. Arrays of primitive values are ingested as objects with a |
name | String | Provide a placeholder name and bind data at runtime. |
format | DataFormat | An object that specifies the format for parsing the data. |
For example, the following specification embeds an inline data table with nine rows and two columns (a
andb
).
If the input data is simply an array of primitive values, each value is mapped to thedata
property of a new object. For example[5, 3, 8, 1]
is loaded as:
[{"data": 5}, {"data": 3}, {"data": 8}, {"data": 1}]
You can also inline a string that will be parsed according to the specified format type.
Data can be loaded from a URL using theurl
property. In addition, the format of the input data can be specified using theformatType
property. By default Vega-Lite will infer the type from the file extension.
Here is a list of all properties describing adata
source from URL:
Property | Type | Description |
---|---|---|
url | String | Required. An URL from which to load the data set. Use the |
name | String | Provide a placeholder name and bind data at runtime. |
format | DataFormat | An object that specifies the format for parsing the data. |
For example, the following specification loads data from a relativeurl
:data/cars.json
. Note that the format type is implicitly"json"
by default.
Data can also be added at runtime through theVega View API. Data sources are referenced by name, which is specified in Vega-Lite withname
.
Here is a list of all properties describing a nameddata
source:
Property | Type | Description |
---|---|---|
name | String | Required. Provide a placeholder name and bind data at runtime. New data may change the layout but Vega does not always resize the chart. To update the layout when the data updates, setautosize or explicitly useview.resize. |
format | DataFormat | An object that specifies the format for parsing the data. |
For example, to create a data source namedmyData
, use the following data
{ "name": "myData"}
You can use theVega view API to load data at runtime and update the chart. Here is an example usingVega-Embed:
vegaEmbed('#vis', spec).then((res) => res.view .insert('myData', [ /* some data array */ ]) .run(),);
You can also use achangeset to modify the data on the chart as done on thisdata streaming demo
The format object describes the data format and additional parsing instructions.
Property | Type | Description |
---|---|---|
type | String | Type of input data: Default value: The default format type is determined by the extension of the file URL. If no extension is detected, |
parse | Object | Null | If set to For |
Loads a JavaScript Object Notation (JSON) file. Assumes row-oriented data, where each row is an object with named attributes. This is the default file format, and so will be used if no format property is provided. If specified, theformat
property should have a type property of"json"
, and can also accept the following:
Property | Type | Description |
---|---|---|
property | String | The JSON property containing the desired data. This parameter can be used when the loaded JSON file may have surrounding structure or meta-data. For example |
Load a comma-separated values (CSV) file. This format type does not support any additional properties.
Load a tab-separated values (TSV) file. This format type does not support any additional properties.
Load a delimited text file with a custom delimiter. This is a general version of CSV and TSV.
Property | Type | Description |
---|---|---|
delimiter | String | Required. The delimiter between records. The delimiter must be a single character (i.e., a single 16-bit code unit); so, ASCII delimiters are fine, but emoji delimiters are not. |
Load a JavaScript Object Notation (JSON) file using the TopoJSON format. The input file must contain valid TopoJSON data. The TopoJSON input is then converted into a GeoJSON format. There are two mutually exclusive properties that can be used to specify the conversion process:
Property | Type | Description |
---|---|---|
feature | String | The name of the TopoJSON object set to convert to a GeoJSON feature collection. For example, in a map of the world, there may be an object set named |
mesh | String | The name of the TopoJSON object set to convert to mesh. Similar to the |
The sequence generator creates a set of numeric values based on given start, stop, and (optional) step properties. By default, new objects with a single field nameddata
are generated; use theas
property to change the field name.
Property | Type | Description |
---|---|---|
start | Number | Required. The starting value of the sequence (inclusive). |
stop | Number | Required. The ending value of the sequence (exclusive). |
step | Number | The step value between sequence entries. Default value: |
as | String | The name of the generated sequence field. Default value: |
For example, the following specification generates a domain of number values and then uses calculate transforms to draw a sine curve:
A graticule is a grid formed by lines of latitude and longitude. The graticule generator creates a geographic grid (asGeoJSON data) to serve as a guiding element to include in maps. The graticule generator can be specified with either a booleantrue
value (indicating the default graticule) or a graticule property object:
Property | Type | Description |
---|---|---|
extent | Array | Sets both the major and minor extents to the same values. |
extentMajor | Array | The major extent of the graticule as a two-element array of coordinates. |
extentMinor | Array | The minor extent of the graticule as a two-element array of coordinates. |
precision | Number | The precision of the graticule in degrees. Default value: |
step | Array | Sets both the major and minor step angles to the same values. |
stepMajor | Array | The major step angles of the graticule. Default value: |
stepMinor | Array | The minor step angles of the graticule. Default value: |
The following example generates a custom graticule and visualizes it using an orthographic projection:
AGeoJSON sphere represents the full globe. The sphere generator injects a dataset whose contents are simply[{"type": "Sphere"}]
. The resulting sphere can be used as a background layer within a map to represent the extent of the Earth. The sphere generator requires either a booleantrue
value or an empty object{}
as its sole property.
The following example generates a layered base map containing a sphere (light blue fill) and a default graticule (black strokes):
Vega-Lite supports a top-leveldatasets
property. This can be useful when the same data should be inlined in different places in the spec. Instead of setting values inline, specify datasets at the top level and then refer to thenamed datasource in the rest of the spec.datasets
is a mapping from name to aninline dataset.
"datasets": { "somedata": [1,2,3] }, "data": { "name": "somedata" }