D3.js Visualizations Skill
Build interactive, web-based data visualizations using D3.js (Data-Driven Documents).
When to Use
- Interactive charts and graphs
- Custom data visualizations
- Geographic maps
- Network diagrams
- Real-time dashboards
Core Capabilities
- Bar, line, scatter, area charts
- Force-directed graphs
- Geographic maps (choropleth, bubble maps)
- Hierarchical data (treemaps, sunburst)
- Custom SVG visualizations
- Data transitions and animations
- Interactive tooltips and zoom
Example: Bar Chart
import * as d3 from 'd3';
const data = [30, 86, 168, 281, 303, 365];
const svg = d3.select('svg');
const width = 800;
const height = 400;
const x = d3.scaleBand()
.domain(data.map((d, i) => i))
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
svg.selectAll('rect')
.data(data)
.join('rect')
.attr('x', (d, i) => x(i))
.attr('y', d => y(d))
.attr('width', x.bandwidth())
.attr('height', d => height - y(d))
.attr('fill', 'steelblue');
Best Practices
- Use responsive SVG viewBox
- Optimize for performance (large datasets)
- Add accessible labels
- Implement smooth transitions
- Handle edge cases
Resources
1---2name: d3js-visualizations3description: Create interactive data visualizations using D3.js for charts, graphs, maps, and custom visual analytics4---5
6# D3.js Visualizations Skill
7
8Build interactive, web-based data visualizations using D3.js (Data-Driven Documents).
9
10## When to Use
11- Interactive charts and graphs
12- Custom data visualizations
13- Geographic maps
14- Network diagrams
15- Real-time dashboards
16
17## Core Capabilities
18- Bar, line, scatter, area charts
19- Force-directed graphs
20- Geographic maps (choropleth, bubble maps)
21- Hierarchical data (treemaps, sunburst)
22- Custom SVG visualizations
23- Data transitions and animations
24- Interactive tooltips and zoom
25
26## Example: Bar Chart
27```javascript
28import * as d3 from 'd3';
29
30const data = [30, 86, 168, 281, 303, 365];
31
32const svg = d3.select('svg');
33const width = 800;
34const height = 400;
35
36const x = d3.scaleBand()
37 .domain(data.map((d, i) => i))
38 .range([0, width])
39 .padding(0.1);
40
41const y = d3.scaleLinear()
42 .domain([0, d3.max(data)])
43 .range([height, 0]);
44
45svg.selectAll('rect')
46 .data(data)
47 .join('rect')
48 .attr('x', (d, i) => x(i))
49 .attr('y', d => y(d))
50 .attr('width', x.bandwidth())
51 .attr('height', d => height - y(d))
52 .attr('fill', 'steelblue');
53```
54
55## Best Practices
56- Use responsive SVG viewBox
57- Optimize for performance (large datasets)
58- Add accessible labels
59- Implement smooth transitions
60- Handle edge cases
61
62## Resources
63- D3.js: https://d3js.org/
64- Observable: https://observablehq.com/@d3
majiayu000