Loading CSV Data with D3.js v6

SkillFiles & storage

Load and parse CSV data with D3.js v6 using d3.csv() and d3.autoType for local file serving.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Loading CSV Data with D3.js v6 skill

What this skill tells your AI

The instructions your AI receives, as published by cxcscmu/skilllearnbench in skills/b1-one-shot-claude-opus-4-6/stock-data-visualization/d3-csv-loading/SKILL.md and read by ahel’s review.

d3.csv()

const data = await d3.csv("data/stock-descriptions.csv", d3.autoType);
  • d3.autoType auto-converts numeric strings to numbers.
  • For local files, must be served via HTTP (use python3 -m http.server).

Handling CSV with Quoted Fields

D3's CSV parser handles RFC 4180 (quoted fields with commas inside). The stock-descriptions.csv has columns:

  • ,ticker,sector,full name,marketCap,fullTimeEmployees,longBusinessSummary,country,website,...
  • First column is an unnamed index column.

Key Pattern: Inline Data

When local file serving is not guaranteed, embed data as a JS variable:

const DATA = [...];  // pre-processed JSON array

This avoids CORS/fetch issues when opening HTML files directly with file://.

Signals

GitHub stars
83
Forks
5
Last commit
Jul 2026
Advanced
Catalog kind
skill
Gateway key
d3-csv-loading
Source
github.com/cxcscmu/skilllearnbench