Skip to content
cccskills
FreePublished on GitHub

d3

Assists with building custom interactive data visualizations using D3.js. Use when creating charts, graphs, maps, force layouts, or hierarchical diagrams that require fine-grained control beyond what charting libraries provide. Trigger words: d3, data visualization, chart, svg, scales, force graph, treemap, choropleth.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills
See how to install

Files included (2)

  • SKILL.md3.9 KB
  • _scores.json1.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

D3.js

Overview

D3.js is a low-level JavaScript library for building custom, interactive data visualizations by binding data to DOM elements. It provides scales, axes, shape generators, geographic projections, force simulations, and hierarchical layouts, giving developers full control over the visual output while integrating with React through computed scales and layouts.

Instructions

  • When binding data, use .data(dataset).join("element") (D3 v6+) for the enter/update/exit pattern, setting attributes and styles from bound data via accessor functions.
  • When creating scales, choose the appropriate type (scaleLinear for continuous, scaleBand for categorical bars, scaleTime for dates, scaleOrdinal for color mapping) and always set domain from the data using d3.extent().
  • When building axes, create them with d3.axisBottom(scale) or d3.axisLeft(scale), configure ticks and format labels with d3.format(), and regenerate on resize.
  • When creating chart types, use shape generators (d3.line(), d3.area(), d3.arc(), d3.pie(), d3.stack()) and layout functions (d3.treemap(), d3.forceSimulation(), d3.geoPath()) for complex visualizations.
  • When adding interactivity, use transitions (.transition().duration(750)) for smooth data updates, tooltips on hover, and brushing/zooming for exploration.
  • When integrating with React, use D3 for math (scales, layouts, data transforms) and React for DOM rendering, computing values in useMemo and using useEffect with refs for D3-driven animations.

Examples

Example 1: Build a real-time dashboard with multiple chart types

User request: "Create a dashboard with line charts, bar charts, and a pie chart from API data"

Actions:

  1. Set up shared scales with d3.scaleTime() for the x-axis and d3.scaleLinear() for the y-axis
  2. Build a line chart using d3.line() with smooth curve interpolation and area fill
  3. Build a grouped bar chart using d3.scaleBand() with staggered enter transitions
  4. Build a donut chart using d3.pie() and d3.arc() with hover tooltips

Output: A responsive dashboard with animated charts that update smoothly when data changes.

Example 2: Create a force-directed network graph

User request: "Visualize relationships between entities as an interactive network graph"

Actions:

  1. Set up d3.forceSimulation() with forceManyBody, forceLink, and forceCenter
  2. Render nodes as circles with d3.scaleOrdinal() coloring by category
  3. Add drag interaction with d3.drag() to reposition nodes
  4. Implement zoom and pan with d3.zoom() and tooltips on hover

Output: An interactive force-directed graph with draggable nodes, color-coded categories, and zoom navigation.

Guidelines

  • Use D3 for scales, layouts, and data processing; let React handle DOM rendering in React apps.
  • Use .join() instead of manual enter/update/exit for simpler, cleaner data binding.
  • Always set scale domains from data (d3.extent()) rather than hardcoding ranges.
  • Use d3.format() for axis labels and tooltips: ",.0f" for thousands, "$.2f" for currency.
  • Add transitions of 750ms with easeCubicInOut for smooth data update animations.
  • Make visualizations responsive by recalculating scales on ResizeObserver callbacks.
  • Add aria-label to SVG elements and meaningful <title> tags for accessibility.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

3dsmax-rendering

Free

Scripts and configures production rendering in Autodesk 3ds Max with the V-Ray and Corona renderers: output size and files, render elements, denoising, light mix, batch and command-line rendering, and network rendering. Use when a user asks to set up a production render, render several cameras in one batch, render from the command line or on a render farm, add render passes for compositing, or cut render time for archviz and product shots.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills172Updated Oct 14, 2026

3dsmax-scripting

Free

Covers scripting Autodesk 3ds Max, the 3D modeling and rendering application, with MAXScript and Python (pymxs): scene manipulation, object creation, material assignment, camera and light setup, batch operations, and file I/O. Use when tasks involve automating repetitive 3ds Max workflows, batch processing scenes, running scripts headless with 3dsmaxbatch, creating custom tools, or scripting scene setup for archviz, product visualization, or VFX.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills172Updated Oct 14, 2026

3proxy

Free

3proxy is a small open-source proxy server that runs HTTP/HTTPS, SOCKS4/5, SNI and TCP/UDP port-mapping proxies from one config file. Use when a user asks to set up an HTTP or SOCKS5 proxy, add proxy users and passwords, write 3proxy access rules, chain or rotate upstream (parent) proxies, limit bandwidth, connections or monthly traffic per user, run 3proxy in Docker, or fix a 3proxy.cfg that will not start.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills172Updated Oct 14, 2026

a2a-protocol

Free

Builds Agent2Agent (A2A) servers and clients, the open protocol (originally from Google, now under the Linux Foundation) that lets AI agents from different frameworks call each other. Use when the user wants to create an A2A-compliant agent, build an Agent Card, implement task management, connect agents across frameworks, set up agent discovery, handle streaming responses, implement push notifications, or orchestrate multi-agent workflows. Trigger words: a2a, agent to agent, agent2agent, a2a protocol, a2a server, a2a client, agent card, agent interoperability, agent collaboration, multi-agent, agent discovery, a2a sdk, a2a task.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills172Updated Oct 14, 2026

ab-test-setup

Free

Plans a controlled experiment (A/B test) so its result can be trusted: writes the hypothesis, picks one primary metric and the guardrails, computes sample size and run time, specifies how visitors are assigned and when exposure is logged, and reads out the result with a confidence interval. Use when someone says "set up an A/B test", "split test this page", "how many visitors do I need", "how long should the experiment run", "is this result significant", "can I stop the test early", or wants to test a headline, price, layout or onboarding change against the current version.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills172Updated Oct 14, 2026

ably

Free

Ably is a hosted realtime messaging service: clients publish and subscribe to named channels over WebSockets, see who is present, replay message history, and resume after a dropped connection. Use when a user asks to "add realtime updates", "push live notifications to the browser", "show who is online", "add a chat room with typing indicators", "publish from a serverless function", or "authenticate Ably clients without exposing the API key". Covers the ably 2.x JavaScript SDK (Realtime and REST), JWT token authentication, presence, history and rewind, batch publishing, and the @ably/chat 1.x SDK.

The English summary is being prepared. Showing the original description.

TerminalSkills/skills172Updated Oct 14, 2026

See all skills by TerminalSkills

Report a problem with this skill