Does this skill help with complex graph layouts?

Yes, it provides implementation patterns for established algorithms like Sugiyama for DAGs (via dagre) and Fruchterman-Reingold for networks (via d3-force).

What is the best chart for comparing values according to this skill?

Bar charts are recommended because they use position along a common scale, which is the most accurately perceived visual encoding according to the Cleveland & McGill hierarchy.

Which rendering technology does this skill recommend for large datasets?

It recommends SVG for fewer than 1,000 elements, Canvas for 1,000 to 10,000 elements, and WebGL for datasets exceeding 10,000 nodes to maintain performance.

How does this skill ensure visualizations are accessible?

It enforces colorblind-safe palettes (like viridis), requires secondary encodings like shapes or patterns, and provides guidance on ARIA labels and keyboard navigation.

Data Visualization Expert

Name: Data Visualization Expert
Author: jagreehal

byjagreehal

データサイエンスとML

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

概要

This skill provides Claude with a specialized framework for creating effective data visualizations that prioritize communication and perceptual accuracy. It guides the selection of the most effective chart types based on the Cleveland & McGill hierarchy, ensures accessibility through colorblind-safe palettes and ARIA support, and optimizes rendering performance across SVG, Canvas, and WebGL. By leveraging established libraries like D3.js, dagre, and ELK.js, it helps developers avoid common anti-patterns and ensures that visual data representations are both performant and meaningful.

主な機能

Perceptually-driven encoding hierarchy for maximum chart accuracy
Accessibility-first design with colorblind safety and keyboard navigation
0 GitHub stars
Performance-optimized rendering selection from SVG to WebGL
Integration of proven layout algorithms for graphs, trees, and networks
Automated chart selection based on data volume and question type

ユースケース

Building interactive, accessible dashboards for complex datasets
Implementing automated graph layouts for workflow and relationship mapping
Optimizing frontend chart performance for high-volume data streams

概要

主な機能

Perceptually-driven encoding hierarchy for maximum chart accuracy
Accessibility-first design with colorblind safety and keyboard navigation
0 GitHub stars
Performance-optimized rendering selection from SVG to WebGL
Integration of proven layout algorithms for graphs, trees, and networks
Automated chart selection based on data volume and question type

ユースケース

Building interactive, accessible dashboards for complex datasets
Implementing automated graph layouts for workflow and relationship mapping
Optimizing frontend chart performance for high-volume data streams