bouclem Visualization
When to Use This Skill
Use create_visualization when the user wants to visualize numerical data — comparisons, trends, distributions, or proportions.
| Use this skill for... | Use excalidraw skill for... |
|---|---|
| Sales figures by quarter | System architecture diagram |
| Survey response percentages | Flowchart or decision tree |
| Stock price over time | Sequence / interaction diagram |
| Market share breakdown | Mind map or concept map |
| Any x/y or segment/value data | Shapes, boxes, arrows, labels |
Available Tool
- create_visualization: Create a chart specification for frontend rendering.
Parameters (MUST match exactly)
| Parameter | Type | Required | Description |
|---|---|---|---|
chart_type |
str | Yes | "bar", "line", or "pie" |
data |
list[dict] | Yes | Array of data objects — see formats below |
title |
str | No | Chart title |
x_label |
str | No | X-axis label (bar/line only) |
y_label |
str | No | Y-axis label (bar/line only) |
Data Formats (CRITICAL — use exact field names)
Bar / Line charts — each object MUST have "x" and "y" keys:
[{"x": "Jan", "y": 100}, {"x": "Feb", "y": 150}, {"x": "Mar", "y": 120}]
Pie charts — each object MUST have "segment" and "value" keys:
[{"segment": "Category A", "value": 30}, {"segment": "Category B", "value": 70}]
Optional: add "color": "hsl(210, 100%, 50%)" to any data point for custom color.
Example tool_input
Bar chart:
{
"chart_type": "bar",
"data": [{"x": "Q1", "y": 250}, {"x": "Q2", "y": 310}, {"x": "Q3", "y": 280}],
"title": "Quarterly Revenue",
"x_label": "Quarter",
"y_label": "Revenue ($K)"
}
Pie chart:
{
"chart_type": "pie",
"data": [{"segment": "Mobile", "value": 60}, {"segment": "Desktop", "value": 35}, {"segment": "Tablet", "value": 5}],
"title": "Traffic by Device"
}
Common Mistakes to Avoid
- Do NOT use
{"labels": [...], "values": [...]}format — data MUST be a list of dicts. - Bar/line data MUST use
"x"and"y"keys, NOT"label"or"name".
UI Guidance (from tools-config)
Data Format:
- Bar/Line charts: [{"x": label, "y": value}]
- Pie charts: [{"segment": name, "value": number}]
- Optional colors: "color": "hsl(210, 100%, 50%)"