d3-viz

Malicious tool definition detected

Tool: SKILL.md [1/3] Description: --- name: d3-viz description: Creating interactive data visualisations using d3.js.

Tool: SKILL.md [2/3] Description: value: 10 }, ...] if (!data || data.length === 0) return; const svg = d3.select('#chart'); svg.selectAll("*").remove(); const width = 600; const height = 600; const innerRadius = Math.min(width, height) * 0.3; const outerRadius = innerRadius + 30; // Create matrix from data const nodes = Array.from(new Set(data.flatMap(d => [d.source, d.target]))); const matrix = Array.from({ length: nodes.length }, () => Array(nodes.length).fill(0)); data.forEach(d => { const i

Tool: SKILL.md [3/3] Description: = d3.scaleSequential(d3.interpolateBlues) .domain([0, 100]); // Diverging colour scale const divScale = d3.scaleDiverging(d3.interpolateRdBu) .domain([-10, 0, 10]); ``` ## Best practices ### Data preparation Always validate and prepare data before visualisation: ```javascript // Filter invalid values const cleanData = data.filter(d => d.value != null && !isNaN(d.value)); // Sort data if order matters const sortedData = [...data].sort((a, b) => b.value - a.value)

Malicious tool definition detected

Tool: assets/chart-template.jsx Description: import { useEffect, useRef, useState } from 'react'; import * as d3 from 'd3'; function BasicChart({ data }) { const svgRef = useRef(); useEffect(() => { if (!data || data.length === 0) return; // Select SVG element const svg = d3.select(svgRef.current); svg.selectAll("*").remove(); // Clear previous content // Define dimensions and margins const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 50 }; const innerW

Malicious tool definition detected

Tool: assets/interactive-template.jsx Description: import { useEffect, useRef, useState } from 'react'; import * as d3 from 'd3'; function InteractiveChart({ data }) { const svgRef = useRef(); const tooltipRef = useRef(); const [selectedPoint, setSelectedPoint] = useState(null); useEffect(() => { if (!data || data.length === 0) return; const svg = d3.select(svgRef.current); svg.selectAll("*").remove(); // Dimensions const width = 800; const height = 500; const margin = { top: 20, right: 30, bott

Malicious tool definition detected

Tool: assets/sample-data.json Description: { "timeSeries": [ { "date": "2024-01-01", "value": 120, "category": "A" }, { "date": "2024-02-01", "value": 135, "category": "A" }, { "date": "2024-03-01", "value": 128, "category": "A" }, { "date": "2024-04-01", "value": 145, "category": "A" }, { "date": "2024-05-01", "value": 152, "category": "A" }, { "date": "2024-06-01", "value": 168, "category": "A" }, { "date": "2024-07-01", "value": 175, "category": "A" }, { "date": "2024-08-01", "value": 182, "c

Malicious tool definition detected

Tool: references/colour-schemes.md [1/2] Description: # D3.js Colour Schemes and Palette Recommendations Comprehensive guide to colour selection in data visualisation with d3.js.

Tool: references/colour-schemes.md [2/2] Description: highContrast = { background: '#ffffff', text: '#2c3e50', primary: '#3498db', secondary: '#e74c3c' }; ``` **WCAG guidelines:** - Normal text: 4.5:1 minimum - Large text: 3:1 minimum - UI components: 3:1 minimum ### Redundant encoding Never rely solely on colour to convey information: ```javascript // Add patterns or shapes const symbols = ['circle', 'square', 'triangle', 'diamond']; // Add text labels // Use line styles (solid, dashed, dotted)

Malicious tool definition detected

Tool: references/d3-patterns.md [1/3] Description: # D3.js Visualisation Patterns This reference provides detailed code patterns for common d3.js visualisation types.

Tool: references/d3-patterns.md [2/3] Description: // Define gradient const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "areaGradient") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "100%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "steelblue") .attr("stop-opacity", 0.8); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "steelblue") .attr("stop-opacity", 0.1); const g = svg.append("g") .attr

Tool: references/d3-patterns.md [3/3]

Malicious tool definition detected

Tool: references/scale-reference.md [1/2] Description: # D3.js Scale Reference Comprehensive guide to all d3 scale types with examples and use cases.

Tool: references/scale-reference.md [2/2] Description: // Returns second colour colourScale('apples'); // Returns same first colour (consistent) // Custom range const customScale = d3.scaleOrdinal() .domain(['cat1', 'cat2', 'cat3']) .range(['#FF6B6B', '#4ECDC4', '#45B7D1']); ``` **Built-in colour schemes:** **Categorical:** - `d3.schemeCategory10` - 10 colours - `d3.schemeAccent` - 8 colours - `d3.schemeDark2` - 8 colours - `d3.schemePaired` - 12 colours - `d3.schemePastel1` - 9 colours - `d3.sc