Learn Vega 1

A Vega specification is always a JSON object with several top-level blocks. Each block has a purpose. Let’s go through them step by step:

---

🔹 1. $schema

"$schema": "https://vega.github.io/schema/vega/v5.json"

• Tells Vega what version/schema to validate against.

• Always appears at the top.

---

🔹 2. description

"description": "Zoomable, collapsable tree"

• A short text describing the chart.

• Just for humans (doesn’t affect rendering).

---

🔹 3. width, height, padding, background, autosize

"width": 1240,
"height": 600,
"padding": 5,
"background": "#f5f5f5",
"autosize": "pad"

• Control the chart’s canvas size and layout.

---

🔹 4. signals

"signals": [
  {"name": "chartWidth", "value": 1240},
  {"name": "chartHeight", "value": 600}
]

• Variables that can change dynamically.

• Used for interactivity (sliders, mouse events, zooming).

---

🔹 5. data

"data": [
  {"name": "tree", "values": []}
]

• Defines datasets.

• Can be inline (values) or external (url).

• Every visualization needs at least one dataset.

---

🔹 6. scales

"scales": [
  {
    "name": "xscale",
    "type": "linear",
    "domain": {"data": "tree", "field": "x"},
    "range": "width"
  }
]

• Convert data values → visual values.

• Example: numbers → pixel positions, categories → colors.

---

🔹 7. axes

"axes": [
  {"orient": "bottom", "scale": "xscale"},
  {"orient": "left", "scale": "yscale"}
]

• Draw chart axes based on scales.

---

🔹 8. legends

"legends": [
  {"fill": "colorScale", "title": "Categories"}
]

• Draw legends (color keys, size keys).

---

🔹 9. marks

"marks": [
  {
    "type": "rect",
    "from": {"data": "tree"},
    "encode": {
      "enter": {
        "x": {"scale": "xscale", "field": "x"},
        "y": {"scale": "yscale", "field": "y"},
        "width": {"value": 20},
        "height": {"value": 20}
      }
    }
  }
]

• The actual visual shapes: bars, lines, text, symbols, areas, etc.

• Driven by "data" and "scales".

---

🔹 10. projections (optional, for maps)

"projections": [
  {"name": "proj", "type": "mercator"}
]

• Used for geographic data (maps).

---

🔹 11. title (optional)

"title": "My Chart"

• A title at the top of the chart.

---

🔹 12. config (optional)

"config": {
  "axis": {"labelFontSize": 14},
  "legend": {"titleFont": "Arial"}
}

• Default styles (theme) for axes, legends, marks, etc.

---

✅ So, the full list of major blocks in Vega:

1. $schema

2. description

3. width, height, background, autosize, padding

4. signals

5. data

6. scales

7. axes

8. legends

9. marks

10. projections (optional)

11. title (optional)

12. config (optional)

---

👉 Do you want me to draw a simple diagram (flow chart style) showing how these blocks connect? (e.g. data → scales → marks → axes/legends) so it’s super clear?