Data

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:

Both marks read from the same data – no duplication.

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.