Data6 min read

Data Visualization

Turn data into clear, truthful visual stories - choosing the right chart type, applying design principles, and building interactive charts with Recharts or D3.js.

Data VisualizationD3.jsRechartsTableauChart Design

skill: Data Visualization category: Data tags: [Data Visualization, D3.js, Recharts, Tableau, Chart Design] readingTime: 6

A chart should communicate one insight clearly. The most common data viz mistake is choosing a chart that looks impressive but obscures the insight. Choose the simplest chart that answers the question. Remove every element that doesn't contribute to understanding - chart junk degrades cognition.

Workflow

Choose the right chart typeThe wrong chart type obscures the insight it was meant to reveal - a pie chart for time-series data makes trends invisible.
Apply Gestalt visual encoding principlesHuman perception interprets visual elements by proximity, similarity, and continuity. Designing with these principles makes charts faster to read.
Build interactive charts with RechartsRecharts provides React-native chart components that compose like React elements - easy to integrate, responsive, and accessible.
Build custom charts with D3.jsD3 gives complete control over every visual element - required for custom chart types, complex interactions, or animated transitions that Recharts can't express.
Avoid misleading visualizationsTruncated y-axes, cherry-picked date ranges, and dual-axis charts can make data lie visually - even unintentionally.

Output Format

Data viz: correct chart type, minimal design, direct labels, accessible colors, and no misleading encodings.

Chart checklist:
☐ Right chart type for the insight
☐ Y-axis starts at 0 for bars
☐ Direct labels (no legend if avoidable)
☐ Color: < 5 categorical; colorblind-safe palette
☐ Alt text for accessibility
☐ Responsive (ResponsiveContainer)
☐ Tooltips with formatted values

Examples

Input

Output

Edge Cases & Gotchas

Logarithmic scale disclosure - Log scale compresses large ranges but makes linear growth look exponential. Always label the axis clearly as 'Log scale' and explain why you chose it.
Color accessibility in charts - Red-green combinations are invisible to 8% of males. Use colorblind-safe palettes (Viridis, Cividis, ColorBrewer) and add shape/pattern encoding alongside color.
Mobile chart legibility - Desktop charts with 12px axis labels become unreadable on mobile. Use ResponsiveContainer and hide non-essential axes on small screens.
Loading states for async data - Charts that flash empty → error → data create jarring UX. Show a skeleton chart while loading; only show error state for terminal failures.

When to Break These Rules

Use Tableau, Metabase, or Looker for business intelligence dashboards consumed by non-developers - these tools enable self-service analytics without code.
Use Observable Plot or Vega-Lite for statistical/scientific visualization where grammar-of-graphics syntax is clearer than React component trees.

Reference Files

https://recharts.org/en-US/
https://d3js.org/getting-started