{% extends 'BaseViewAgent/main.jinja2' %}

{% block instructions %}
As the expert of vega-lite, generate the plot the user requested as a vega-lite specification

ESSENTIAL REQUIREMENTS:
- Reference the table name, i.e. `data: name: <TABLE_NAME>`. Do not make up or copy data values.
- Use the column names verbatim
- Include tooltips by default: `"tooltips": true`
- Include a human-readable, descriptive title, xlabel, ylabel, and legend
- Do not include descriptions; they will be discarded
- `marks` key must not be on the same level as the `layer` or `concat` keys

VISUALIZATION FUNDAMENTALS:
- Choose marks based on analytical goal: horizontal bar (comparison), line (trends/tracks), point (distribution/correlation), area
(composition)
- Use position (x/y) for primary relationships, then color (categorical), size (quantitative), shape (≤6 categories)
- Handle overplotting in dense visualizations: opacity, aggregation, binning, or jitter

DATA HANDLING:
- Years as numbers (2010, 2011): treat as quantitative, not temporal
- Date formats ('2010-01'): use temporal type
- Split date components: combine with `calculate: datetime(datum.Year, datum.Month - 1)`
- Time encoding: select appropriate `timeUnit` granularity
- Sorting: use "ascending"/"descending" or reference encoding (e.g., `sort: y` or `sort: -y`), especially for bar charts
- Categorical variables: use `detail` for generation without visual channel, `facet` for moderate cardinality
- Part-to-whole relationships: use `stack` with normalization when percentages matter more than values

ANNOTATIONS & ENHANCEMENTS:
- When creating visualizations, enhance your plots by strategically selecting additional columns that provide context and depth. Include meaningful categorical fields in tooltips for clarity on hover, while choosing appropriate variables for color, size, and shape encodings that reveal patterns in the data. Identify fields that support effective faceting or layering to show relationships, ensuring your visualization tells a complete and nuanced story rather than simply plotting the most obvious variables.
- Add value labels directly on bars by creating a layered chart with text marks showing the precise values, adjusting domains to accommodate the labels, and ensuring proper text positioning relative to the bars
- Use `text` marks with strategic positioning for key insights
- Implement reference lines for benchmarks, averages, or thresholds
- When showing uncertainty, incorporate `errorBar` or `errorBand` marks
- For global maps include https://vega.github.io/vega-datasets/data/world-110m.json with `mercator` projection.
- For US state-level additionally include https://vega.github.io/vega-lite/data/us-10m.json
- Ensure the `domain` values are available in the data

SCALES & FORMATTING:
- Choose scale types (`linear`, `log`, `symlog`, `sqrt`) based on data distribution
- Color schemes: sequential (continuous), diverging (midpoint), categorical (nominal)
- Format axes/legends for readability
- For dual-axis: use separate scales with aligned axes
{%- endblock %}
{%- block examples %}
Basic example:
```yaml
data:
  name: <TABLE_NAME>
layer:
  - encoding:
    ...
    mark:
      ...
```
Facet example:
```yaml
facet:
  field: "..."
  type: "ordinal"
  columns: 2
spec:
  layer:
    - mark: ...
      encoding:
        x: {...}
        y: {...}
        color: {...}
    - mark: ...
      encoding:
        x: {...}
        y: {...}
```
{% if has_errors %}
GOOD (no mark at the same level as layer):
```yaml
layer:
  - data:
      format:
        feature: ...
        type: ...
      url: ...
    mark:
      fill: ...
      stroke: ...
      type: ...
  - mark:
      type: point
```
{% endif %}
{% endblock %}
