Get the FREE Ultimate OpenClaw Setup Guide →

d3js-visualization

Scanned
npx machina-cli add skill AutumnsGrove/ClaudeSkills/d3js-visualization --openclaw
Files (1)
SKILL.md
11.3 KB

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.

Source

git clone https://github.com/AutumnsGrove/ClaudeSkills/blob/master/d3js-visualization/SKILL.mdView on GitHub

Overview

D3.js enables dynamic, interactive data visualizations in web browsers using HTML, SVG, and CSS. It binds data to the DOM for fine-grained control, custom visuals, and rich animations. This makes it ideal for dashboards, network graphs, geographic maps, and time-series displays.

How This Skill Works

D3 uses a data driven approach: select elements, bind data, and create or update DOM nodes with enter, update, and exit patterns. It relies on scales, axes, and generators to map data to visuals and render with SVG, HTML, or Canvas. Interactivity is added by attaching event listeners and transitions to visualize changes smoothly.

When to Use It

  • Need custom, unique visualizations not available in standard chart libraries
  • Require fine-grained control over every visual element and interaction
  • Build dashboards with bespoke visuals and coordinated views
  • Visualize networks or geographic data with custom styling
  • Create time-series or real-time data visualizations with animations

Quick Start

  1. Step 1: Include D3 via CDN or install with npm (npm install d3)
  2. Step 2: Create an SVG container and load data (e.g., d3.csv) to prepare data
  3. Step 3: Bind data to SVG elements, render a basic chart, and add simple interactivity

Best Practices

  • Bind data with the D3 enter/update/exit pattern to manage DOM efficiently
  • Use scales, domains, and ranges to keep visuals consistent and scalable
  • Prefer SVG for vector visuals; consider Canvas for very large datasets
  • Keep accessibility in mind and design with readable color schemes
  • Modularize code with reusable components and clear data-driven APIs

Example Use Cases

  • Interactive line chart for stock prices with hover tooltips
  • Animated bar chart race showing category performance over time
  • Geographic choropleth map with dynamic coloring and pan/zoom
  • Network graph visualizing social connections with drag-and-drop
  • Real-time telemetry dashboard streaming sensor data

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗