beautiful-data-viz

Beautiful Data Viz

The pack's shared rules for any data visual, whatever the library or medium. Show the data, remove decoration, label directly, and add only the context the reader needs. Other skills that draw figures (/plotly-dashboard-skill, /notebooks, the bio-* reporting skills) follow these rules and add only what their medium needs.

Instructions

1. Greyscale first. Draw every mark in neutral greys by default. Add color only when it encodes information:

   • a category the reader must tell apart,
   • the one highlighted finding (one accent color; everything else stays grey),
   • an ordered or signed quantity (sequential or diverging scale).

   Use colorblind-safe colors, never make color the only encoding (add position, shape, line style, or a direct label), and keep the figure readable in greyscale print. When color is warranted, pick it from references/palettes.md.

2. Clarify the message, comparison context, audience, and medium (notebook, paper, slides, web). One or two values read better as a sentence; a short lookup list reads better as a table.

3. Choose the simplest chart that answers the question: horizontal bars or dot plots for ranked categories, small multiples instead of more than four overlaid series or a dual axis, slopegraphs for before/after, sparklines for compact trends.

4. Remove chart junk: no 3D, no pie charts unless asked for, no decorative borders, no heavy grids, no gradient fills, no dual y-axes.

5. Label series directly. Keep a legend only when direct labels would collide with the data or each other.

6. Manuscript figures carry no in-plot title or subtitle; axis labels, direct labels, panel letters, and the caption do that work. The caption sits below the figure: in a notebook the figure cell comes first and the caption cell follows it.

7. Apply the style for the medium:

   • matplotlib or seaborn: set_beautiful_style(...) from assets/beautiful_style.py. It sets a grey series cycle with distinct line styles and returns a config whose accent is a colorblind-safe highlight color for the current background.
   • R / ggplot2: theme_classic() or theme_minimal(), scale_colour_grey() for neutral series, and scale_colour_manual() to give only the finding the accent.
   • Plotly or Dash: a registered template with a grey colorway and the accent added per trace; see /plotly-dashboard-skill references/style.md.
   • HTML / SVG: define neutral greys and one accent as CSS custom properties and redefine them for dark mode.

8. Check the result at the target size: run the references/checklist.md pass, and view a greyscale copy to confirm every encoding survives (Image.open(path).convert("L") with Pillow).

9. Reproduce figures from a pinned environment: the project's pixi.toml (this skill ships one in pixi.toml), or a PEP 723 script run with uv run --script, as in scripts/export_fixture.py.