DanielRegaladoCardoso/svg-chart-render-v1

---
language:
- en
license: apache-2.0
task_categories:
- text-generation
tags:
- svg
- chart-rendering
- data-visualization
- code-generation
- chart-spec-to-svg
pretty_name: SVG Chart Render Mix v1
size_categories:
- 10K<n<100K
---

# SVG Chart Render Mix v1

Training data for fine-tuning a small code model (DeepSeek Coder 1.3B)
to map **(chart specification JSON) to inline SVG code**.

> Part of the [SQL Agent LLMOps](https://github.com/DanielRegaladoUMiami/sql-agent-llmops) project.

| Total | Sources | Input | Output |
|-------|---------|-------|--------|
| ~25,000 rows | 2 | structured JSON chart spec | rendered SVG string |

## Part of the SQL Agent LLMOps project

| Dataset | Model | Role |
|---------|-------|------|
| [`DanielRegaladoCardoso/text-to-sql-mix-v2`](https://huggingface.co/datasets/DanielRegaladoCardoso/text-to-sql-mix-v2) | Qwen 2.5 Coder 7B | NL question to SQL |
| [`DanielRegaladoCardoso/chart-reasoning-mix-v1`](https://huggingface.co/datasets/DanielRegaladoCardoso/chart-reasoning-mix-v1) | Phi-3 Mini 3.8B | (question + result) to chart spec |
| **[`DanielRegaladoCardoso/svg-chart-render-v1`](https://huggingface.co/datasets/DanielRegaladoCardoso/svg-chart-render-v1)** | **DeepSeek Coder 1.3B** | **chart spec to SVG** |

## Schema

| Field | Type | Description |
|-------|------|-------------|
| `id` | string | Stable hash-based identifier |
| `chart_spec` | string (JSON) | Input: chart type, data points, encoding, title, axis labels |
| `svg_code` | string | Target output: full `<svg>...</svg>` inline SVG |
| `source` | string | Origin tag (see source attribution) |
| `metadata` | string (JSON) | chart_type, num_points, svg_size_bytes |

Note: `chart_spec` and `metadata` are stored as JSON strings in the parquet.
Parse with `json.loads(row["chart_spec"])` after loading.

### chart_spec structure

```json
{
"chart_type": "bar|line|scatter|donut|histogram|area",
"data": [{"x": "value", "y": "value", "color": "value|null"}],
"encoding": {"x": "col_name", "y": "col_name", "color": "col_name|null"},
"title": "string or null",
"x_label": "string or null",
"y_label": "string or null"
}
```

## Splits

| Split | Rows |
|-------|------|
| train | ~23,750 |
| validation | ~625 |
| test | ~625 |

## Source attribution

| Source | Tag in `source` | Rows | License | Link | Method | Notes |
|--------|-----------------|------|---------|------|--------|-------|
| nvBench chart renders | `synth-matplotlib` | ~10,500 | Apache-2.0 (pipeline) + MIT (nvBench data) | [nvBench GitHub](https://github.com/TsinghuaDatabaseGroup/nvBench) | Programmatic | Each of 7,247 nvBench chart configs rendered via matplotlib's SVG backend. Up to 3 title-augmented variants per entry. Chart types: bar, line, scatter, donut. Perfect (spec, svg) pairs. |
| svgen-500k filtered | `svgen500k-*` | ~15,000 | Per upstream row | [umuthopeyildirim/svgen-500k](https://huggingface.co/datasets/umuthopeyildirim/svgen-500k) | Filtered | Streamed 216k SVGs, heuristic-filtered to chart-shaped structures (multi-element: has `<rect>`, `<line>`, `<g>`). Rejects single-path icons. Provides general SVG syntax fluency. |

## Pipeline

Build script: [`training/data_pipelines/build_svg_mix.py`](https://github.com/DanielRegaladoUMiami/sql-agent-llmops/blob/main/training/data_pipelines/build_svg_mix.py)

Three stages:
1. **synth-charts** -- load nvBench chart configs, replay each in matplotlib
(Agg/SVG backend), augment with NL paraphrases as candidate titles.
2. **svgen** -- stream `umuthopeyildirim/svgen-500k`, keep only chart-shaped SVGs.
3. **combine-push** -- dedup by SVG hash, 95/2.5/2.5 split, push to HF with card.

## Usage

```python
from datasets import load_dataset
import json

ds = load_dataset("DanielRegaladoCardoso/svg-chart-render-v1")
ex = ds["train"][0]

spec = json.loads(ex["chart_spec"])
print(spec["chart_type"])
print(ex["svg_code"][:200])
```

### SFT format

```python
import json

def to_sft(row):
return {
"messages": [
{"role": "system", "content": "You render chart specifications as inline SVG."},
{"role": "user", "content": "Render this chart spec as SVG:\n\n" + row["chart_spec"]},
{"role": "assistant", "content": row["svg_code"]},
]
}
```

## Known limitations

- SVGs from `synth-matplotlib` carry matplotlib's stylistic defaults (font,
axes, ticks). The model will produce matplotlib-flavored SVGs.
- `svgen500k-*` rows have no structured `chart_spec` -- only freeform
`title` and `_freeform_description` are populated.
- SVGs are capped at 50 KB to keep training tractable.
- Only 6 chart types covered (bar, line, scatter, donut, histogram, area).

## Citation

```bibtex
@dataset{regalado2026svgmix,
author = {Regalado Cardoso, Daniel},
title = {SVG Chart Render Mix v1},
year = {2026},
url = {https://huggingface.co/datasets/DanielRegaladoCardoso/svg-chart-render-v1}
}
```

## License

Pipeline and curation: **Apache-2.0**. nvBench data is MIT-licensed.
svgen-500k rows carry per-row `license` fields from their upstream sources.
See the source attribution table.

---

_Built by Daniel Regalado Cardoso -- MSBA, University of Miami -- April 2026._

language:
- 英语（en）
license: Apache-2.0
task_categories:
- 文本生成
tags:
- 可缩放矢量图形（SVG）
- 图表渲染
- 数据可视化
- 代码生成
- 图表规范转SVG
pretty_name: SVG图表渲染混合集v1
size_categories:
- 10K<n<100K

# SVG图表渲染混合集v1

本数据集用于微调小型代码模型（DeepSeek Coder 1.3B），以实现**（图表规范JSON）到内联可缩放矢量图形代码**的映射。

> 本数据集隶属于[SQL Agent LLMOps](https://github.com/DanielRegaladoUMiami/sql-agent-llmops)项目。

| 总条目数 | 来源数量 | 输入数据 | 输出数据 |
|-------|---------|-------|--------|
| ~25,000行 | 2 | 结构化JSON图表规范 | 渲染后的SVG字符串 |

## 隶属于SQL Agent LLMOps项目

| 数据集 | 模型 | 任务 |
|---------|-------|------|
| [`DanielRegaladoCardoso/text-to-sql-mix-v2`](https://huggingface.co/datasets/DanielRegaladoCardoso/text-to-sql-mix-v2) | Qwen 2.5 Coder 7B | 自然语言问题转SQL |
| [`DanielRegaladoCardoso/chart-reasoning-mix-v1`](https://huggingface.co/datasets/DanielRegaladoCardoso/chart-reasoning-mix-v1) | Phi-3 Mini 3.8B | （问题+查询结果）转图表规范 |
| **[`DanielRegaladoCardoso/svg-chart-render-v1`](https://huggingface.co/datasets/DanielRegaladoCardoso/svg-chart-render-v1)** | **DeepSeek Coder 1.3B** | **图表规范转SVG** |

## 数据结构

| 字段 | 数据类型 | 描述 |
|-------|------|-------------|
| `id` | 字符串（string） | 基于哈希的稳定标识符 |
| `chart_spec` | 字符串（string，JSON格式） | 输入项：图表类型、数据点、编码规则、标题、坐标轴标签 |
| `svg_code` | 字符串（string） | 目标输出：完整的`<svg>...</svg>`内联SVG代码 |
| `source` | 字符串（string） | 来源标记（详见来源归因部分） |
| `metadata` | 字符串（string，JSON格式） | 图表类型、数据点数量、SVG文件大小（字节） |

> 注意：`chart_spec`与`metadata`在Parquet文件中以JSON字符串格式存储，加载后需通过`json.loads(row["chart_spec"])`进行解析。

### chart_spec 结构

json
{
"chart_type": "bar|line|scatter|donut|histogram|area",
"data": [{"x": "value", "y": "value", "color": "value|null"}],
"encoding": {"x": "col_name", "y": "col_name", "color": "col_name|null"},
"title": "string or null",
"x_label": "string or null",
"y_label": "string or null"
}

## 数据集划分

| 划分 | 条目数 |
|-------|------|
| 训练集（train） | ~23,750 |
| 验证集（validation） | ~625 |
| 测试集（test） | ~625 |

## 来源归因

| 来源 | 源标记 | 条目数 | 许可证 | 链接 | 生成方式 | 备注 |
|--------|-----------------|------|---------|------|--------|-------|
| nvBench 图表渲染集 | `synth-matplotlib` | ~10,500 | Apache-2.0（流水线） + MIT（nvBench数据） | [nvBench GitHub](https://github.com/TsinghuaDatabaseGroup/nvBench) | 程序化生成 | 共7,247个nvBench图表配置通过matplotlib的SVG后端渲染，每个条目最多生成3个带标题的变体，涵盖柱状图、折线图、散点图、环形图，提供完美的（图表规范，SVG）配对。 |
| 过滤版svgen-500k | `svgen500k-*` | ~15,000 | 遵循上游行许可证 | [umuthopeyildirim/svgen-500k](https://huggingface.co/datasets/umuthopeyildirim/svgen-500k) | 启发式筛选 | 流式获取216k个SVG，筛选保留带有多元素的图表结构SVG（包含`<rect>`、`<line>`、`<g>`标签），排除单路径图标，用于提升模型的通用SVG语法熟练度。 |

## 数据流水线

构建脚本：[`training/data_pipelines/build_svg_mix.py`](https://github.com/DanielRegaladoUMiami/sql-agent-llmops/blob/main/training/data_pipelines/build_svg_mix.py)

三个阶段：
1. **合成图表（synth-charts）**：加载nvBench图表配置，在matplotlib（Agg/SVG后端）中复现每个配置，并通过自然语言释义扩充候选标题。
2. **SVG生成（svgen）**：流式获取`umuthopeyildirim/svgen-500k`数据集，仅保留符合图表结构的SVG。
3. **合并与推送（combine-push）**：基于SVG哈希值去重，按95/2.5/2.5比例划分数据集，并推送至Hugging Face平台附带数据集卡片。

## 使用方法

python
from datasets import load_dataset
import json

ds = load_dataset("DanielRegaladoCardoso/svg-chart-render-v1")
ex = ds["train"][0]

spec = json.loads(ex["chart_spec"])
print(spec["chart_type"])
print(ex["svg_code"][:200])

### 监督微调（SFT）格式

python
import json

def to_sft(row):
return {
"messages": [
{"role": "system", "content": "You render chart specifications as inline SVG."},
{"role": "user", "content": "Render this chart spec as SVG:

" + row["chart_spec"]},
{"role": "assistant", "content": row["svg_code"]},
]
}

## 已知局限性

- 来自`synth-matplotlib`的SVG继承了matplotlib的默认样式（字体、坐标轴、刻度），因此模型生成的SVG将带有matplotlib的风格特征。
- `svgen500k-*`类型的条目无结构化`chart_spec`字段，仅填充了自由格式的`title`与`_freeform_description`。
- 为保证训练可行性，SVG文件大小上限设置为50KB。
- 仅支持6种图表类型：柱状图、折线图、散点图、环形图、直方图、面积图。

## 引用格式

bibtex
@dataset{regalado2026svgmix,
author = {Regalado Cardoso, Daniel},
title = {SVG Chart Render Mix v1},
year = {2026},
url = {https://huggingface.co/datasets/DanielRegaladoCardoso/svg-chart-render-v1}
}

## 许可证

> 流水线与数据集整理采用**Apache-2.0**许可证。nvBench数据采用MIT许可证。svgen-500k条目遵循其上游来源的逐行许可证要求，详见来源归因表格。

_Built by Daniel Regalado Cardoso -- MSBA, University of Miami -- April 2026._