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, fill, stroke, and text are field names – they look up values in each datum:
{
"type": "barY",
"x": "month",
"y": "revenue"
}This maps the month field to the x-axis and revenue to the y-axis. The defaults are "x" and "y", so if your fields are named x and y you can omit them.
Color fields vs literal colors
When fill or stroke matches a field name in the data, a color scale is created automatically and a legend appears. When it starts with #, it's a literal color – no scale, no legend.