What are the two integration patterns for D3.js covered in this skill?

Pattern A uses direct DOM manipulation where D3 selects and imperatively manipulates DOM elements—recommended for complex visualizations with transitions and interactions in any JavaScript environment. Pattern B uses declarative rendering where D3 handles only data calculations (scales, layouts) while a framework like React or Vue renders the elements—suited to simpler visualizations or framework-preferred approaches.

What seven visualization types does this skill provide working code for?

The skill covers bar chart, line chart, scatter plot, chord diagram, heatmap, pie chart, and force-directed network visualizations with working code examples.

How do I fix axes not appearing in D3?

Check that scale domains don't contain NaN values, verify the axis group is placed correctly in the DOM, and ensure transform translations are applied properly.

What should I do if D3 transitions aren't working?

Call `.transition()` before making attribute changes, ensure unique keys are set for data binding, and verify that effect dependencies are correct.

When should I use canvas instead of SVG in D3?

Consider using canvas instead of SVG when you have more than approximately 1000 DOM elements, as it offers better performance for large datasets.

Skill

Generate D3.js Visualizations

Name: D3.js Visualisation
Availability: OnlineOnly
Author: Antigravity

Skill that guides creation of interactive, data-driven visualizations using D3.js with precise control over DOM elements and transformations across JavaScript

Get skill

Works with reactvuesvelte

Antigravity

Own this? Claim it

Spark score

out of 100

Updated 10 days ago

Version 15.7.0

Add to Favorites

Why it matters

Leverage D3.js to create sophisticated, interactive, and publication-quality data visualizations. This skill guides you through setting up D3.js, choosing integration patterns, structuring your code, and implementing responsive designs for various chart types.

Outcomes

What it gets done

Set up D3.js environment and import necessary modules.

Implement direct DOM manipulation or declarative rendering patterns.

Structure visualization code with dimensions, scales, axes, and data binding.

Create common chart types like bar charts, line charts, and scatter plots.

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-claude-d3js-skill | bash

Overview

D3.js Visualisation

This skill provides guidance for creating sophisticated, interactive data visualizations using D3.js. It helps you bind data to DOM elements and apply data-driven transformations to produce custom, publication-quality visualizations with precise control over every visual element. Use this skill when you need to create custom, interactive data visualizations that require fine-grained control over visual elements, or when building publication-quality charts and graphs. It works across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.

What it does

This skill provides guidance for building sophisticated, interactive data visualizations using D3.js (Data-Driven Documents). It helps you bind data to DOM elements and apply data-driven transformations to create custom, publication-quality visualizations with precise control over every visual element.

When to use - and when NOT to

Use this skill when you need to create custom, interactive data visualizations with D3.js. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.

Inputs and outputs

This skill provides guidance on D3.js techniques for binding data to DOM elements and applying data-driven transformations to create visualizations.

Integrations

This skill works across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks. The techniques provided are framework-agnostic and can be integrated into your existing JavaScript-based development workflow regardless of your chosen framework or library.

Who it's for

This skill is for those working with D3.js to create custom, interactive data visualizations.

Source README

This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.

FAQ

Common questions

Discussion