Skill Gallery
← Back to list
aiskillstore

d3js-visualization

by aiskillstore

Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.

⭐ 102🍴 3📅 Jan 23, 2026
ai-skillsclaudeclaude-codeclaude-skillscodexcodex-skillsskillsutility-development
View on GitHubRun in Manus

SKILL.md

name: d3js-visualization description: "Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design. Use for: (1) Creating custom interactive charts, (2) Building dashboards, (3) Network/graph visualizations, (4) Geographic data mapping, (5) Time series analysis, (6) Real-time data visualization, (7) Complex multi-dimensional data displays"

D3.js Data Visualization Skill

What is D3.js

D3.js (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS standards to bind data to the DOM and apply data-driven transformations.

When to Use D3.js

Choose D3.js when you need:

  • Custom, unique visualizations not available in chart libraries
  • Fine-grained control over every visual element
  • Complex interactions and animations
  • Data-driven DOM manipulation beyond just charts
  • Performance with large datasets (when using Canvas)
  • Web standards-based visualizations

Consider alternatives when:

  • Simple standard charts are sufficient (use Chart.js, Plotly)
  • Quick prototyping is priority (use Observable, Vega-Lite)
  • Static charts for print/reports (use matplotlib, ggplot2)
  • 3D visualizations (use Three.js, WebGL libraries)

D3.js vs Other Libraries

LibraryBest ForLearning CurveCustomization
D3.jsCustom visualizationsSteepComplete
Chart.jsStandard chartsEasyLimited
PlotlyScientific plotsMediumGood
HighchartsBusiness dashboardsEasyGood
Three.js3D graphicsSteepComplete

Core Workflow

1. Project Setup

Option 1: CDN (Quick Start)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Visualization</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    svg { display: block; }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // Your code here
  </script>
</body>
</html>

Option 2: NPM (Production)

npm install d3

// Import all of D3
import * as d3 from "d3";

// Or import specific modules
import { select, selectAll } from "d3-selection";
import { scaleLinear, scaleTime } from "d3-scale";

2. Create Basic Chart

// Set up dimensions and margins
const margin = {top: 20, right: 30, bottom: 40, left: 50};
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// Create SVG
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// Load and process data
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value
})).then(data => {

  // Create scales
  const xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

  // Create and append axes
  svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(xScale));

  svg.append("g")
    .call(d3.axisLeft(yScale));

  // Create line generator
  const line = d3.line()
    .x(d => xScale(d.date))
    .y(d => yScale(d.value))
    .curve(d3.curveMonotoneX);

  // Draw line
  svg.append("path")
    .datum(data)
    .attr("d", line)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2);
});

3. Add Interactivity

Tooltips:

const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background", "white")
  .style("border", "1px solid #ddd")
  .style("padding", "10px")
  .style("border-radius", "4px");

circles
  .on("mouseover", function(event, d) {
    tooltip
      .style("visibility", "visible")
      .html(`<strong>${d.name}</strong><br/>Value: ${d.value}`);
  })
  .on("mousemove", function(event) {
    tooltip
      .style("top", (event.pageY - 10) + "px")
      .style("left", (event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    tooltip.style("visibility", "hidden");
  });

Transitions:

circles
  .transition()
  .duration(300)
  .ease(d3.easeCubicOut)
  .attr("r", 8);

4. Implement Responsive Design

function createChart() {
  const container = d3.select("#chart");
  const containerWidth = container.node().getBoundingClientRect().width;

  const margin = {top: 20, right: 30, bottom: 40, left: 50};
  const width = containerWidth - margin.left - margin.right;
  const height = Math.min(width * 0.6, 500);

  container.selectAll("*").remove(); // Clear previous

  // Create SVG...
}

// Initial render
createChart();

// Re-render on resize with debouncing
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(createChart, 250);
});

Key Principles

Data Binding

  • Use .data() to bind data to DOM elements
  • Handle enter, update, and exit selections
  • Use key functions for consistent element-to-data matching
  • Modern syntax: use .join() for cleaner code

Scales

  • Map data values (domain) to visual values (range)
  • Use appropriate scale types (linear, time, band, ordinal)
  • Apply .nice() to scales for rounded axis values
  • Invert y-scale range for bottom-up coordinates: [height, 0]

SVG Coordinate System

  • Origin (0,0) is at top-left corner
  • Y increases downward (opposite of Cartesian)
  • Use margin convention for proper spacing
  • Group related elements with <g> tags

Performance

  • Use SVG for <1,000 elements
  • Use Canvas for >1,000 elements
  • Aggregate or sample large datasets
  • Debounce resize handlers

Chart Selection Guide

Time series data? → Line chart or area chart

Comparing categories? → Bar chart (vertical or horizontal)

Showing relationships? → Scatter plot or bubble chart

Part-to-whole? → Donut chart or stacked bar (limit to 5-7 categories)

Network data? → Force-directed graph

Distribution? → Histogram or box plot

See references/chart-types.md for detailed chart selection criteria and best practices.

Common Patterns

Quick Data Loading

// Load CSV with type conversion
d3.csv("data.csv", d => ({
  date: new Date(d.date),
  value: +d.value,
  category: d.category
})).then(data => {
  createChart(data);
});

Quick Tooltip

selection
  .on("mouseover", (event, d) => {
    tooltip.style("visibility", "visible").html(`Value: ${d.value}`);
  })
  .on("mousemove", (event) => {
    tooltip.style("top", event.pageY + "px").style("left", event.pageX + "px");
  })
  .on("mouseout", () => tooltip.style("visibility", "hidden"));

Quick Responsive SVG

svg
  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMidYMid meet")
  .style("width", "100%")
  .style("height", "auto");

Quality Standards

Visual Quality

  • Use appropriate chart type for data
  • Apply consistent color schemes
  • Include clear axis labels and legends
  • Provide proper spacing with margin convention
  • Use appropriate scale types and ranges

Interaction Quality

  • Add meaningful tooltips
  • Use smooth transitions (300-500ms duration)
  • Provide hover feedback
  • Enable keyboard navigation for accessibility
  • Implement zoom/pan for detailed exploration

Code Quality

  • Use key functions in data joins
  • Handle enter, update, and exit properly
  • Clean up previous renders before updates
  • Use reusable chart pattern for modularity
  • Debounce expensive operations

Accessibility

  • Add ARIA labels and descriptions
  • Provide keyboard navigation
  • Use colorblind-safe palettes
  • Include text alternatives for screen readers
  • Ensure sufficient color contrast

Helper Resources

Available Scripts

  • data-helpers.js: Data loading, parsing, and transformation utilities
  • chart-templates.js: Reusable chart templates for common visualizations

See scripts/ directory for implementations.

Working Examples

  • line-chart.html: Time series visualization with tooltips
  • bar-chart.html: Grouped and stacked bar charts
  • network-graph.html: Force-directed network visualization

See examples/ directory for complete implementations.

Detailed References

Troubleshooting

Chart not appearing?

  • Check browser console for errors
  • Verify data loaded correctly
  • Ensure SVG has width and height
  • Check scale domains and ranges

Elements in wrong position?

  • Verify scale domain matches data range
  • Check if y-scale range is inverted: [height, 0]
  • Confirm margin transform applied to <g> element
  • Check SVG coordinate system (top-left origin)

Transitions not working?

  • Ensure duration is reasonable (300-500ms)
  • Check if transition applied to selection, not data
  • Verify easing function is valid
  • Confirm elements exist before transitioning

Poor performance?

  • Reduce number of DOM elements (use Canvas if >1,000)
  • Aggregate or sample data
  • Debounce resize handlers
  • Minimize redraws

External Resources

Official Documentation

Learning Resources

Color Tools

Inspiration

This skill provides comprehensive coverage of D3.js for creating professional, interactive data visualizations. Use the core workflow as a starting point, refer to the detailed references for specific topics, and customize the examples for your needs.

Score

Total Score

60/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20
○LICENSE

ライセンスが設定されている

0/10
○説明文

100文字以上の説明がある

0/10
✓人気

GitHub Stars 100以上

+5
✓最近の活動

1ヶ月以内に更新

+10
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon