← Back to Skills Marketplace
56
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install d3js
Description
D3.js (Data-Driven Documents) — A JavaScript library for data visualization. Covers installation, selections, data binding, scales, shapes, transitions, 30+...
README (SKILL.md)
D3.js
D3 v7 · Low-level toolbox · 30+ composable modules · Web standards (SVG/Canvas/DOM)
Installation
ESM: import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
UMD: \x3Cscript src="https://cdn.jsdelivr.net/npm/d3@7">\x3C/script>
npm: npm install d3 → import * as d3 from "d3"
Submodules: import {mean} from "d3-array"
1-Minute Bar Chart
import * as d3 from "d3";
const data = [10, 20, 30, 40, 50];
const svg = d3.create("svg").attr("width", 400).attr("height", 200);
const x = d3.scaleBand().domain(data.map((d,i)=>i)).range([0,350]).padding(.2);
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([150, 0]);
svg.selectAll("rect").data(data).join("rect")
.attr("x", (d,i)=>x(i)).attr("y", d=>y(d))
.attr("width", x.bandwidth()).attr("height", d=>150-y(d))
.attr("fill", "steelblue");
document.getElementById("chart").append(svg.node());
Module Index
| Module | Purpose | Location |
|---|---|---|
| selection/scale/shape/axis/transition/path/ease | Selections·Scales·Shapes·Axes·Transitions·Path·Easing | essentials |
| array/format/interpolate/color/random/dispatch/timer | Array stats·Number format·Interpolation·Color·Random·Events·Timer | advanced |
| polygon/quadtree/delaunay/chord/contour | Polygons·Quadtree·Delaunay·Chord·Contour | advanced |
| force/hierarchy/geo/zoom/brush/drag | Force·Hierarchy·Geo·Zoom·Brush·Drag | advanced |
| dsv/fetch/time/time-format | CSV·Fetch·Time intervals·Time format | data |
| scale-chromatic | Color schemes (schemeCategory10/interpolateViridis) | essentials |
Progressive Loading
| File | Content |
|---|---|
| essentials.md | Selections·Data join·Scales·Axes·Shapes·Transitions·Easing·Path·5 chart templates·React/Svelte·Margin |
| data.md | CSV/JSON/TSV loading·Parsing·Formatting·Time intervals·Time formatting |
| advanced.md | Array stats·Interpolation·Color·Random·Events·Timer·Polygons·Quadtree·Chord·Contour·Delaunay·Force·Hierarchy·Geo·Zoom·Brush·Drag |
Usage principle: D3 has no "chart" abstraction. Visualizations are built by composing selections + scales + shapes + axes. No automatic chart generation — only component-level precise control. Use Canvas for 5000+ data points.
Usage Guidance
This skill appears safe to install as a D3.js reference. When using its examples, remember that npm/CDN imports and d3 fetch helpers may retrieve external library or data files, so use trusted package sources and trusted data URLs.
Capability Tags
Capability Assessment
Purpose & Capability
The artifacts consistently provide D3.js reference material, chart snippets, and integration guidance; the metadata has an odd crypto capability tag, but the skill content itself is data-visualization documentation.
Instruction Scope
Instructions are scoped to using D3 APIs and reading optional reference files; there are no role overrides, hidden behavioral instructions, or prompt-injection patterns.
Install Mechanism
The skill documents standard D3 installation options via npm or jsDelivr CDN, which is expected for a JavaScript library reference and is user-directed.
Credentials
The examples operate on charts, DOM/SVG/Canvas, and user-provided data files; no broad filesystem, credential, account, or privileged environment access is requested.
Persistence & Privilege
The package contains only non-executable Markdown files and shows no persistence, background workers, privilege escalation, or credential/session handling.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install d3js - After installation, invoke the skill by name or use
/d3js - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
- Initial release introducing D3.js skill documentation.
- Includes installation options (ESM, UMD, npm) and module usage.
- Provides a quick 1-minute example bar chart.
- Comprehensive module index and progressive loading guide.
- Covers integration guidance for React/Svelte and visualization principles.
Metadata
Frequently Asked Questions
What is D3.js — A JavaScript library for data visualization.?
D3.js (Data-Driven Documents) — A JavaScript library for data visualization. Covers installation, selections, data binding, scales, shapes, transitions, 30+... It is an AI Agent Skill for Claude Code / OpenClaw, with 56 downloads so far.
How do I install D3.js — A JavaScript library for data visualization.?
Run "/install d3js" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is D3.js — A JavaScript library for data visualization. free?
Yes, D3.js — A JavaScript library for data visualization. is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does D3.js — A JavaScript library for data visualization. support?
D3.js — A JavaScript library for data visualization. is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created D3.js — A JavaScript library for data visualization.?
It is built and maintained by OpenLark (@openlark); the current version is v1.0.0.
More Skills