How does this skill help with data visualization accessibility?

It enforces WCAG contrast standards (4.5:1) and ensures data is never conveyed via color alone, utilizing shapes, patterns, or direct labels for users with color vision deficiency.

Which library should I use for complex network graphs?

The skill recommends dagre for layered DAGs, d3-force for organic network exploration, and Sigma.js or deck.gl for large-scale graphs exceeding 10,000 nodes.

When should I use SVG versus Canvas for web charts?

Use SVG for fewer than 1,000 elements for better accessibility and CSS styling; switch to Canvas for 1,000 to 10,000 elements to improve rendering performance through batching.

What is the primary rule for visual encoding accuracy?

Based on the Cleveland & McGill hierarchy, position along a common scale (like a bar chart) is the most accurate encoding, followed by length, angle, and finally area or color.

Advanced Data Visualization

Name: Advanced Data Visualization
Author: NTCoding

byNTCoding

•

データサイエンスとML

Implements high-performance, accessible, and perceptually accurate data visualizations using industry-standard libraries and algorithms.

概要

This Claude Code skill provides a comprehensive framework for building professional-grade data visualizations, moving beyond basic charting to include perceptual psychology, complex layout algorithms, and performance optimization. It guides developers through critical decisions such as choosing the right visual encoding (position over color), selecting appropriate rendering technologies like SVG or WebGL based on data volume, and implementing established algorithms for graph layouts and hierarchical data. Whether you are building interactive dashboards or complex network graphs, this skill ensures your visualizations are both communicative and technically sound.

主な機能

Expert chart selection based on data volume and relationship types
Comprehensive library mapping for D3.js, ECharts, Recharts, and WebGL frameworks
Guidance on layout algorithms including Sugiyama, Fruchterman-Reingold, and Treemaps
94 GitHub stars
Strict adherence to accessibility standards and colorblind-safe palettes
Performance optimization strategies for rendering up to 10,000+ data points

ユースケース

Building complex interactive dashboards with coordinated views and brushing
Implementing large-scale network visualizations and dependency graphs
Designing hierarchical data representations like treemaps, sunbursts, and circle packing

概要

主な機能

Expert chart selection based on data volume and relationship types
Comprehensive library mapping for D3.js, ECharts, Recharts, and WebGL frameworks
Guidance on layout algorithms including Sugiyama, Fruchterman-Reingold, and Treemaps
94 GitHub stars
Strict adherence to accessibility standards and colorblind-safe palettes
Performance optimization strategies for rendering up to 10,000+ data points

ユースケース

Building complex interactive dashboards with coordinated views and brushing
Implementing large-scale network visualizations and dependency graphs
Designing hierarchical data representations like treemaps, sunbursts, and circle packing