---
title: "Sample Visualization Post"
date: "2024-03-10"
lang: en
categories:
  - dataviz
  - showcase
  - vega-lite
description: "Example post with Vega-Lite visualization"
---

## Vega-Lite Example

This post demonstrates how to include Vega-Lite visualizations in Quarto. Note the `showcase` category - posts with this category will appear in your Portfolio.

### Simple Bar Chart

```{vega-lite}
//| label: fig-simple-bar
//| fig-cap: "A simple bar chart"
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55},
      {"category": "C", "value": 43},
      {"category": "D", "value": 91},
      {"category": "E", "value": 81}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "value", "type": "quantitative"}
  },
  "width": 400,
  "height": 300
}
```

### Migration Notes

When migrating from Hugo:

1. **Remove the Hugo shortcode**:
   - Old: `{{</* vega-lite id="chart1" */>}}...{{</* /vega-lite */>}}`

2. **Use Quarto code fence**:
   - New: ````{vega-lite}` with `//| label: chart-name`

3. **The visualization JSON stays the same** - just change the wrapper!

Replace this with your actual visualization posts from Hugo.