visualizing-data

Chart selection follows a purpose-first framework: identify your data type (categorical, continuous, temporal, hierarchical, geographic) and analytical purpose (comparison, trend, distribution, relationship, composition, flow). Decision trees then map these to specific charts, such as bar charts for category comparison or line charts for trends over time.

Recharts is recommended for React business dashboards due to its declarative API and responsive defaults. Use D3.js for fully custom visualizations requiring maximum flexibility, and Plotly when you need scientific charts, 3D visualizations, or rich interactivity.

Add role="img" with a descriptive aria-label stating the key insight, provide a data table alternative for exact values, and use aria-live regions for dynamic updates. Also ensure keyboard navigation with Tab, Enter, and arrow keys, and meet WCAG contrast minimums of 3:1 for UI elements and 4.5:1 for text.

For 1K-10K points, downsample using the LTTB algorithm to around 500 points. For 10K-100K points, switch from SVG to Canvas rendering. For over 100K points, aggregate data server-side before sending it to the client.

Use the IBM colorblind-safe palette: #648FFF (blue), #785EF0 (purple), #DC267F (magenta), #FE6100 (orange), #FFB000 (yellow). Avoid red-green combinations, which affect roughly 8% of males, and supplement color with patterns, shapes, or direct labels.

Avoid pie charts when you have more than 5-6 categories, need precise value comparison, or want to compare multiple compositions. A sorted horizontal bar chart is a better alternative because comparing bar lengths is far more accurate than comparing angles.