mira-chart

Generate D3.js data visualizations from CSV, JSON, images, or hand-drawn sketches for slide decks.

Updated Sep 2, 2026
One-click install
npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-chart-mayconspirlandelli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mira-chart
Source: https://github.com/mayconspirlandelli/slides-podcast-ia-home-office/tree/main/.agents/skills/mira-chart
Command: npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-chart-mayconspirlandelli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning raw data, screenshots of existing charts, or rough hand-drawn sketches into polished, presentation-ready charts is slow and requires both design judgment and D3.js expertise. This Skill closes that gap by accepting data in almost any form and producing a clean, theme-consistent D3 v7 chart ready for a Mira slide deck. ## Core Features & Use Cases - Flexible input handling: Accepts CSV, TSV, JSON files, pasted markdown tables, screenshots of existing charts, photos of whiteboard sketches, or plain descriptions of what to visualize. - Chart type recommendation: Uses a decision matrix in references/galeria-d3.md to recommend the best chart type for the data shape, with veto rules against misleading choices like pie charts with too many slices or truncated bar axes. - Multiple delivery modes: Outputs an interactive slide card for Mira decks, a standalone PNG export via a capture script, or a static version ready to be animated by the mira-animator skill. - Use Case: A user pastes a quarterly revenue table and asks for a chart. The Skill classifies the fields, recommends a bar chart, generates D3 v7 code with the deck's theme colors, and saves it to decks/<deck>/assets/. ## Quick Start Ask the assistant to turn the attached CSV file into a bar chart for your Mira deck using the mira-chart skill.

Frequently Asked Questions about mira-chart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a CSV file into a chart for a slide deck?

Provide the CSV file and describe the chart you want, or let the Skill recommend one. It inspects the columns and data types, picks an appropriate D3 chart type, and generates D3 v7 code saved into your deck's assets folder.

What chart type should I use for my data?

The Skill uses a recommendation matrix based on the question your data answers: bars for category comparison, lines for time series, donut for part-of-whole with few slices, scatter for correlations, treemap for hierarchies, and Sankey for flows.

Can I recreate a chart from a screenshot or hand-drawn sketch?

Yes. The Skill reads the image, extracts the chart type, series, values, labels, and axes, then rebuilds it as a real D3 chart. Estimated values read from images are always reported back to you.

Does it support exporting charts as PNG images?

Yes. For use outside a deck, it generates a standalone HTML file and renders it to PNG using the capture script from the mira-visuals skill, with configurable width and height.

When should I avoid a pie chart?

Avoid pie charts with more than about six slices, since humans compare angles poorly. The Skill warns you in these cases and suggests bar charts or treemaps as better alternatives.

Can the generated chart be animated afterwards?

The Skill produces the static D3 version first, then chains to the mira-animator skill when animation is requested. Animation itself is handled by that separate skill, not this one.