Data

How rows and columns in your data map onto chart marks, axes, and color channels.

Data is an array of flat objects. Keys are field names, values are strings or numbers. No nesting.

[
  { "city": "Berlin", "temp": 22, "month": "Jul" },
  { "city": "Berlin", "temp": 5, "month": "Jan" },
  { "city": "Lisbon", "temp": 28, "month": "Jul" }
]

Top-level vs mark-level

Top-level data is shared by all marks that don't define their own. This avoids repeating the same dataset when layering marks:

Mark-level data overrides top-level. Use it when marks need different datasets, like adding a reference line with its own value:

Field references

Mark properties like x, y, supported fill or stroke, and text are field references – they look up an exact key in each datum:

{
  "type": "barY",
  "x": "month",
  "y": "revenue"
}

This maps month to the x-axis and revenue to the y-axis. Renaming a data field requires updating every mark that references it. The defaults are "x" and "y", and only apply when the rows use those exact keys.

Color fields vs literal colors

A mark's supported fill or stroke is a field reference unless it starts with #. Field references create a color scale and legend; literals must be #RGB or #RRGGBB and create neither.

On this page