datavis

# Data Visualization Skill Create beautiful, mathematically elegant, emotionally resonant data visualizations. ## Philosophy: "Life is Beautiful" Every visualization should: 1. **Reveal truth** through data 2. **Evoke wonder** through design 3. **Respect the viewer** through accessibility 4. **Honor complexity** through elegant simplification ## Core Capabilities ### 1. Visual Encoding **Scale Selection**: | Scale | Use When | Example | |-------|----------|---------| | Linear | Evenly distributed data | Temperature | | Log | Multiple orders of magnitude | Population (100 to 1B) | | Sqrt | Encoding area (circles) | Bubble chart radius | | Time | Temporal data | Dates | **Perceptual Honesty** - Area scales with square of radius, so use sqrt: ```javascript // WRONG: Linear radius exaggerates large values const badScale = d3.scaleLinear().domain([0, max]).range([0, maxRadius]); // RIGHT: Sqrt maintains perceptual accuracy const goodScale = d3.scaleSqrt().domain([0, max]).range([0, maxRadius]); ``` ### 2. Color Design **Palette Types**: - **Categorical** - Distinct hues for nominal data (max 8) - **Sequential** - Single hue gradient for ordered data - **Diverging** - Two hues meeting at meaningful midpoint **Colorblind-Safe Palette** (8 colors): ```javascript const colorblindSafe = [ '#332288', '#117733', '#44AA99', '#88CCEE', '#DDCC77', '#CC6677', '#AA4499', '#882255' ]; ``` **Always use redundant encoding** - don't rely on color alone: ```javascript node.attr('fi...