{"id":"8fe1aa85-6795-4cc1-a6f6-76857082cc19","shortId":"CFzLtN","kind":"skill","title":"claude-d3js-skill","tagline":"This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js.","description":"# D3.js Visualisation\n\n## Overview\n\nThis 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.\n\n## When to use d3.js\n\n**Use d3.js for:**\n- Custom visualisations requiring unique visual encodings or layouts\n- Interactive explorations with complex pan, zoom, or brush behaviours\n- Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams)\n- Geographic visualisations with custom projections\n- Visualisations requiring smooth, choreographed transitions\n- Publication-quality graphics with fine-grained styling control\n- Novel chart types not available in standard libraries\n\n**Consider alternatives for:**\n- 3D visualisations - use Three.js instead\n\n## Core workflow\n\n### 1. Set up d3.js\n\nImport d3 at the top of your script:\n\n```javascript\nimport * as d3 from 'd3';\n```\n\nOr use the CDN version (7.x):\n\n```html\n<script src=\"https://d3js.org/d3.v7.min.js\"></script>\n```\n\nAll modules (scales, axes, shapes, transitions, etc.) are accessible through the `d3` namespace.\n\n### 2. Choose the integration pattern\n\n**Pattern A: Direct DOM manipulation (recommended for most cases)**\nUse d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment:\n\n```javascript\nfunction drawChart(data) {\n  if (!data || data.length === 0) return;\n\n  const svg = d3.select('#chart'); // Select by ID, class, or DOM element\n\n  // Clear previous content\n  svg.selectAll(\"*\").remove();\n\n  // Set up dimensions\n  const width = 800;\n  const height = 400;\n  const margin = { top: 20, right: 30, bottom: 40, left: 50 };\n\n  // Create scales, axes, and draw visualisation\n  // ... d3 code here ...\n}\n\n// Call when data changes\ndrawChart(myData);\n```\n\n**Pattern B: Declarative rendering (for frameworks with templating)**\nUse d3 for data calculations (scales, layouts) but render elements via your framework:\n\n```javascript\nfunction getChartElements(data) {\n  const xScale = d3.scaleLinear()\n    .domain([0, d3.max(data, d => d.value)])\n    .range([0, 400]);\n\n  return data.map((d, i) => ({\n    x: 50,\n    y: i * 30,\n    width: xScale(d.value),\n    height: 25\n  }));\n}\n\n// In React: {getChartElements(data).map((d, i) => <rect key={i} {...d} fill=\"steelblue\" />)}\n// In Vue: v-for directive over the returned array\n// In vanilla JS: Create elements manually from the returned data\n```\n\nUse 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.\n\n### 3. Structure the visualisation code\n\nFollow this standard structure in your drawing function:\n\n```javascript\nfunction drawVisualization(data) {\n  if (!data || data.length === 0) return;\n\n  const svg = d3.select('#chart'); // Or pass a selector/element\n  svg.selectAll(\"*\").remove(); // Clear previous render\n\n  // 1. Define dimensions\n  const width = 800;\n  const height = 400;\n  const margin = { top: 20, right: 30, bottom: 40, left: 50 };\n  const innerWidth = width - margin.left - margin.right;\n  const innerHeight = height - margin.top - margin.bottom;\n\n  // 2. Create main group with margins\n  const g = svg.append(\"g\")\n    .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n  // 3. Create scales\n  const xScale = d3.scaleLinear()\n    .domain([0, d3.max(data, d => d.x)])\n    .range([0, innerWidth]);\n\n  const yScale = d3.scaleLinear()\n    .domain([0, d3.max(data, d => d.y)])\n    .range([innerHeight, 0]); // Note: inverted for SVG coordinates\n\n  // 4. Create and append axes\n  const xAxis = d3.axisBottom(xScale);\n  const yAxis = d3.axisLeft(yScale);\n\n  g.append(\"g\")\n    .attr(\"transform\", `translate(0,${innerHeight})`)\n    .call(xAxis);\n\n  g.append(\"g\")\n    .call(yAxis);\n\n  // 5. Bind data and create visual elements\n  g.selectAll(\"circle\")\n    .data(data)\n    .join(\"circle\")\n    .attr(\"cx\", d => xScale(d.x))\n    .attr(\"cy\", d => yScale(d.y))\n    .attr(\"r\", 5)\n    .attr(\"fill\", \"steelblue\");\n}\n\n// Call when data changes\ndrawVisualization(myData);\n```\n\n### 4. Implement responsive sizing\n\nMake visualisations responsive to container size:\n\n```javascript\nfunction setupResponsiveChart(containerId, data) {\n  const container = document.getElementById(containerId);\n  const svg = d3.select(`#${containerId}`).append('svg');\n\n  function updateChart() {\n    const { width, height } = container.getBoundingClientRect();\n    svg.attr('width', width).attr('height', height);\n\n    // Redraw visualisation with new dimensions\n    drawChart(data, svg, width, height);\n  }\n\n  // Update on initial load\n  updateChart();\n\n  // Update on window resize\n  window.addEventListener('resize', updateChart);\n\n  // Return cleanup function\n  return () => window.removeEventListener('resize', updateChart);\n}\n\n// Usage:\n// const cleanup = setupResponsiveChart('chart-container', myData);\n// cleanup(); // Call when component unmounts or element removed\n```\n\nOr use ResizeObserver for more direct container monitoring:\n\n```javascript\nfunction setupResponsiveChartWithObserver(svgElement, data) {\n  const observer = new ResizeObserver(() => {\n    const { width, height } = svgElement.getBoundingClientRect();\n    d3.select(svgElement)\n      .attr('width', width)\n      .attr('height', height);\n\n    // Redraw visualisation\n    drawChart(data, d3.select(svgElement), width, height);\n  });\n\n  observer.observe(svgElement.parentElement);\n  return () => observer.disconnect();\n}\n```\n\n## Common visualisation patterns\n\n### Bar chart\n\n```javascript\nfunction drawBarChart(data, svgElement) {\n  if (!data || data.length === 0) return;\n\n  const svg = d3.select(svgElement);\n  svg.selectAll(\"*\").remove();\n\n  const width = 800;\n  const height = 400;\n  const margin = { top: 20, right: 30, bottom: 40, left: 50 };\n  const innerWidth = width - margin.left - margin.right;\n  const innerHeight = height - margin.top - margin.bottom;\n\n  const g = svg.append(\"g\")\n    .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n  const xScale = d3.scaleBand()\n    .domain(data.map(d => d.category))\n    .range([0, innerWidth])\n    .padding(0.1);\n\n  const yScale = d3.scaleLinear()\n    .domain([0, d3.max(data, d => d.value)])\n    .range([innerHeight, 0]);\n\n  g.append(\"g\")\n    .attr(\"transform\", `translate(0,${innerHeight})`)\n    .call(d3.axisBottom(xScale));\n\n  g.append(\"g\")\n    .call(d3.axisLeft(yScale));\n\n  g.selectAll(\"rect\")\n    .data(data)\n    .join(\"rect\")\n    .attr(\"x\", d => xScale(d.category))\n    .attr(\"y\", d => yScale(d.value))\n    .attr(\"width\", xScale.bandwidth())\n    .attr(\"height\", d => innerHeight - yScale(d.value))\n    .attr(\"fill\", \"steelblue\");\n}\n\n// Usage:\n// drawBarChart(myData, document.getElementById('chart'));\n```\n\n### Line chart\n\n```javascript\nconst line = d3.line()\n  .x(d => xScale(d.date))\n  .y(d => yScale(d.value))\n  .curve(d3.curveMonotoneX); // Smooth curve\n\ng.append(\"path\")\n  .datum(data)\n  .attr(\"fill\", \"none\")\n  .attr(\"stroke\", \"steelblue\")\n  .attr(\"stroke-width\", 2)\n  .attr(\"d\", line);\n```\n\n### Scatter plot\n\n```javascript\ng.selectAll(\"circle\")\n  .data(data)\n  .join(\"circle\")\n  .attr(\"cx\", d => xScale(d.x))\n  .attr(\"cy\", d => yScale(d.y))\n  .attr(\"r\", d => sizeScale(d.size)) // Optional: size encoding\n  .attr(\"fill\", d => colourScale(d.category)) // Optional: colour encoding\n  .attr(\"opacity\", 0.7);\n```\n\n### Chord diagram\n\nA chord diagram shows relationships between entities in a circular layout, with ribbons representing flows between them:\n\n```javascript\nfunction drawChordDiagram(data) {\n  // data format: array of objects with source, target, and value\n  // Example: [{ source: 'A', target: 'B', value: 10 }, ...]\n\n  if (!data || data.length === 0) return;\n\n  const svg = d3.select('#chart');\n  svg.selectAll(\"*\").remove();\n\n  const width = 600;\n  const height = 600;\n  const innerRadius = Math.min(width, height) * 0.3;\n  const outerRadius = innerRadius + 30;\n\n  // Create matrix from data\n  const nodes = Array.from(new Set(data.flatMap(d => [d.source, d.target])));\n  const matrix = Array.from({ length: nodes.length }, () => Array(nodes.length).fill(0));\n\n  data.forEach(d => {\n    const i = nodes.indexOf(d.source);\n    const j = nodes.indexOf(d.target);\n    matrix[i][j] += d.value;\n    matrix[j][i] += d.value;\n  });\n\n  // Create chord layout\n  const chord = d3.chord()\n    .padAngle(0.05)\n    .sortSubgroups(d3.descending);\n\n  const arc = d3.arc()\n    .innerRadius(innerRadius)\n    .outerRadius(outerRadius);\n\n  const ribbon = d3.ribbon()\n    .source(d => d.source)\n    .target(d => d.target);\n\n  const colourScale = d3.scaleOrdinal(d3.schemeCategory10)\n    .domain(nodes);\n\n  const g = svg.append(\"g\")\n    .attr(\"transform\", `translate(${width / 2},${height / 2})`);\n\n  const chords = chord(matrix);\n\n  // Draw ribbons\n  g.append(\"g\")\n    .attr(\"fill-opacity\", 0.67)\n    .selectAll(\"path\")\n    .data(chords)\n    .join(\"path\")\n    .attr(\"d\", ribbon)\n    .attr(\"fill\", d => colourScale(nodes[d.source.index]))\n    .attr(\"stroke\", d => d3.rgb(colourScale(nodes[d.source.index])).darker());\n\n  // Draw groups (arcs)\n  const group = g.append(\"g\")\n    .selectAll(\"g\")\n    .data(chords.groups)\n    .join(\"g\");\n\n  group.append(\"path\")\n    .attr(\"d\", arc)\n    .attr(\"fill\", d => colourScale(nodes[d.index]))\n    .attr(\"stroke\", d => d3.rgb(colourScale(nodes[d.index])).darker());\n\n  // Add labels\n  group.append(\"text\")\n    .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })\n    .attr(\"dy\", \"0.31em\")\n    .attr(\"transform\", d => `rotate(${(d.angle * 180 / Math.PI) - 90})translate(${outerRadius + 30})${d.angle > Math.PI ? \"rotate(180)\" : \"\"}`)\n    .attr(\"text-anchor\", d => d.angle > Math.PI ? \"end\" : null)\n    .text((d, i) => nodes[i])\n    .style(\"font-size\", \"12px\");\n}\n```\n\n### Heatmap\n\nA heatmap uses colour to encode values in a two-dimensional grid, useful for showing patterns across categories:\n\n```javascript\nfunction drawHeatmap(data) {\n  // data format: array of objects with row, column, and value\n  // Example: [{ row: 'A', column: 'X', value: 10 }, ...]\n\n  if (!data || data.length === 0) return;\n\n  const svg = d3.select('#chart');\n  svg.selectAll(\"*\").remove();\n\n  const width = 800;\n  const height = 600;\n  const margin = { top: 100, right: 30, bottom: 30, left: 100 };\n  const innerWidth = width - margin.left - margin.right;\n  const innerHeight = height - margin.top - margin.bottom;\n\n  // Get unique rows and columns\n  const rows = Array.from(new Set(data.map(d => d.row)));\n  const columns = Array.from(new Set(data.map(d => d.column)));\n\n  const g = svg.append(\"g\")\n    .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n  // Create scales\n  const xScale = d3.scaleBand()\n    .domain(columns)\n    .range([0, innerWidth])\n    .padding(0.01);\n\n  const yScale = d3.scaleBand()\n    .domain(rows)\n    .range([0, innerHeight])\n    .padding(0.01);\n\n  // Colour scale for values\n  const colourScale = d3.scaleSequential(d3.interpolateYlOrRd)\n    .domain([0, d3.max(data, d => d.value)]);\n\n  // Draw rectangles\n  g.selectAll(\"rect\")\n    .data(data)\n    .join(\"rect\")\n    .attr(\"x\", d => xScale(d.column))\n    .attr(\"y\", d => yScale(d.row))\n    .attr(\"width\", xScale.bandwidth())\n    .attr(\"height\", yScale.bandwidth())\n    .attr(\"fill\", d => colourScale(d.value));\n\n  // Add x-axis labels\n  svg.append(\"g\")\n    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n    .selectAll(\"text\")\n    .data(columns)\n    .join(\"text\")\n    .attr(\"x\", d => xScale(d) + xScale.bandwidth() / 2)\n    .attr(\"y\", -10)\n    .attr(\"text-anchor\", \"middle\")\n    .text(d => d)\n    .style(\"font-size\", \"12px\");\n\n  // Add y-axis labels\n  svg.append(\"g\")\n    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n    .selectAll(\"text\")\n    .data(rows)\n    .join(\"text\")\n    .attr(\"x\", -10)\n    .attr(\"y\", d => yScale(d) + yScale.bandwidth() / 2)\n    .attr(\"dy\", \"0.35em\")\n    .attr(\"text-anchor\", \"end\")\n    .text(d => d)\n    .style(\"font-size\", \"12px\");\n\n  // Add colour legend\n  const legendWidth = 20;\n  const legendHeight = 200;\n  const legend = svg.append(\"g\")\n    .attr(\"transform\", `translate(${width - 60},${margin.top})`);\n\n  const legendScale = d3.scaleLinear()\n    .domain(colourScale.domain())\n    .range([legendHeight, 0]);\n\n  const legendAxis = d3.axisRight(legendScale)\n    .ticks(5);\n\n  // Draw colour gradient in legend\n  for (let i = 0; i < legendHeight; i++) {\n    legend.append(\"rect\")\n      .attr(\"y\", i)\n      .attr(\"width\", legendWidth)\n      .attr(\"height\", 1)\n      .attr(\"fill\", colourScale(legendScale.invert(i)));\n  }\n\n  legend.append(\"g\")\n    .attr(\"transform\", `translate(${legendWidth},0)`)\n    .call(legendAxis);\n}\n```\n\n### Pie chart\n\n```javascript\nconst pie = d3.pie()\n  .value(d => d.value)\n  .sort(null);\n\nconst arc = d3.arc()\n  .innerRadius(0)\n  .outerRadius(Math.min(width, height) / 2 - 20);\n\nconst colourScale = d3.scaleOrdinal(d3.schemeCategory10);\n\nconst g = svg.append(\"g\")\n  .attr(\"transform\", `translate(${width / 2},${height / 2})`);\n\ng.selectAll(\"path\")\n  .data(pie(data))\n  .join(\"path\")\n  .attr(\"d\", arc)\n  .attr(\"fill\", (d, i) => colourScale(i))\n  .attr(\"stroke\", \"white\")\n  .attr(\"stroke-width\", 2);\n```\n\n### Force-directed network\n\n```javascript\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"link\", d3.forceLink(links).id(d => d.id).distance(100))\n  .force(\"charge\", d3.forceManyBody().strength(-300))\n  .force(\"center\", d3.forceCenter(width / 2, height / 2));\n\nconst link = g.selectAll(\"line\")\n  .data(links)\n  .join(\"line\")\n  .attr(\"stroke\", \"#999\")\n  .attr(\"stroke-width\", 1);\n\nconst node = g.selectAll(\"circle\")\n  .data(nodes)\n  .join(\"circle\")\n  .attr(\"r\", 8)\n  .attr(\"fill\", \"steelblue\")\n  .call(d3.drag()\n    .on(\"start\", dragstarted)\n    .on(\"drag\", dragged)\n    .on(\"end\", dragended));\n\nsimulation.on(\"tick\", () => {\n  link\n    .attr(\"x1\", d => d.source.x)\n    .attr(\"y1\", d => d.source.y)\n    .attr(\"x2\", d => d.target.x)\n    .attr(\"y2\", d => d.target.y);\n  \n  node\n    .attr(\"cx\", d => d.x)\n    .attr(\"cy\", d => d.y);\n});\n\nfunction dragstarted(event) {\n  if (!event.active) simulation.alphaTarget(0.3).restart();\n  event.subject.fx = event.subject.x;\n  event.subject.fy = event.subject.y;\n}\n\nfunction dragged(event) {\n  event.subject.fx = event.x;\n  event.subject.fy = event.y;\n}\n\nfunction dragended(event) {\n  if (!event.active) simulation.alphaTarget(0);\n  event.subject.fx = null;\n  event.subject.fy = null;\n}\n```\n\n## Adding interactivity\n\n### Tooltips\n\n```javascript\n// Create tooltip div (outside SVG)\nconst tooltip = d3.select(\"body\").append(\"div\")\n  .attr(\"class\", \"tooltip\")\n  .style(\"position\", \"absolute\")\n  .style(\"visibility\", \"hidden\")\n  .style(\"background-color\", \"white\")\n  .style(\"border\", \"1px solid #ddd\")\n  .style(\"padding\", \"10px\")\n  .style(\"border-radius\", \"4px\")\n  .style(\"pointer-events\", \"none\");\n\n// Add to elements\ncircles\n  .on(\"mouseover\", function(event, d) {\n    d3.select(this).attr(\"opacity\", 1);\n    tooltip\n      .style(\"visibility\", \"visible\")\n      .html(`<strong>${d.label}</strong><br/>Value: ${d.value}`);\n  })\n  .on(\"mousemove\", function(event) {\n    tooltip\n      .style(\"top\", (event.pageY - 10) + \"px\")\n      .style(\"left\", (event.pageX + 10) + \"px\");\n  })\n  .on(\"mouseout\", function() {\n    d3.select(this).attr(\"opacity\", 0.7);\n    tooltip.style(\"visibility\", \"hidden\");\n  });\n```\n\n### Zoom and pan\n\n```javascript\nconst zoom = d3.zoom()\n  .scaleExtent([0.5, 10])\n  .on(\"zoom\", (event) => {\n    g.attr(\"transform\", event.transform);\n  });\n\nsvg.call(zoom);\n```\n\n### Click interactions\n\n```javascript\ncircles\n  .on(\"click\", function(event, d) {\n    // Handle click (dispatch event, update app state, etc.)\n    console.log(\"Clicked:\", d);\n\n    // Visual feedback\n    d3.selectAll(\"circle\").attr(\"fill\", \"steelblue\");\n    d3.select(this).attr(\"fill\", \"orange\");\n\n    // Optional: dispatch custom event for your framework/app to listen to\n    // window.dispatchEvent(new CustomEvent('chartClick', { detail: d }));\n  });\n```\n\n## Transitions and animations\n\nAdd smooth transitions to visual changes:\n\n```javascript\n// Basic transition\ncircles\n  .transition()\n  .duration(750)\n  .attr(\"r\", 10);\n\n// Chained transitions\ncircles\n  .transition()\n  .duration(500)\n  .attr(\"fill\", \"orange\")\n  .transition()\n  .duration(500)\n  .attr(\"r\", 15);\n\n// Staggered transitions\ncircles\n  .transition()\n  .delay((d, i) => i * 50)\n  .duration(500)\n  .attr(\"cy\", d => yScale(d.value));\n\n// Custom easing\ncircles\n  .transition()\n  .duration(1000)\n  .ease(d3.easeBounceOut)\n  .attr(\"r\", 10);\n```\n\n## Scales reference\n\n### Quantitative scales\n\n```javascript\n// Linear scale\nconst xScale = d3.scaleLinear()\n  .domain([0, 100])\n  .range([0, 500]);\n\n// Log scale (for exponential data)\nconst logScale = d3.scaleLog()\n  .domain([1, 1000])\n  .range([0, 500]);\n\n// Power scale\nconst powScale = d3.scalePow()\n  .exponent(2)\n  .domain([0, 100])\n  .range([0, 500]);\n\n// Time scale\nconst timeScale = d3.scaleTime()\n  .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)])\n  .range([0, 500]);\n```\n\n### Ordinal scales\n\n```javascript\n// Band scale (for bar charts)\nconst bandScale = d3.scaleBand()\n  .domain(['A', 'B', 'C', 'D'])\n  .range([0, 400])\n  .padding(0.1);\n\n// Point scale (for line/scatter categories)\nconst pointScale = d3.scalePoint()\n  .domain(['A', 'B', 'C', 'D'])\n  .range([0, 400]);\n\n// Ordinal scale (for colours)\nconst colourScale = d3.scaleOrdinal(d3.schemeCategory10);\n```\n\n### Sequential scales\n\n```javascript\n// Sequential colour scale\nconst colourScale = d3.scaleSequential(d3.interpolateBlues)\n  .domain([0, 100]);\n\n// Diverging colour scale\nconst divScale = d3.scaleDiverging(d3.interpolateRdBu)\n  .domain([-10, 0, 10]);\n```\n\n## Best practices\n\n### Data preparation\n\nAlways validate and prepare data before visualisation:\n\n```javascript\n// Filter invalid values\nconst cleanData = data.filter(d => d.value != null && !isNaN(d.value));\n\n// Sort data if order matters\nconst sortedData = [...data].sort((a, b) => b.value - a.value);\n\n// Parse dates\nconst parsedData = data.map(d => ({\n  ...d,\n  date: d3.timeParse(\"%Y-%m-%d\")(d.date)\n}));\n```\n\n### Performance optimisation\n\nFor large datasets (>1000 elements):\n\n```javascript\n// Use canvas instead of SVG for many elements\n// Use quadtree for collision detection\n// Simplify paths with d3.line().curve(d3.curveStep)\n// Implement virtual scrolling for large lists\n// Use requestAnimationFrame for custom animations\n```\n\n### Accessibility\n\nMake visualisations accessible:\n\n```javascript\n// Add ARIA labels\nsvg.attr(\"role\", \"img\")\n   .attr(\"aria-label\", \"Bar chart showing quarterly revenue\");\n\n// Add title and description\nsvg.append(\"title\").text(\"Quarterly Revenue 2024\");\nsvg.append(\"desc\").text(\"Bar chart showing revenue growth across four quarters\");\n\n// Ensure sufficient colour contrast\n// Provide keyboard navigation for interactive elements\n// Include data table alternative\n```\n\n### Styling\n\nUse consistent, professional styling:\n\n```javascript\n// Define colour palettes upfront\nconst colours = {\n  primary: '#4A90E2',\n  secondary: '#7B68EE',\n  background: '#F5F7FA',\n  text: '#333333',\n  gridLines: '#E0E0E0'\n};\n\n// Apply consistent typography\nsvg.selectAll(\"text\")\n  .style(\"font-family\", \"Inter, sans-serif\")\n  .style(\"font-size\", \"12px\");\n\n// Use subtle grid lines\ng.selectAll(\".tick line\")\n  .attr(\"stroke\", colours.gridLines)\n  .attr(\"stroke-dasharray\", \"2,2\");\n```\n\n## Common issues and solutions\n\n**Issue**: Axes not appearing\n- Ensure scales have valid domains (check for NaN values)\n- Verify axis is appended to correct group\n- Check transform translations are correct\n\n**Issue**: Transitions not working\n- Call `.transition()` before attribute changes\n- Ensure elements have unique keys for proper data binding\n- Check that useEffect dependencies include all changing data\n\n**Issue**: Responsive sizing not working\n- Use ResizeObserver or window resize listener\n- Update dimensions in state to trigger re-render\n- Ensure SVG has width/height attributes or viewBox\n\n**Issue**: Performance problems\n- Limit number of DOM elements (consider canvas for >1000 items)\n- Debounce resize handlers\n- Use `.join()` instead of separate enter/update/exit selections\n- Avoid unnecessary re-renders by checking dependencies\n\n## Resources\n\n### references/\nContains detailed reference materials:\n- `d3-patterns.md` - Comprehensive collection of visualisation patterns and code examples\n- `scale-reference.md` - Complete guide to d3 scales with examples\n- `colour-schemes.md` - D3 colour schemes and palette recommendations\n\n### assets/\n\nContains boilerplate templates:\n\n- `chart-template.js` - Starter template for basic chart\n- `interactive-template.js` - Template with tooltips, zoom, and interactions\n- `sample-data.json` - Example datasets for testing\n\nThese templates work with vanilla JavaScript, React, Vue, Svelte, or any other JavaScript environment. Adapt them as needed for your specific framework.\n\nTo use these resources, read the relevant files when detailed guidance is needed for specific visualisation types or patterns.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["claude","d3js","skill","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-claude-d3js-skill","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/claude-d3js-skill","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34882 github stars · SKILL.md body (21,605 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T12:50:46.034Z","embedding":null,"createdAt":"2026-04-18T21:34:21.098Z","updatedAt":"2026-04-24T12:50:46.034Z","lastSeenAt":"2026-04-24T12:50:46.034Z","tsv":"'-10':1357,1391,2032 '-300':1569 '0':229,310,316,414,480,486,492,499,523,702,753,761,768,774,934,979,1201,1273,1283,1296,1442,1457,1483,1501,1677,1915,1918,1932,1942,1945,1956,1961,1964,1983,2001,2022,2033 '0.01':1276,1286 '0.05':1005 '0.1':756,1986 '0.3':953,1656 '0.31':1121 '0.35':1401 '0.5':1785 '0.67':1053 '0.7':890,1773 '1':153,429,1471,1592,1742,1929,1957,1962 '10':930,1197,1759,1764,1786,1861,1903,2034 '100':1218,1224,1564,1916,1943,2023 '1000':1898,1930,2089,2326 '10px':1718 '12px':1156,1370,1415,2216 '15':1876 '180':1128,1137 '1px':1713 '2':192,458,849,1038,1040,1118,1354,1398,1506,1520,1522,1546,1574,1576,1940,2231,2232 '20':259,441,719,1421,1507 '200':1424 '2020':1955 '2024':1960,2151 '25':331 '3':394,473 '30':261,326,443,721,957,1133,1220,1222 '333333':2196 '3d':146 '4':505,566 '40':263,445,723 '400':255,317,437,715,1984,2002 '4a90e2':2190 '4px':1723 '5':531,556,1448 '50':265,323,447,725,1885 '500':1867,1873,1887,1919,1933,1946,1965 '60':1433 '600':944,947,1214 '7':176 '750':1858 '7b68ee':2192 '8':1603 '800':252,434,712,1211 '90':1130 '999':1587 'a.value':2070 'absolut':1702 'access':187,2122,2125 'across':67,1175,2160 'ad':1682 'adapt':2412 'add':1109,1330,1371,1416,1729,1846,2127,2142 'altern':144,2176 'alway':2039 'anchor':1141,1361,1406 'anim':1845,2121 'app':1809 'appear':2240 'append':508,589,1695,2253 'appli':45,2199 'arc':1009,1079,1094,1498,1532 'aria':2128,2135 'aria-label':2134 'array':354,916,976,1183 'array.from':964,973,1242,1250 'ask':2472 'asset':2376 'attr':468,520,544,549,554,557,600,671,674,740,771,790,795,800,803,809,839,842,845,850,862,867,872,880,888,1034,1049,1060,1063,1069,1092,1095,1101,1119,1123,1138,1260,1309,1314,1319,1322,1325,1337,1348,1355,1358,1378,1389,1392,1399,1403,1429,1463,1466,1469,1472,1479,1516,1530,1533,1539,1542,1585,1588,1601,1604,1621,1626,1631,1636,1642,1646,1697,1740,1771,1819,1824,1859,1868,1874,1888,1901,2133,2224,2227 'attribut':2269,2312 'avail':139 'avoid':2338 'axe':182,268,509,2238 'axi':1333,1374,2251 'b':282,383,928,1979,1997,2068 'b.value':2069 'background':1708,2193 'background-color':1707 'band':1969 'bandscal':1975 'bar':692,1972,2137,2155 'basic':1853,2384 'behaviour':103 'best':2035 'bind':39,532,2279 'bodi':1694 'boilerpl':2378 'border':1712,1721 'border-radius':1720 'bottom':262,444,722,1221 'boundari':2480 'brush':102 'c':1980,1998 'calcul':293 'call':275,525,529,560,641,776,781,1484,1607,2266 'canva':2093,2324 'capabl':380 'case':205 'categori':1176,1991 'cdn':174 'center':1571 'chain':1862 'chang':278,563,1851,2270,2286 'charg':1566 'chart':136,234,419,637,693,816,818,939,1206,1487,1973,2138,2156,2385 'chart-contain':636 'chart-template.js':2380 'chartclick':1840 'check':2246,2257,2280,2344 'choos':193 'chord':113,891,894,999,1002,1042,1043,1057 'chords.groups':1087 'choreograph':123 'circl':539,543,857,861,1596,1600,1732,1798,1818,1855,1864,1879,1895 'circular':902 'clarif':2474 'class':238,1698 'claud':2 'claude-d3js-skill':1 'cleandata':2051 'cleanup':626,634,640 'clear':242,426,2447 'click':1795,1800,1805,1813 'code':273,398,2359 'collect':2354 'collis':2103 'color':1709 'colour':886,1161,1287,1417,1450,2006,2015,2025,2165,2184,2188,2371 'colour-schemes.md':2369 'colours.gridlines':2226 'colourscal':883,1025,1066,1073,1098,1105,1292,1328,1474,1509,1537,2008,2018 'colourscale.domain':1439 'column':1188,1194,1239,1249,1271,1345 'common':689,2233 'complet':2362 'complex':98,369 'compon':643 'comprehens':2353 'consid':143,2323 'consist':2179,2200 'console.log':1812 'const':231,250,253,256,306,416,432,435,438,448,453,464,476,488,510,514,581,585,593,633,661,665,704,710,713,716,726,731,736,745,757,820,936,942,945,948,954,962,971,982,986,1001,1008,1015,1024,1030,1041,1080,1203,1209,1212,1215,1225,1230,1240,1248,1256,1267,1277,1291,1419,1422,1425,1435,1443,1489,1497,1508,1512,1552,1577,1593,1691,1781,1911,1925,1936,1949,1974,1992,2007,2017,2027,2050,2063,2073,2187 'contain':574,582,638,654,2348,2377 'container.getboundingclientrect':596 'containerid':579,584,588 'content':244 'contrast':2166 'control':59,134 'coordin':504 'core':151 'correct':2255,2261 'creat':10,25,51,266,358,459,474,506,535,958,998,1265,1686 'criteria':2483 'curv':831,834,2109 'custom':52,87,118,1829,1893,2120 'customev':1839 'cx':545,863,1643 'cy':550,868,1647,1889 'd':313,320,337,342,483,495,546,551,750,764,792,797,805,824,828,851,864,869,874,882,968,981,1019,1022,1061,1065,1071,1093,1097,1103,1114,1125,1142,1148,1246,1254,1299,1311,1316,1327,1350,1352,1364,1365,1394,1396,1409,1410,1493,1531,1535,1561,1623,1628,1633,1638,1644,1648,1737,1803,1814,1842,1882,1890,1981,1999,2053,2076,2077,2082 'd.angle':1115,1127,1134,1143 'd.category':751,794,884 'd.column':1255,1313 'd.date':826,2083 'd.endangle':1117 'd.id':1562 'd.index':1100,1107 'd.label':1748 'd.row':1247,1318 'd.size':876 'd.source':969,985,1020,1624,1629 'd.source.index':1068,1075 'd.startangle':1116 'd.target':970,989,1023,1634,1639 'd.value':314,329,765,799,808,830,993,997,1300,1329,1494,1750,1892,2054,2057 'd.x':484,548,866,1645 'd.y':496,553,871,1649 'd3':158,168,170,190,207,272,290,377,2365,2370 'd3-patterns.md':2352 'd3.arc':1010,1499 'd3.axisbottom':512,777 'd3.axisleft':516,782 'd3.axisright':1445 'd3.chord':1003 'd3.curvemonotonex':832 'd3.curvestep':2110 'd3.descending':1007 'd3.drag':1608 'd3.easebounceout':1900 'd3.forcecenter':1572 'd3.forcelink':1558 'd3.forcemanybody':1567 'd3.forcesimulation':1554 'd3.interpolateblues':2020 'd3.interpolaterdbu':2030 'd3.interpolateylorrd':1294 'd3.js':16,17,31,32,83,85,156 'd3.line':822,2108 'd3.max':311,481,493,762,1297 'd3.pie':1491 'd3.rgb':1072,1104 'd3.ribbon':1017 'd3.scaleband':747,1269,1279,1976 'd3.scalediverging':2029 'd3.scalelinear':308,478,490,759,1437,1913 'd3.scalelog':1927 'd3.scaleordinal':1026,1510,2009 'd3.scalepoint':1994 'd3.scalepow':1938 'd3.scalesequential':1293,2019 'd3.scaletime':1951 'd3.schemecategory10':1027,1511,2010 'd3.select':233,418,587,669,681,706,938,1205,1693,1738,1769,1822 'd3.selectall':1817 'd3.timeparse':2079 'd3.zoom':1783 'd3js':3 'darker':1076,1108 'dasharray':2230 'data':13,28,34,40,47,225,227,277,292,305,312,335,364,410,412,482,494,533,540,541,562,580,609,660,680,697,700,763,786,787,838,858,859,913,914,932,961,1056,1086,1180,1181,1199,1298,1305,1306,1344,1385,1525,1527,1581,1597,1924,2037,2043,2059,2065,2174,2278,2287 'data-driven':33,46 'data.filter':2052 'data.flatmap':967 'data.foreach':980 'data.length':228,413,701,933,1200 'data.map':319,749,1245,1253,2075 'dataset':2088,2395 'date':1954,1959,2072,2078 'datum':837 'ddd':1715 'debounc':2328 'declar':283,392 'defin':430,2183 'delay':1881 'depend':2283,2345 'desc':2153 'describ':2451 'descript':2145 'detail':1841,2349,2429 'detect':2104 'diagram':111,114,892,895 'dimens':249,431,607,2300 'dimension':1169 'direct':108,199,350,653,1549 'dispatch':1806,1828 'distanc':1563 'div':1688,1696 'diverg':2024 'divscal':2028 'document':36 'document.getelementbyid':583,815 'dom':42,200,210,240,2321 'domain':309,479,491,748,760,1028,1270,1280,1295,1438,1914,1928,1941,1952,1977,1995,2021,2031,2245 'drag':1613,1614,1665 'dragend':1617,1672 'dragstart':1611,1651 'draw':270,405,1045,1077,1301,1449 'drawbarchart':696,813 'drawchart':224,279,608,679 'drawchorddiagram':912 'drawheatmap':1179 'drawvisu':409,564 'driven':35,48 'durat':1857,1866,1872,1886,1897 'dy':1120,1400 'e0e0e0':2198 'eas':1894,1899 'element':43,63,211,241,298,359,537,646,1731,2090,2099,2172,2272,2322 'em':1122,1402 'encod':92,879,887,1163 'end':1145,1407,1616 'ensur':2163,2241,2271,2308 'enter/update/exit':2336 'entiti':899 'environ':70,221,2411,2463 'environment-specif':2462 'etc':185,1811 'event':1652,1666,1673,1727,1736,1754,1789,1802,1807,1830 'event.active':1654,1675 'event.pagex':1763 'event.pagey':1758 'event.subject':1659,1662 'event.subject.fx':1658,1667,1678 'event.subject.fy':1661,1669,1680 'event.transform':1792 'event.x':1668 'event.y':1670 'everi':61 'exampl':924,1191,2360,2368,2394 'excel':37 'expert':2468 'explor':96 'expon':1939 'exponenti':1923 'f5f7fa':2194 'famili':2207 'feedback':1816 'file':2427 'fill':343,558,810,840,881,978,1051,1064,1096,1326,1473,1534,1605,1820,1825,1869 'fill-opac':1050 'filter':2047 'fine':131 'fine-grain':130 'flow':907 'follow':399 'font':1154,1368,1413,2206,2214 'font-famili':2205 'font-siz':1153,1367,1412,2213 'forc':107,1548,1556,1565,1570 'force-direct':106,1547 'format':915,1182 'four':2161 'framework':79,286,301,390,2419 'framework/app':1833 'full':379 'function':223,303,406,408,577,591,627,657,695,911,1178,1650,1664,1671,1735,1753,1768,1801 'g':465,467,519,528,737,739,770,780,1031,1033,1048,1083,1085,1089,1257,1259,1336,1377,1428,1478,1513,1515 'g.append':518,527,769,779,835,1047,1082 'g.attr':1790 'g.selectall':538,784,856,1303,1523,1579,1595,2221 'geograph':115 'get':1235 'getchartel':304,334 'gradient':1451 'grain':132 'graphic':128 'grid':1170,2219 'gridlin':2197 'group':461,1078,1081,2256 'group.append':1090,1111 'growth':2159 'guid':2363 'guidanc':8,23,2430 'handl':1804 'handler':2330 'heatmap':1157,1159 'height':254,330,436,455,595,601,602,612,667,675,676,684,714,733,804,946,952,1039,1213,1232,1323,1470,1505,1521,1575 'hidden':1705,1776 'hierarchi':112 'html':178,1747 'id':237,1560 'img':2132 'imper':215 'implement':567,2111 'import':157,166 'includ':71,2173,2284 'initi':615 'innerheight':454,498,524,732,767,775,806,1231,1284 'innerradius':949,956,1011,1012,1500 'innerwidth':449,487,727,754,1226,1274 'input':2477 'instead':150,2094,2333 'integr':195 'inter':2208 'interact':12,27,95,373,1683,1796,2171,2392 'interactive-template.js':2386 'invalid':2048 'invert':501 'isnan':2056 'issu':2234,2237,2262,2288,2315 'item':2327 'j':987,992,995 'javascript':69,73,165,220,222,302,407,576,656,694,819,855,910,1177,1488,1551,1685,1780,1797,1852,1908,1968,2013,2046,2091,2126,2182,2403,2410 'join':542,788,860,1058,1088,1307,1346,1387,1528,1583,1599,2332 'js':357 'key':340,2275 'keyboard':2168 'label':1110,1334,1375,2129,2136 'larg':2087,2115 'layout':94,109,295,903,1000 'left':264,446,724,1223,1762 'legend':1418,1426,1453 'legend.append':1461,1477 'legendaxi':1444,1485 'legendheight':1423,1441,1459 'legendscal':1436,1446 'legendscale.invert':1475 'legendwidth':1420,1468,1482 'length':974 'let':1455 'leverag':376 'librari':142 'limit':2318,2439 'line':817,821,852,1580,1584,2220,2223 'line/scatter':1990 'linear':1909 'link':1557,1559,1578,1582,1620 'list':2116 'listen':1835,2298 'load':616 'log':1920 'logscal':1926 'm':2081 'main':460 'make':570,2123 'mani':2098 'manipul':201,213 'manual':360 'map':336 'margin':257,439,463,717,1216 'margin.bottom':457,735,1234 'margin.left':451,471,729,743,1228,1263,1340,1381 'margin.right':452,730,1229 'margin.top':456,472,734,744,1233,1264,1341,1382,1434 'match':2448 'materi':2351 'math.min':950,1503 'math.pi':1129,1135,1144 'matrix':959,972,990,994,1044 'matter':2062 'middl':1362 'miss':2485 'modul':180 'monitor':655 'mousemov':1752 'mouseout':1767 'mouseov':1734 'mydata':280,565,639,814 'namespac':191 'nan':2248 'navig':2169 'need':2415,2432 'network':1550 'network/graph':104 'new':606,663,965,1243,1251,1838,1953,1958 'node':963,1029,1067,1074,1099,1106,1150,1555,1594,1598,1641 'nodes.indexof':984,988 'nodes.length':975,977 'none':841,1728 'note':500 'novel':135 'null':1146,1496,1679,1681,2055 'number':2319 'object':918,1185 'observ':662 'observer.disconnect':688 'observer.observe':685 'opac':889,1052,1741,1772 'optimis':2085 'option':877,885,1827 'orang':1826,1870 'order':2061 'ordin':1966,2003 'outerradius':955,1013,1014,1132,1502 'output':2457 'outsid':1689 'overview':19 'pad':755,1275,1285,1717,1985 'padangl':1004 'palett':2185,2374 'pan':99,1779 'pars':2071 'parseddata':2074 'pass':421 'path':836,1055,1059,1091,1524,1529,2106 'pattern':196,197,281,366,382,691,1174,2357,2438 'perform':2084,2316 'permiss':2478 'pie':1486,1490,1526 'plot':854 'point':1987 'pointer':1726 'pointer-ev':1725 'pointscal':1993 'posit':1701 'power':1934 'powscal':1937 'practic':2036 'precis':58 'prefer':391 'prepar':2038,2042 'previous':243,427 'primari':2189 'problem':2317 'profession':2180 'project':119 'proper':2277 'provid':7,22,2167 'public':54,126 'publication-qu':53,125 'px':1760,1765 'quadtre':2101 'qualiti':55,127 'quantit':1906 'quarter':2140,2149,2162 'r':555,873,1602,1860,1875,1902 'radius':1722 'rang':315,485,497,752,766,1272,1282,1440,1917,1931,1944,1963,1982,2000 're':2306,2341 're-rend':2305,2340 'react':74,333,2404 'read':2424 'recommend':202,2375 'rect':339,785,789,1304,1308,1462 'rectangl':1302 'redraw':603,677 'refer':1905,2347,2350 'relationship':897 'relev':2426 'remov':246,425,647,709,941,1208 'render':284,297,393,428,2307,2342 'repres':906 'requestanimationfram':2118 'requir':89,121,2476 'resiz':621,623,630,2297,2329 'resizeobserv':650,664,2294 'resourc':2346,2423 'respons':568,572,2289 'restart':1657 'return':230,318,353,363,415,625,628,687,703,935,1202 'revenu':2141,2150,2158 'review':2469 'ribbon':905,1016,1046,1062 'right':260,442,720,1219 'role':2131 'rotat':1126,1136 'row':1187,1192,1237,1241,1281,1386 'safeti':2479 'sample-data.json':2393 'san':2210 'sans-serif':2209 'scale':181,267,294,475,1266,1288,1904,1907,1910,1921,1935,1948,1967,1970,1988,2004,2012,2016,2026,2242,2366 'scale-reference.md':2361 'scaleext':1784 'scatter':853 'scheme':2372 'scope':2450 'script':164 'scroll':2113 'secondari':2191 'select':209,235,2337 'selectal':1054,1084,1342,1383 'selector/element':423 'separ':2335 'sequenti':2011,2014 'serif':2211 'set':154,247,966,1244,1252 'setupresponsivechart':578,635 'setupresponsivechartwithobserv':658 'shape':183 'show':896,1173,2139,2157 'simpler':385 'simplifi':2105 'simul':1553 'simulation.alphatarget':1655,1676 'simulation.on':1618 'size':569,575,878,1155,1369,1414,2215,2290 'sizescal':875 'skill':4,6,21,2442 'skill-claude-d3js-skill' 'smooth':122,833,1847 'solid':1714 'solut':2236 'sophist':11,26 'sort':1495,2058,2066 'sorteddata':2064 'sortsubgroup':1006 'sourc':920,925,1018 'source-sickn33' 'specif':2418,2434,2464 'stagger':1877 'standard':141,401 'start':1610 'starter':2381 'state':1810,2302 'steelblu':344,559,811,844,1606,1821 'stop':2470 'strength':1568 'stroke':843,847,1070,1102,1540,1544,1586,1590,2225,2229 'stroke-dasharray':2228 'stroke-width':846,1543,1589 'structur':395,402 'style':133,1152,1366,1411,1700,1703,1706,1711,1716,1719,1724,1744,1756,1761,2177,2181,2204,2212 'substitut':2460 'subtl':2218 'success':2482 'suffici':2164 'svelt':76,2406 'svg':232,417,503,586,590,610,705,937,1204,1690,2096,2309 'svg.append':466,738,1032,1258,1335,1376,1427,1514,2146,2152 'svg.attr':597,2130 'svg.call':1793 'svg.selectall':245,424,708,940,1207,2202 'svgelement':659,670,682,698,707 'svgelement.getboundingclientrect':668 'svgelement.parentelement':686 'tabl':2175 'target':921,927,1021 'task':2446 'techniqu':65 'templat':288,2379,2382,2387,2399 'test':2397,2466 'text':1112,1140,1147,1343,1347,1360,1363,1384,1388,1405,1408,2148,2154,2195,2203 'text-anchor':1139,1359,1404 'three.js':149 'tick':1447,1619,2222 'time':1947 'timescal':1950 'titl':2143,2147 'tooltip':1684,1687,1692,1699,1743,1755,2389 'tooltip.style':1774 'top':161,258,440,718,1217,1757 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':49,469,521,741,772,1035,1124,1261,1338,1379,1430,1480,1517,1791,2258 'transit':124,184,372,1843,1848,1854,1856,1863,1865,1871,1878,1880,1896,2263,2267 'translat':470,522,742,773,1036,1131,1262,1339,1380,1431,1481,1518,2259 'treat':2455 'tree':110 'trigger':2304 'two':1168 'two-dimension':1167 'type':137,2436 'typographi':2201 'uniqu':90,1236,2274 'unmount':644 'unnecessari':2339 'updat':613,618,1808,2299 'updatechart':592,617,624,631 'upfront':2186 'usag':632,812 'use':15,30,82,84,148,172,206,289,365,381,649,1160,1171,2092,2100,2117,2178,2217,2293,2331,2421,2440 'useeffect':2282 'v':348 'v-for':347 'valid':2040,2244,2465 'valu':923,929,1164,1190,1196,1290,1492,1749,2049,2249 'vanilla':72,356,2402 'verifi':2250 'version':175 'via':299 'viewbox':2314 'virtual':2112 'visibl':1704,1745,1746,1775 'visual':62,91,536,1815,1850 'visualis':14,18,29,56,88,105,116,120,147,271,370,386,397,571,604,678,690,2045,2124,2356,2435 'vue':75,346,2405 'white':1541,1710 'width':251,327,433,450,594,598,599,611,666,672,673,683,711,728,801,848,943,951,1037,1210,1227,1320,1432,1467,1504,1519,1545,1573,1591 'width/height':2311 'window':620,2296 'window.addeventlistener':622 'window.dispatchevent':1837 'window.removeeventlistener':629 'work':66,217,2265,2292,2400 'workflow':152 'x':177,322,791,823,1195,1310,1332,1349,1390,1625,1635,1660 'x-axi':1331 'x1':1622 'x2':1632 'xaxi':511,526 'xscale':307,328,477,513,547,746,778,793,825,865,1268,1312,1351,1912 'xscale.bandwidth':802,1321,1353 'y':324,796,827,1315,1356,1373,1393,1464,1630,1640,1663,2080 'y-axi':1372 'y1':1627 'y2':1637 'yaxi':515,530 'yscale':489,517,552,758,783,798,807,829,870,1278,1317,1395,1891 'yscale.bandwidth':1324,1397 'zoom':100,1777,1782,1788,1794,2390","prices":[{"id":"1a7e1aba-e445-423e-bd79-857baee8125d","listingId":"8fe1aa85-6795-4cc1-a6f6-76857082cc19","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:34:21.098Z"}],"sources":[{"listingId":"8fe1aa85-6795-4cc1-a6f6-76857082cc19","source":"github","sourceId":"sickn33/antigravity-awesome-skills/claude-d3js-skill","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/claude-d3js-skill","isPrimary":false,"firstSeenAt":"2026-04-18T21:34:21.098Z","lastSeenAt":"2026-04-24T12:50:46.034Z"}],"details":{"listingId":"8fe1aa85-6795-4cc1-a6f6-76857082cc19","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"claude-d3js-skill","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34882,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"fe7eb186d5a3c075ac129f1cec0c7e2ec368b363","skill_md_path":"skills/claude-d3js-skill/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/claude-d3js-skill"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"claude-d3js-skill","description":"This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/claude-d3js-skill"},"updatedAt":"2026-04-24T12:50:46.034Z"}}