mirror of
https://github.com/olehomelchenko/olehomelchenko.com.git
synced 2026-02-05 02:54:37 +00:00
56 lines
1.4 KiB
Plaintext
56 lines
1.4 KiB
Plaintext
---
|
|
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.
|