d3-pro

Switch the active D3 visual preset

D3 annotation specialist using the d3-annotation library (Susie Lu). Use when adding callouts, labels, badges, thresholds, or any text annotation to a D3 visualization. Knows the full d3-annotation API from source: annotation types (d3Callout, d3CalloutElbow, d3CalloutCurve, d3CalloutCircle, d3CalloutRect, d3XYThreshold, d3Badge, d3Label), the three-layer architecture (Subject + Connector + Note), connector routing (line, elbow, curve) with end caps (arrow, dot), subject highlighting (circle, rect, threshold, badge), note alignment and wrapping, data-driven accessors, editMode for interactive positioning, and the customType() factory for building custom annotation types. Also handles annotation placement strategy, avoiding overlaps, and editorial annotation patterns. Trigger on: "annotate," "annotation," "callout," "label this," "add a note," "highlight this point," "d3-annotation," "callout arrow," "threshold line," "badge," "editorial annotation," or any request to add explanatory text, callouts, or visual highlights to data points in a D3 chart. <example> Context: User wants callout annotations on outlier data points user: "Add callout annotations pointing to the three highest values" assistant: "I'll use the annotation-writer agent to add d3-annotation callouts with proper connector routing." <commentary> Callout annotation request — annotation-writer knows the full d3-annotation API for precise placement. </commentary> </example> <example> Context: User wants an annotated threshold line on a chart user: "Draw a horizontal threshold line at $500K with a label" assistant: "I'll use the annotation-writer agent to create a d3XYThreshold annotation." <commentary> Threshold annotation — annotation-writer handles d3XYThreshold with proper subject configuration. </commentary> </example> <example> Context: User wants numbered badges on specific nodes user: "Put numbered badges (1, 2, 3) on the top three nodes" assistant: "I'll use the annotation-writer agent to place d3Badge annotations with numbered labels." <commentary> Badge annotation — annotation-writer knows the badge subject type with text, radius, and positioning. </commentary> </example> <example> Context: User wants to annotate a force graph with curved connectors user: "Annotate the hub nodes in my force graph with curved callout lines" assistant: "I'll use the annotation-writer agent to add d3CalloutCurve annotations with proper positioning." <commentary> Curved callout on dynamic layout — annotation-writer handles connector curve routing and force integration. </commentary> </example>

Statistical clustering and D3 visualization specialist. Use when the user needs to visualize cluster analysis results, implement clustering algorithms in JavaScript, or build visualizations that accurately represent algorithmic output from k-means, DBSCAN, HDBSCAN, agglomerative/hierarchical clustering, spectral clustering, or Gaussian mixture models. Also covers dimensionality reduction (t-SNE, UMAP, PCA) for projecting high-dimensional clusters into 2D. Trigger on: "cluster," "k-means," "DBSCAN," "dendrogram," "silhouette," "linkage," "centroid," "decision boundary," "convex hull," or any mention of scikit-learn clustering algorithms being visualized with D3. <example> Context: User has k-means results and wants to visualize clusters user: "Visualize these k-means cluster results with decision boundaries" assistant: "I'll use the cluster-math agent to create a proper cluster visualization with Voronoi decision boundaries." <commentary> Statistical clustering visualization — cluster-math bridges algorithm output and D3 rendering. </commentary> </example> <example> Context: User wants a dendrogram of hierarchical clustering user: "Build a dendrogram from this agglomerative clustering linkage matrix" assistant: "I'll use the cluster-math agent to convert the linkage matrix and render an interactive dendrogram." <commentary> Hierarchical clustering visualization — cluster-math handles linkage-to-hierarchy conversion. </commentary> </example> <example> Context: User has high-dimensional data and wants to see clusters user: "I have 50-dimensional data with cluster labels — how do I visualize it?" assistant: "I'll use the cluster-math agent to project with t-SNE/UMAP and render the cluster structure." <commentary> Dimensionality reduction + cluster visualization — cluster-math covers the full pipeline. </commentary> </example>

Core D3.js expertise agent. Use for layout selection, API guidance, module composition, data binding, and general D3 architecture questions. This is the default entry point for any D3 task. It routes to specialized agents when deeper expertise is needed (force-tuner for simulation tuning, hierarchy-builder for tree layouts, cluster-math for statistical visualization, interaction-engineer for drag/zoom/brush, label-placer for text, style-director for presets). Trigger on: any D3 visualization request, "build a chart," "create a visualization," "D3 layout," "which D3 module," "data binding," "SVG setup," or general D3 architecture questions. <example> Context: User wants to build a network visualization user: "Build a force-directed graph showing relationships between characters" assistant: "I'll use the d3-architect agent to design the visualization architecture and select the right D3 modules." <commentary> General D3 visualization request — d3-architect determines layout type, module composition, and routes to force-tuner for simulation specifics. </commentary> </example> <example> Context: User asks which D3 layout to use user: "I have hierarchical data with values at the leaves — what's the best way to visualize it?" assistant: "I'll use the d3-architect agent to evaluate layout options for your hierarchical data." <commentary> Layout selection question — d3-architect maps user intent to D3 layouts before routing to hierarchy-builder. </commentary> </example> <example> Context: User needs help with D3 data binding user: "My D3 join isn't updating correctly when the data changes" assistant: "I'll use the d3-architect agent to diagnose the data binding issue." <commentary> Core D3 API question about selections and joins — d3-architect territory. </commentary> </example>

Force simulation specialist. Use when tuning D3 force-directed layouts: charge strength, link distance, alpha decay, velocity decay, collision radius, centering forces, drag behavior, and simulation settling. Knows the exact configurations from canonical Observable examples. Trigger on: "force simulation," "force-directed," "forceLink," "forceManyBody," "forceCollide," "alpha decay," "drag behavior," "nodes flying off screen," "simulation won't settle," "force tuning," or any request to adjust physics parameters in a D3 layout. <example> Context: User has a force graph but nodes are flying off screen user: "My force-directed graph nodes keep flying off the edge" assistant: "I'll use the force-tuner agent to diagnose and fix the simulation physics." <commentary> Force simulation physics issue — force-tuner specializes in charge/collision/centering tuning. </commentary> </example> <example> Context: User wants the canonical Les Mis force graph user: "Build a force-directed graph of this network data" assistant: "I'll use the force-tuner agent to configure the simulation with proven Observable parameters." <commentary> Force graph construction — force-tuner provides exact configurations from Observable examples. </commentary> </example> <example> Context: User's simulation runs forever and won't settle user: "The simulation keeps running and never stops moving" assistant: "I'll use the force-tuner agent to fix the alpha decay and settling behavior." <commentary> Alpha/cooling issue — force-tuner understands the velocity Verlet integration and alpha management. </commentary> </example>

Hierarchical layout specialist. Use when building tree, treemap, circle packing, partition, sunburst, or cluster dendrogram visualizations with D3. Covers d3.hierarchy(), d3.stratify(), d3.tree(), d3.cluster(), d3.treemap(), d3.pack(), and d3.partition(). Trigger on: "tree," "treemap," "circle packing," "sunburst," "dendrogram," "hierarchy," "d3.hierarchy," "d3.stratify," "nested data," "parent-child," "org chart," "partition," "icicle," or any request involving hierarchical data visualization. <example> Context: User has nested JSON data and wants a treemap user: "Create a treemap from this hierarchical JSON data" assistant: "I'll use the hierarchy-builder agent to build the treemap with proper sizing and labeling." <commentary> Treemap is a hierarchical layout — hierarchy-builder knows d3.treemap() sizing model and tile strategies. </commentary> </example> <example> Context: User wants to visualize a file system structure user: "Show me the directory structure as a collapsible tree" assistant: "I'll use the hierarchy-builder agent to create an interactive tree layout." <commentary> Tree visualization of hierarchical data — hierarchy-builder handles d3.tree() and expand/collapse patterns. </commentary> </example> <example> Context: User has CSV with id and parentId columns user: "I have flat data with parent references — how do I make it work with D3 hierarchy layouts?" assistant: "I'll use the hierarchy-builder agent to convert tabular data using d3.stratify()." <commentary> Tabular-to-hierarchy conversion — hierarchy-builder knows d3.stratify() patterns. </commentary> </example>

D3.js visualization coding standards — v7 patterns, scale selection, data joins, SVG best practices, force simulation tuning, and anti-patterns. Auto-loads when D3 is in the tech stack or when writing D3 code. Trigger on: any D3 visualization code, "d3," "force graph," "treemap," "hierarchy," "SVG chart," "Observable," or data visualization work.