skills.rest
jokken79
jokken79COMMUNITY
Explore all skills by this author →
GitHub

d3-viz

Bind data to DOM elements to create interactive D3.js visualizations.

1|Updated Dec 15, 2025
Search Tags:#accessibility#interactive#pattern#svg#d3#data-visualisation#tooltip
One-click install
npx skills add https://github.com/jokken79/YuKyuDATA-app1.0v --skill d3-viz-jokken79
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d3-viz
Source: https://github.com/jokken79/YuKyuDATA-app1.0v/tree/main/.agent/skills/claude-d3js-skill
Command: npx skills add https://github.com/jokken79/YuKyuDATA-app1.0v --skill d3-viz-jokken79

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

When building data-driven projects, teams often struggle to create expressive, interactive visualisations quickly; this Skill provides a structured approach to implementing bespoke D3 visualisations that bind data to the DOM with precise control over rendering and interactions.

Core Features & Use Cases

  • Custom charts & diagrams: bar, line, scatter, chord, treemap, and geographic maps that are tailored to data and design requirements.
  • Cross-framework compatibility: works with vanilla JavaScript, React, Vue, Svelte, or other environments.
  • Interactive features: tooltips, zoom/pan, brushing, transitions, and accessible keyboard navigation.
  • Real-world use cases: dashboards, network graphs, data storytelling, and publication-quality visuals.

Quick Start

Create a basic interactive bar chart using D3 by binding your dataset to SVG elements and applying scales and axes.

Frequently Asked Questions about d3-viz

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

FAQPage Schema
How do I create interactive D3 data visualisations in React or Vue?▼

D3 data visualisations can be built in React, Vue, Svelte, or vanilla JavaScript by binding data to DOM elements. This approach provides structured patterns for custom charts, interactive tooltips, zoom, and accessible keyboard navigation across frameworks.

What types of custom charts and graphs can I build with D3.js?▼

D3.js supports building custom charts and graphs including bar, line, scatter, chord, and treemap visualisations. It also enables creating geographic maps and network diagrams tailored to specific data and design requirements.

How do I add accessibility features to SVG data visualisations?▼

SVG data visualisations can be made accessible by implementing keyboard navigation and incorporating accessibility considerations into the D3 rendering process. This ensures interactive charts and geographic maps are navigable for all users.

What is the best way to implement tooltips and zoom in D3 data visualisations?▼

Tooltips and zoom in D3 data visualisations are implemented by binding interactive features to DOM elements. This provides precise control over panning, brushing, and transitions for dashboards and data storytelling.

Does this D3 visualisation approach work for geographic maps and network diagrams?▼

Yes, this D3 visualisation approach works for geographic maps and network diagrams. It binds data to SVG elements to render custom geographic visualisations and complex network graphs with interactive features.

Related Skills

Explore More Design & Creative Skills→
het8802het8802
3

d3-viz

Create and manipulate custom SVG data visualizations with d3.js.

Community
Advanced
m0atm0at
1

plotly

Create interactive visualizations with Plotly Express and Graph Objects APIs.

Community
Advanced
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced
lamm-mitlamm-mit
38

d3-viz

Create custom interactive SVG data visualizations with d3.js.

Community
Intermediate