Covers core d3 patterns including scales, axes, data binding, and transitions across bar charts, line charts, scatter plots, chord diagrams, heatmaps, force-directed networks, and more
Two integration approaches: direct DOM manipulation for complex interactive visualisations, or declarative rendering via your framework (React, Vue, Svelte, vanilla JS)
Fetches d3-viz from sickn33/antigravity-awesome-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/d3-viz
Restart Cursor to activate d3-viz. Access via /d3-viz in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks.
When to use d3.js
Use d3.js for:
Custom visualisations requiring unique visual encodings or layouts
Interactive explorations with complex pan, zoom, or brush behaviours
Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams)
All modules (scales, axes, shapes, transitions, etc.) are accessible through the d3 namespace.
2. Choose the integration pattern
Pattern A: Direct DOM manipulation (recommended for most cases)
Use d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment:
functiondrawChart(data){if(!data || data.length===0)return;const svg = d3.select('#chart');// Select by ID, class, or DOM element// Clear previous content svg.selectAll("*").remove();// Set up dimensionsconst width =800;const height =400;const margin ={top:20,right:30,bottom:40,left:50};// Create scales, axes, and draw visualisation// ... d3 code here ...}// Call when data changesdrawChart(myData);
Pattern B: Declarative rendering (for frameworks with templating)
Use d3 for data calculations (scales, layouts) but render elements via your framework:
functiongetChartElements(data){const xScale = d3.scaleLinear().domain([0, d3.max(data,d=> d.value)]).range([0,400]);return data.map((d, i)=>({x:50,y: i *30,width:xScale(d.value),height:25}));}// In React: {getChartElements(data).map((d, i) => <rect key={i} {...d} fill="steelblue" />)}// In Vue: v-for directive over the returned array// In vanilla JS: Create elements manually from the returned data
Use Pattern A for complex visualisations with transitions, interactions, or when leveraging d3's full capabilities. Use Pattern B for simpler visualisations or when your framework prefers declarative rendering.
3. Structure the visualisation code
Follow this standard structure in your drawing function:
functiondrawVisualization(data){if(!data || data.length===0)return;const svg = d3.select('#chart');// Or pass a selector/element svg.selectAll("*").remove();// Clear previous render// 1. Define dimensionsconst width =800;const height =400;const margin ={top:20,right:30,bottom:40,left:50};const innerWidth = width - margin.left- margin.right;const innerHeight = height - margin.top- margin.bottom;// 2. Create main group with marginsconst g = svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`);// 3. Create scalesconst xScale = d3.scaleLinear().domain([0, d3.max(data,d=> d.x)]).range([0, innerWidth]);const yScale = d3.scaleLinear().domain([0, d3.max(data,d=> d.y)]).range([innerHeight,0]);// Note: inverted for SVG coordinates// 4. Create and append axesconst xAxis = d3.axisBottom(xScale);const yAxis = d3.axisLeft(yScale); g.append("g").attr("transform",`translate(0,${innerHeight})`).call(xAxis); g.append("g").call(yAxis);// 5. Bind data and create visual elements g.selectAll("circle").data(data).
✓
Make data-driven prioritization decisions faster
Stakeholder Communication
Draft PRDs, status updates, and stakeholder presentations
›Access to product documentation and roadmap tools (Jira, Notion, etc.)
›Understanding of product management frameworks (RICE, Jobs-to-be-Done, etc.)
›Stakeholder contact information and communication channels
Time Estimate
30-60 minutes to see productivity improvements
Steps
1Install product management skill
2Start with user story generation for known feature
3Progress to competitive analysis: research 2-3 competitors
4Use for roadmap prioritization: apply RICE/ICE scoring
5Draft stakeholder communications and refine based on feedback
6Build template library for recurring PM tasks
7Share effective prompts with product team
Common Pitfalls
⚠Not validating competitive research—verify facts before sharing
⚠Accepting user stories without involving engineering team
⚠Over-relying on frameworks without qualitative judgment
⚠Not customizing outputs to company culture and communication style
⚠Skipping stakeholder validation of generated requirements
Best Practices
✓ Do
+Validate research and competitive analysis with real data
+Collaborate with engineering when generating technical requirements
+Customize frameworks and templates to your company context
+Use skill for first drafts, refine with stakeholder input
+Document successful prompt patterns for PM tasks
+Combine AI efficiency with human judgment and intuition
✗ Don't
−Don't publish competitive analysis without fact-checking
−Don't finalize user stories without engineering review
−Don't make prioritization decisions solely on AI scoring
−Don't skip customer validation of generated requirements
−Don't ignore company-specific context and culture
💡 Pro Tips
★Provide context: company goals, constraints, customer feedback
★Ask for alternatives: 'Show 3 ways to prioritize this roadmap'
★Request stakeholder-specific formatting: 'Executive summary vs. engineering spec'
★Use skill for 70% generation + 30% customization to company needs
When to Use This
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
Learning Path
1Basic: user stories, feature specs, status updates
