d3-visualization

# D3.js Data Visualization

## Table of Contents

- [Read This First](#read-this-first)
- [Workflows](#workflows)
  - [Create Basic Chart Workflow](#create-basic-chart-workflow)
  - [Update Visualization with New Data](#update-visualization-with-new-data)
  - [Create Advanced Layout Workflow](#create-advanced-layout-workflow)
- [Path Selection Menu](#path-selection-menu)
- [Quick Reference](#quick-reference)

---

## Read This First

### What This Skill Does

This skill helps you create custom, interactive data visualizations using D3.js (Data-Driven Documents). D3 provides low-level building blocks for data-driven DOM manipulation, visual encoding, layout algorithms, and interactions—enabling bespoke visualizations that chart libraries can't provide.

### When to Use D3

**Use D3 when:**
- Chart libraries don't support your specific design
- You need full customization control
- Creating network graphs, hierarchies, or geographic maps
- Building interactive dashboards with linked views
- Animating data changes smoothly
- Working with complex or unconventional data structures

**Don't use D3 when:**
- Simple bar/line charts suffice (use Chart.js, Highcharts—easier)
- You need 3D visualizations (use Three.js, WebGL)
- Massive datasets >10K points without aggregation (performance limitations)
- You're unfamiliar with JavaScript/SVG/CSS (prerequisites required)

### Core Concepts

**Data Joins**: Bind arrays to DOM elements, creating one-to-one correspondence
**Scales**: Transform data values → visual values (pixels, colors, sizes)
**Shapes**: Generate SVG paths for lines, areas, arcs from data
**Layouts**: Calculate positions for complex visualizations (networks, trees, maps)
**Transitions**: Animate smooth changes between states
**Interactions**: Add zoom, pan, drag, brush selection behaviors

### Skill Structure

- **[Getting Started](resources/getting-started.md)**: Setup, prerequisites, first visualization
- **[Selections & Data Joins](resources/selections-datajoi