skills.rest
dudqks0319-cpu
dudqks0319-cpuCOMMUNITY
Explore all skills by this author →
GitHub

d3_visualization

Generate D3.js charts including bar, line, pie, donut, and scatter plots in HTML.

Updated Jan 16, 2026
Search Tags:#html#data visualization#charts#javascript#svg#d3.js#graphs
One-click install
npx skills add https://github.com/dudqks0319-cpu/antigravity-skills --skill d3-visualization-dudqks0319-cpu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d3_visualization
Source: https://github.com/dudqks0319-cpu/antigravity-skills/tree/main/d3_visualization
Command: npx skills add https://github.com/dudqks0319-cpu/antigravity-skills --skill d3-visualization-dudqks0319-cpu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning raw data into interactive web charts requires writing repetitive D3.js boilerplate, choosing the right chart type, and handling styling details like colors, animations, and responsiveness. This Skill provides ready-made guidance and templates so chart requests are fulfilled quickly and consistently. ## Core Features & Use Cases - Multiple Chart Types: Supports bar charts for comparisons, line charts for trends, pie and donut charts for proportions, and scatter plots for correlations. - HTML Template: Provides a base HTML template loading D3.js v7 from CDN with a chart container ready for custom code. - Style Guidelines: Enforces modern gradient color palettes, smooth transition animations, responsive SVG viewBox scaling, and accessibility via tooltips and labels. - Use Case: When a user asks "make a chart of monthly sales", the Skill produces a complete standalone HTML page with a styled, animated, responsive D3.js bar or line chart. ## Quick Start Ask the assistant to create a D3.js bar chart visualizing your dataset as a standalone HTML page.

Frequently Asked Questions about d3_visualization

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

FAQPage Schema
How do I create a bar chart with D3.js?▼

Load D3.js v7 from the CDN in an HTML page, bind your data array to SVG rect elements, and map values to x and y scales. This Skill provides a base template with a chart container where the D3 code is inserted.

Which chart type should I use for my data?▼

Use bar charts to compare items, line charts for trends over time, pie or donut charts for proportions, and scatter plots for correlations between variables. The Skill includes a chart selection table mapping each type to its purpose.

Does D3.js support responsive charts?▼

Yes, D3.js charts can be made responsive by using the SVG viewBox attribute instead of fixed width and height. This lets the chart scale to fit any container while preserving aspect ratio.

How do I add animations to D3.js charts?▼

Use D3's transition API on selections to animate attribute changes such as bar heights or line positions. The Skill's style guide recommends smooth transition effects for all chart updates.

Can I use D3.js charts without a build tool?▼

Yes, D3.js v7 can be loaded directly from the official CDN with a script tag in a plain HTML file. No bundler, npm install, or framework is required for the charts this Skill generates.

Related Skills

Explore More Data & Analytics Skills→
FalkorDBFalkorDB
22

Use Bulk Loader from CSV

Load CSV files into FalkorDB graph databases using the bulk loader utility.

Official
Intermediate
Li-Bai-GOATLi-Bai-GOAT

chartjs-generator

Generate interactive charts with Chart.js for web applications.

Community
Intermediate
billiampaladbilliampalad
1

brand

Manage brand voice, visual identity, and asset consistency with validation scripts.

Community
Intermediate
SenseTime-FVGSenseTime-FVG
8

python-dataviz

Generate static and interactive charts from tabular data using matplotlib, seaborn, and plotly.

Official
Intermediate