skills.rest
AndyMarigoldLabs
AndyMarigoldLabsCOMMUNITY
Explore all skills by this author →
GitHub

data-visualization-techniques

Select chart types and build visualizations with Recharts, D3, and Chart.js.

Updated Jan 17, 2026
Search Tags:#Recharts#charts#dashboard#visualization#data-analytics#data-storytelling#D3
One-click install
npx skills add https://github.com/AndyMarigoldLabs/continuous-funding --skill data-visualization-techniques-andymarigoldlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-visualization-techniques
Source: https://github.com/AndyMarigoldLabs/continuous-funding/tree/main/.claude/skills/data-visualization-techniques
Command: npx skills add https://github.com/AndyMarigoldLabs/continuous-funding --skill data-visualization-techniques-andymarigoldlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transform data into clear, decision-ready visuals that help teams interpret trends, compare metrics, and tell data stories.

Core Features & Use Cases

  • Chart Type Selection: Guides choosing line, bar, pie, scatter, and area charts based on data questions.
  • Library Guidance: Recommends and demonstrates usage of Recharts, Chart.js, and D3 for production-ready visuals.
  • Dashboard & Storytelling: Provides dashboard design principles and best practices for data storytelling.

Quick Start

Install dependencies and render a basic chart with minimal setup. For example, install Recharts, then import components like LineChart, Line, XAxis, and YAxis, and pass a data array to render a basic line chart. Example: import {LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer} from 'recharts' and data = [{name: 'Q1', value: 400}, {name: 'Q2', value: 700}].

Frequently Asked Questions about data-visualization-techniques

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

FAQPage Schema
How do I choose the right chart type for my data visualization dashboard?▼

Choosing the right chart type for data visualization depends on your underlying data question: use line charts for trends, bar charts for comparisons, pie charts for proportions, and scatter charts to identify correlations. Selecting the correct chart type ensures metrics are interpreted accurately.

What's the best way to build a dashboard with Recharts or D3?▼

The best way to build a dashboard with Recharts or D3 is to follow dashboard design principles by importing specific chart components, passing structured data arrays, and applying data storytelling best practices to transform raw metrics into decision-ready analytics visualizations.

Does this data visualization approach work for data storytelling and analytics?▼

Yes, this data visualization approach works for data storytelling by transforming raw data into clear visuals. It applies dashboard design principles and library usage guidance to help analytics teams interpret trends, compare metrics, and drive decisions through visual narratives.

Can I use Chart.js and Recharts together for rendering production-ready visuals?▼

You can use Chart.js and Recharts to render production-ready visuals by importing their respective chart components, such as LineChart and XAxis, and passing data arrays to render basic charts. Library guidance helps determine which tool best fits your specific visualization needs.

How do I render a basic line chart in Recharts?▼

To render a basic line chart in Recharts, install the library, import components like LineChart, Line, XAxis, YAxis, and ResponsiveContainer, then pass a formatted data array containing name and value pairs to generate your visualization.

Related Skills

Explore More Data & Analytics Skills→
githubgithub
37.6k

excalidraw-diagram-generator

Convert natural-language diagram requests into Excalidraw-ready .excalidraw files.

Official
Intermediate
yf8578yf8578
1

plotly

Generate interactive, web-embeddable Plotly charts from your data.

Community
Intermediate
iankikuiankiku
18

data

Design analytics systems, generate SQL queries, plan event tracking, and build dashboards.

Community
Advanced
DangJinDangJin
2

bi-builder

Generate BI dashboards from Prisma schemas using Next.js and Recharts.

Community
Advanced