Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
.claude/skills/dokhacgiakhoa-agent-d3js-skill/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-02 | ✗→✓ | ▲ Improved | -6% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 23% | 0% |
| case-12 | ✗→✓ | ▲ Improved | 26% | 0% |
| case-14 | ✗→✓ | ▲ Improved | -29% | 0% |
| case-08 | ✓→✓ | ＝ Same ✓ | 62% | 0% |
This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.
Use d3.js for:
Consider alternatives for:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-08 | pass→pass | 9,354 | 12,266 | +31% | 1 | 1 | 0% | 1,764 | 2,854 | +62% | 0 | 0 | — |
case-01 | pass→pass | 7,653 | 29,556 | +286% | 1 | 1 | 0% | 1,326 | 1,882 | +42% | 0 | 0 | — |
case-02 | fail→pass | 11,921 | 7,523 | -37% | 1 | 1 | 0% | 2,108 | 1,983 | -6% | 0 | 0 | — |
case-03 | pass→pass | 12,203 | 8,642 | -29% | 1 | 1 | 0% | 1,946 | 2,316 | +19% | 0 | 0 | — |
case-04 | pass→pass | 13,744 | 18,081 | +32% | 1 | 1 | 0% | 2,101 | 4,264 | +103% | 0 | 0 | — |
case-05 | pass→pass | 6,662 | 11,450 | +72% | 1 | 1 | 0% | 969 | 2,806 | +190% | 0 | 0 | — |
case-06 | pass→pass | 15,729 | 10,121 | -36% | 1 | 1 | 0% | 2,368 | 2,286 | -3% | 0 | 0 | — |
case-07 | pass→pass | 2,720 | 4,719 | +73% | 1 | 1 | 0% | 460 | 1,506 | +227% | 0 | 0 | — |
case-09 | fail→pass | 14,273 | 13,949 | -2% | 1 | 1 | 0% | 2,594 | 3,198 | +23% | 0 | 0 | — |
case-10 | pass→pass | 14,049 | 12,599 | -10% | 1 | 1 | 0% | 2,266 | 3,083 | +36% | 0 | 0 | — |
case-11 | pass→pass | 10,777 | 10,449 | -3% | 1 | 1 | 0% | 2,126 | 2,874 | +35% | 0 | 0 | — |
case-12 | fail→pass | 17,462 | 21,709 | +24% | 1 | 1 | 0% | 3,461 | 4,344 | +26% | 0 | 0 | — |
case-13 | pass→pass | 14,763 | 10,977 | -26% | 1 | 1 | 0% | 3,238 | 2,579 | -20% | 0 | 0 | — |
case-14 | fail→pass | 17,021 | 8,442 | -50% | 1 | 1 | 0% | 3,522 | 2,517 | -29% | 0 | 0 | — |
case-15 | pass→pass | 12,748 | 12,210 | -4% | 1 | 1 | 0% | 2,571 | 3,300 | +28% | 0 | 0 | — |
case-16 | pass→pass | 12,441 | 11,374 | -9% | 1 | 1 | 0% | 2,341 | 2,836 | +21% | 0 | 0 | — |
case-17 | pass→pass | 7,642 | 5,988 | -22% | 1 | 1 | 0% | 1,546 | 1,982 | +28% | 0 | 0 | — |
case-18 | pass→pass | 10,295 | 8,444 | -18% | 1 | 1 | 0% | 2,169 | 2,141 | -1% | 0 | 0 | — |
case-19 | pass→pass | 19,673 | 9,968 | -49% | 1 | 1 | 0% | 3,133 | 2,672 | -15% | 0 | 0 | — |
case-20 | pass→pass | 16,008 | 7,708 | -52% | 1 | 1 | 0% | 2,565 | 2,061 | -20% | 0 | 0 | — |
case-21 | pass→pass | 13,181 | 12,951 | -2% | 1 | 1 | 0% | 2,528 | 3,457 | +37% | 0 | 0 | — |
case-22 | pass→pass | 17,172 | 11,763 | -31% | 1 | 1 | 0% | 2,989 | 3,085 | +3% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +18 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.