Data Viz & Infographic Designer

    1

    Find the story, pick the right chart, build an accessible palette, ship production SVG — award-winning information design.

    $9

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Data Viz & Infographic Designer

    Example session with this skill installed

    **Visualize this monthly churn data:** Jan: 1.2%, Feb: 1.4%, Mar: 2.1%, Apr: 1.9%, May: 3.5%, Jun: 3.2%. March had a service outage. Produce SVG code.

    • Read your context and instructions
    • Compiled the data viz

    I have analyzed the churn data. The primary claim is that monthly churn spiked significantly following the March service outage and has remained above Q1 levels. ## Churn Impact Analysis ```html <svg viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc"> <title id="title">Monthly churn spiked to 3.5% following March outage</title> <desc id="desc">Line chart showing churn rising from 1.2% in Jan to a peak of 3.5% in May, with an annotation for the March service outage.</desc> <defs> <style> .grid { stroke: #e5e7eb; stroke-width: 1; } .line { fill: none; stroke: #2563eb; stroke-width: 3; } .marker { fill: #2563eb; } .highlight { fill: #dc2626; } .text-main { font-family: sans-serif; font-size: 14px; fill: #1f2937; } .text-muted { font-family: sans-serif; font-size: 12px; fill: #6b7280; } .annotation { font-size: 11px; fill: #dc2626; font-weight: bold; } </style> </defs> <!-- Axes --> <line x1="50" y1="250" x2="550" y2="250" stroke="#374151" /> <line x1="50" y1="250" x2="50" y2="50" stroke="#374151" /> <!-- Data Line --> <path class="line" d="M50,220 L150,210 L250,175 L350,185 L450,105 L550,120" /> <!-- Annotation --> <circle cx="250" cy="175" r="4" class="highlight" /> <text x="260" y="170" class="annotation">Service Outage</text> <!-- Labels --> <text x="50" y="270" class="text-muted">Jan</text> <text x="550" y="270" class="text-muted">Jun</text> <text x="40" y="55" class="text-muted" text-anchor="end">4%</text> <text x="40" y="255" class="text-muted" text-anchor="end">0%</text> </svg> ``` | Month | Churn Rate | Note | | :--- | :--- | :--- | | Jan | 1.2% | Baseline | | Feb | 1.4% | | | Mar | 2.1% | **Service Outage** | | Apr | 1.9% | | | May | 3.5% | Peak Churn | | Jun | 3.2% | | **Next steps** 1. Embed the SVG directly into your dashboard component. 2. Review the alt-text description for screen reader accuracy. 3. Update the CSS variables to match your application's global theme.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    The problem

    Data visualizations often fail because they lack a clear narrative or use the wrong chart type for the underlying data. Developers frequently output generic, hard-to-read charts that clutter dashboards without answering the user's "so what."

    What it does

    • Analyzes raw data to identify the primary claim before selecting a visual form.
    • Recommends specific chart types based on comparison types like change over time, ranking, or distribution.
    • Generates production-ready SVG/HTML with accessible CSS variables and ARIA labels.
    • Applies information design principles such as direct labeling, zero-baseline enforcement, and colorblind-safe palettes.
    • Provides detailed specifications for chart libraries like Vega-Lite, D3.js, or Recharts.

    Frameworks & tools

    SVG, HTML/CSS, Vega-Lite, D3.js, Recharts, Plotly, and Figma layout specs.

    Why this beats prompting it yourself

    Generic prompts result in "pretty" but misleading graphics like 3D charts or rainbow color scales. This skill enforces strict information design constraints, ensuring every pixel supports a specific data claim and meets WCAG contrast standards by default.

    Use cases

    • Converting a raw JSON dataset into a responsive, annotated SVG trend line for a report.
    • Designing a high-density monitoring dashboard layout with clear hierarchy and sparklines.
    • Generating an infographic storyboard that translates complex metrics into a narrative flow.
    • Audit and refactoring of existing charts to improve readability and accessibility.

    Known limitations

    Does not perform complex statistical modeling or data cleaning; input data should be structured. Max 6 categorical colors to maintain legibility.

    Input data must be structured. Does not perform advanced statistical cleaning. Limited to 6 categorical colors to ensure readability.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 1 month ago

    Permissions

    No special permissions declared or detected

    Listed1 month ago

    What's inside

    Frequently Asked Questions

    This skill acts as a bridge between raw data and professional information design, identifying the narrative 'story' in your data and outputting production-ready SVG or HTML code that follows strict accessibility and design standards.

    The designer generates code and specifications for major libraries including D3.js, Vega-Lite, Recharts, and Plotly, as well as standalone, responsive SVG and CSS for direct web implementation.

    To maintain professional legibility and WCAG accessibility standards, the skill limits categorical colors to six and enforces design rules like zero-baseline axes and direct labeling to prevent misleading visualizations.

    Yes, every visualization is built with accessibility in mind, automatically including ARIA labels, high-contrast color palettes, and screen-reader-friendly descriptions.

    While the skill can identify patterns, it requires structured JSON or CSV data; it does not perform advanced statistical modeling, data cleaning, or outlier removal.

    Updates are managed through the marketplace dashboard; purchasers receive all current design logic, library templates, and any future iterations to the information design framework.

    New in Research & Analysis