D3 Custom Visualizations
When to use: Building custom data visualizations beyond standard charts: network graphs, hierarchy treemaps, sankey flows, and bespoke D3 visualizations.
npx skills add d3-custom-visualizationsgit clone https://github.com/skillhub-community/d3-custom-visualizations.gitDescription
An advanced D3 visualization library. Charts included: ForceDirectedGraph (network/relationship visualization with draggable nodes, link styling, and cluster detection), TreeMap (hierarchical rectangles sized by value with breadcrumb drill-down), SankeyDiagram (flow between stages/entities with proportional links and node sorting), ChordDiagram (relationships between entities as ribbons), and a custom BezierConnector for bespoke diagrams. Each is a React component accepting data + options with responsive resize.
Interaction: hover tooltips (with HTML content), click-to-select with linked detail panels, zoom/pan (d3-zoom), and animation on enter/update/exit (d3 transitions, reduced-motion aware). Includes the D3-in-React patterns that avoid the classic footguns: owning the container ref, using useMemo for the layout computation (so drag doesn't recompute the whole graph), and cleaning up simulation forces on unmount. Ships with a small data-modeling guide (how to shape input data for each chart) and real examples (org chart, sales-flow sankey, topic clusters).
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub