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

•

Data Science & 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.

Key Features

01Expert chart selection based on data volume and relationship types

02Comprehensive library mapping for D3.js, ECharts, Recharts, and WebGL frameworks

03Guidance on layout algorithms including Sugiyama, Fruchterman-Reingold, and Treemaps

0494 GitHub stars

05Strict adherence to accessibility standards and colorblind-safe palettes

06Performance optimization strategies for rendering up to 10,000+ data points

Use Cases

01Building complex interactive dashboards with coordinated views and brushing

02Implementing large-scale network visualizations and dependency graphs

03Designing hierarchical data representations like treemaps, sunbursts, and circle packing

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ntcoding/claude-skillz data-visualization

For use in Claude.ai and ChatGPT

Download Skill