skills.rest
zacharyr0th
zacharyr0thCOMMUNITY
Explore all skills by this author →
Website𝕏@zacharyr0thGitHub

d3-shapes-paths

Create and manage SVG shape paths for charts using D3 shape generators.

Updated Aug 23, 2026
Search Tags:#svg#d3#paths#shapes
One-click install
npx skills add https://github.com/zacharyr0th/next-starter --skill d3-shapes-paths
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d3-shapes-paths
Source: https://github.com/zacharyr0th/next-starter/tree/main/.claude/skills/d3/d3-shapes-paths
Command: npx skills add https://github.com/zacharyr0th/next-starter --skill d3-shapes-paths

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when creating SVG shapes, path generators, or manipulating shape data for charts. It covers line/area/arc generators, curves, symbols, stacks, ribbons, and general path construction.

Core Features & Use Cases

  • Line, area, arc, and pie/ribbon generators
  • Curve interpolation and path construction
  • Stacks and linked shapes for multi-series charts
  • Polygon and contour related shapes and path operations

Quick Start

Request guidance to generate a multi-series line chart with a custom arc path.

Frequently Asked Questions about d3-shapes-paths

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create SVG line and area charts using D3 shape generators?▼

D3 shape generators create SVG paths for line and area charts by mapping data to x/y coordinates. Use line generators for single-series plots and area generators for filled regions, with support for multiple curve interpolation types like curveLinear and curveMonotoneX to control path smoothness.

What curve interpolation options are available for SVG paths in D3?▼

D3 supports multiple curve types including curveLinear, curveMonotoneX, curveCatmullRom, curveBasis, and curveStep. Each produces different path smoothness and visual characteristics, letting you choose the interpolation that best fits your data and chart style.

Can I create pie, arc, and ribbon diagrams with D3 shape generators?▼

Yes. D3 provides dedicated arc, pie, and ribbon generators for circular and linked visualizations. Pie generators convert data into wedges, arc generators handle radial paths, and ribbon generators connect related data across circular layouts.

How do I handle missing or null data when constructing SVG paths?▼

Use the defined accessor to specify which data points are valid, breaking paths at undefined values. This prevents rendering gaps as lines and lets you control discontinuities in line and area charts with sparse or incomplete datasets.

What's the best way to render multi-series charts with stacked shapes?▼

D3 stack generators layer multiple data series and compute cumulative offsets for stacked area or bar layouts. Combined with area or line generators, stacks display composite data while maintaining individual series visibility and correct path ordering.

Does D3 support symbol and contour shapes for scatter and heatmap visualizations?▼

Yes. Symbol generators produce marker shapes at specified coordinates, and contour generators create iso-valued paths from gridded data. Both integrate with scales and transforms for positioning and styling within SVG charts.

Related Skills

Explore More Software Engineering Skills→
lyndonkllyndonkl
142

d3-visualization

Generate custom interactive D3.js visualizations with SVG elements and dynamic interactions.

Community
Advanced
syncfusionsyncfusion
3

syncfusion-react-accumulation-chart

Automate Syncfusion Accumulation Chart integration in React apps.

Official
Advanced
Bbeierle12Bbeierle12
8

d3js-visualization

Automate D3.js chart creation for interactive web dashboards.

Community
Intermediate
jaechang-hitsjaechang-hits
298

Plotly Interactive Plots

Generate interactive Plotly charts with hover, zoom, and pan.

Community
Intermediate