Why Obsidian Users Should Use Vega to Create Professional Data Charts Directly in Their Notes

Vega and Vega‑Lite Overview

Vega and Vega‑Lite are visualization grammars from the University of Washington Interactive Data Lab. Vega‑Lite is a high‑level, concise syntax for common charts (bar, line, scatter, heatmap). Vega is a lower‑level grammar that supports more complex visualizations such as radar charts, word clouds, and force‑directed graphs. Both use a declarative JSON format that maps data fields to visual channels.

Vega‑Lite is a high‑level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation.

Why Choose Vega Visualizations in Obsidian

Compared with other Obsidian chart plugins:

Charts – easy to use but limited to simple charts.

Plotly – feature‑rich but requires complex syntax.

TinyChart – lightweight but offers poor style customization.

Vega Visualizations – uses an industry‑standard JSON syntax, provides complete functionality, and has a mature ecosystem; the only trade‑off is learning JSON.

Reasons for selecting Vega:

Standard syntax : works across Jupyter, Observable, Streamlit, etc.

Comprehensive documentation : over 100 official examples covering most chart types.

Full capability : supports simple bar charts to interactive multi‑view dashboards.

Installation

Open Obsidian → Settings → Third‑party plugins → Community plugins.

Search for Vega Visualizations and click Install → Enable. No restart required.

Quick Start – First Bar Chart

Paste the following JSON into a new note and save:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

The bar chart renders automatically.

Core Specification Elements

$schema

: required URL that selects the Vega‑Lite version. data.values: inline data array; can also reference external URLs. mark: visual mark type (e.g., bar, line, point, arc, rect). encoding: maps data fields to visual channels. field: name of the data column. type: data type (quantitative, nominal, ordinal, temporal).

Advanced Templates

1. Multi‑Series Line Chart

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"values": [
    {"month": 1, "series": "GPT-4", "value": 28},
    {"month": 2, "series": "GPT-4", "value": 55},
    {"month": 3, "series": "GPT-4", "value": 43},
    {"month": 4, "series": "GPT-4", "value": 91},
    {"month": 1, "series": "Claude", "value": 35},
    {"month": 2, "series": "Claude", "value": 48},
    {"month": 3, "series": "Claude", "value": 24},
    {"month": 4, "series": "Claude", "value": 67}
  ]},
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "month", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "series", "type": "nominal"}
  }
}

2. Heatmap

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"values": [
    {"x": "Mon", "y": "Morning", "val": 10},
    {"x": "Mon", "y": "Afternoon", "val": 20},
    {"x": "Tue", "y": "Morning", "val": 25},
    {"x": "Tue", "y": "Afternoon", "val": 30},
    {"x": "Wed", "y": "Morning", "val": 50},
    {"x": "Wed", "y": "Afternoon", "val": 60}
  ]},
  "mark": "rect",
  "encoding": {
    "x": {"field": "x", "type": "nominal"},
    "y": {"field": "y", "type": "nominal"},
    "color": {"field": "val", "type": "quantitative", "scale": {"scheme": "blues"}}
  }
}

3. Donut Chart

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"values": [
    {"category": "Large Model", "value": 40},
    {"category": "RAG", "value": 30},
    {"category": "Agent", "value": 20},
    {"category": "Other", "value": 10}
  ]},
  "mark": {"type": "arc", "innerRadius": 50},
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}

4. Radar Chart (Full Vega Syntax)

Radar charts are not supported by Vega‑Lite; the full Vega grammar is required:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 300,
  "height": 300,
  "padding": 40,
  "autosize": {"type": "none", "contains": "padding"},
  "signals": [{"name": "radius", "update": "width / 2"}],
  "data": [{
    "name": "table",
    "values": [
      {"key": "Attack", "value": 85, "category": "RoleA"},
      {"key": "Defense", "value": 72, "category": "RoleA"},
      {"key": "Speed", "value": 90, "category": "RoleA"},
      {"key": "Attack", "value": 50, "category": "RoleB"},
      {"key": "Defense", "value": 85, "category": "RoleB"},
      {"key": "Speed", "value": 65, "category": "RoleB"}
    ]
  }],
  "scales": [
    {"name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5,
     "domain": {"data": "table", "field": "key"}},
    {"name": "radial", "type": "linear", "range": {"signal": "[0, radius]"},
     "zero": true, "domain": [0, 100]},
    {"name": "color", "type": "ordinal",
     "domain": {"data": "table", "field": "category"},
     "range": {"scheme": "category10"}}
  ],
  "encode": {"enter": {"x": {"signal": "radius"}, "y": {"signal": "radius"}}},
  "marks": [{
    "type": "group",
    "from": {"facet": {"name": "facet", "data": "table", "groupby": ["category"]}},
    "marks": [{
      "type": "line",
      "from": {"data": "facet"},
      "encode": {"enter": {
        "interpolate": {"value": "linear-closed"},
        "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"},
        "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"},
        "stroke": {"scale": "color", "field": "category"},
        "strokeWidth": {"value": 2},
        "fill": {"scale": "color", "field": "category"},
        "fillOpacity": {"value": 0.1}
      }}
    }]
  }]
}

Common Pitfalls

Problem: Chart does not render – Cause: JSON syntax error – Solution: Validate commas and quotes with an online JSON validator.

Problem: Data not displayed – Cause: Field name mismatch (case‑sensitive) – Solution: Ensure field values exactly match data keys.

Problem: Blank chart – Cause: Missing $schema – Solution: Add the appropriate schema URL.

Problem: Unappealing colors – Cause: Default palette – Solution: Specify a custom scheme, e.g., "scale": {"scheme": "viridis"}.

Problem: Dual Y‑axis issue – Cause: Shared y‑scale by default – Solution: Add "resolve": {"scale": {"y": "independent"}}.

Typical Use Cases

Learning notes – compare benchmark results of different large language models.

Project retrospectives – track progress and metric trends with line charts.

Technical research – evaluate alternatives using radar charts.

Paper reading – reproduce figures from academic papers directly in notes.

Learning Resources

Official example library (≈100 copy‑ready specs): https://vega.github.io/vega-lite/examples/

Online editor for live preview and debugging: https://vega.github.io/editor/

Vega‑Lite documentation and API reference: https://vega.github.io/vega-lite/docs/

Summary of Advantages and Limitations

Standardized JSON syntax; learn once, use across environments.

Declarative format keeps code concise.

Seamless integration with Obsidian markdown.

Supports a spectrum from simple to complex visualizations.

Requires learning JSON (straightforward for most users).

Complex charts such as radar require the full Vega grammar, adding a modest learning curve.