d3-visualization

Files (1)

• SKILL.md

SKILL.md (first lines)

# D3.js — Data-Driven Visualization with Animations

> The foundational library for creating dynamic, interactive data visualizations. SVG, Canvas, and HTML rendering with powerful transitions.

## Overview

- **Repo**: github.com/d3/d3 (109K+ stars)
- **Language**: JavaScript / TypeScript
- **License**: ISC
- **Install**: `npm install d3` or `npm install d3-selection d3-scale d3-transition`
- **Docs**: d3js.org

## Core Concepts

### Selection and Data Binding

```js
import * as d3 from "d3";

// Select and modify elements
d3.select("body").append("svg").attr("width", 800).attr("height", 600);

// Data binding
const data = [30, 80, 45, 60, 20, 90, 55];

d3.select("svg")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", (d, i) => i * 50)
  .attr("y", (d) => 200 - d)
  .attr("width", 40)
  .attr("height", (d) => d)
  .attr("fill", "steelblue");
```

### Scales

```js
// Linear scale (numbers)
const xScale = d3.scaleLinear()
  .domain([0, 100])    // data range
  .range([0, 800]);     // pixel range

// Band scale (categories)
const xBand = d3.scaleBand()
  .domain(["A", "B", "C", "D"])
  .range([0, 400])
  .padding(0.2);

// Color scale
const color = d3.scaleOrdinal(d3.schemeCategory10);

// Time scale
const timeScale = d3.scaleTime()
  .domain([new Date("2024-01-01"), new Date("2024-12-31")])
  .range([0, 800]);
```

### Axes

```js
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", `translate(0, ${height - margin.bottom})`)
  .call(xAxis);

svg.append("g")
  .attr("transform", `translate(${margin.left}, 0)`)
  .call(yAxis);
```

## Animated Transitions

### Basic Transition

```js
d3.selectAll("rect")
  .transition()
  .duration(750)          // milliseconds
  .delay((d, i) => i * 50)  // staggered
  .ease(d3.easeElasticOut)
  .attr("height", (d) => yScale(d))
  .attr("fill", "orange");
```

### Enter/Update/Exit Pattern (Animated)

```js
function update(data) {
  const bars = svg.selectAll("rect").data(data, d => d.id);

  // EXIT — remove old elements
  bars.exit()
    .transition().duration(300)
    .attr("opacity", 0)
    .attr("height", 0)
    .remove();

  // ENTER — add new elements
  const enter = bars.enter()
    .append("rect")
    .attr("opacity", 0)
    .attr("height", 0);

  // UPDATE + ENTER merged
  enter.merge(bars)
    .transition().duration(500)
    .attr("x", (d, i) => xScale(i))
    .attr("y", (d) => yScale(d.value))
    .attr("width", xScale.bandwidth())
    .attr("height", (d) => height - yScale(d.value))
    .attr("opacity", 1)
    .attr("fill", "steelblue");
}
```

### Easing Functions

From ever-just/agentskills, MIT.

More from ever-just/agentskills