claude-d3js-skill

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 visua...

Review — 0%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Evaluation — 84%

Agent success when using this skill

Validation — 8 / 11 Passed

Validation for skill structure

Validation failed for this skill

This skill has errors that need to be fixed before it can move to Implementation and Discovery review.

SKILL.md

Review

Evals

Evaluation results

89%

Transaction Explorer: Interactive Scatter Plot

Tooltips, zoom, and transitions

Criteria

Without context

With context

Tooltip outside SVG

80%

100%

pointer-events none

100%

Tooltip visibility toggle

57%

100%

Tooltip position offset

85%

100%

Zoom scaleExtent

44%

svg.call(zoom)

100%

Entry transitions

100%

Staggered delay

100%

Clear previous render

join() data binding

100%

Null data filter

100%

Y-scale inverted

100%

Standard structure order

80%

100%

Margin convention

100%

Without context: $0.3490 · 1m 29s · 12 turns · 12 in / 6,266 out tokens

With context: $0.6455 · 1m 49s · 19 turns · 325 in / 7,457 out tokens

75%

21%

Support Ticket Activity Heatmap

Responsive sizing and color schemes

Criteria

Without context

With context

Resize listener

100%

Initial size update

100%

Cleanup function returned

YlOrRd colour scale

100%

Colour domain set

100%

SVG role attribute

100%

SVG aria-label

42%

SVG title element

100%

SVG desc element

100%

Inter font family

100%

Colour palette object

clear previous render

100%

join() for cells

100%

Empty data guard

Without context: $0.3203 · 1m 13s · 11 turns · 60 in / 5,790 out tokens

With context: $0.7691 · 2m 46s · 18 turns · 274 in / 11,947 out tokens

90%

Development Indicators: Country Comparison Bubble Chart

Color-blind safe palette and scaleSqrt

Criteria

Without context

With context

scaleSqrt for radius

100%

Okabe-Ito or CVD-safe palette

100%

No schemeCategory10 default

100%

Colour range count

100%

Null data filter

100%

join() data binding

100%

Empty data guard

Y-scale inverted

100%

Margin convention

100%

Standard structure

100%

Region legend

100%

Axis labels

100%

Clear previous render

Without context: $0.3408 · 1m 31s · 11 turns · 60 in / 5,988 out tokens

With context: $0.8008 · 2m 48s · 22 turns · 312 in / 9,731 out tokens

Evaluated: about 16 hours ago
Agent: Claude Code

Table of Contents

Transaction Explorer: Interactive Scatter Plot Support Ticket Activity Heatmap Development Indicators: Country Comparison Bubble Chart

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.