/dataviz

Build data visualizations that are technically correct, visually honest, and worth looking at. Combines Bostock (D3 patterns), Tufte (graphical integrity), Few (information design), and frontend craft into one workflow.

No arguments? Describe this skill and stop. Do not execute.

Before You Write Code

Answer these questions. They determine everything.

1. What decision does this visualization support?

If you can't name the decision, you don't need a visualization — you need a table. Every chart exists to help someone decide or understand something specific.

2. What type of data relationship?

Pick the simplest display that answers the question. If a table works, use a table.

3. Who is looking at this?

Building the Visualization

Step 1: Data Structure First

Define the data shape before touching SVG. The data drives everything.

// Define your data contract
const data = [
  { id: "q1", date: new Date("2024-01"), value: 42, category: "A" }
];

// Derive domains from data, never hardcode
const x = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);

• •Domains from data (d3.extent, d3.max), not magic numbers
• •Key field present for identity (.data(data, d => d.id))
• •Correct scale type for data type (time, linear, band, ordinal, sqrt)
• •scaleSqrt() for area encodings — never scaleLinear() on radius

Step 2: Margin Convention

Every chart starts here:

const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = containerWidth - margin.left - margin.right;
const height = containerHeight - margin.top - margin.bottom;

const svg = d3.select(el).append("svg")
    .attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

• •viewBox for responsive sizing, not fixed width/height attributes
• •Scales use inner width/height
• •No positioning math elsewhere — margins handle it once

Step 3: Data Joins

Binddata to elements. Handle all three states.

svg.selectAll("rect")
  .data(data, d => d.id)       // Key function — always
  .join(
    enter => enter.append("rect")
      .attr("x", d => x(d.date))
      .attr("height", 0)
      .call(enter => enter.transition()
        .attr("height", d => height - y(d.value))),
    update => update
      .call(update => update.transition()
        .attr("x", d => x(d.date))
        .attr("height", d => height - y(d.value))),
    exit => exit
      .call(exit => exit.transition()
        .attr("height", 0)
        .remove())
  );

• •Key function on every .data() call when data changes
• •Enter/update/exit handled explicitly — no selectAll("*").remove() redraws
• •Transitions show what changed, not decoration

Step 4: Graphical Integrity (Tufte)

Lie Factor must be 0.95–1.05. Check these:

Data-ink ratio > 70%. Remove:

Direct labeling over legends. Put the label at the data point:

// Label on the line, not in a box somewhere
const lastPoint = data[data.length - 1];
svg.append("text")
  .attr("x", x(lastPoint.date) + 4)
  .attr("y", y(lastPoint.value))
  .attr("dy", "0.35em")
  .text(lastPoint.category);

Step 5: Color Discipline (Few)

Default: grayscale. Color is a scarce resource.

// Base palette: grays
const base = "#333";      // text, primary data
const muted = "#999";     // secondary, axes
const light = "#e5e5e5";  // gridlines, borders

// Color ONLY for meaning
const alert = "#d32f2f";  // bad / below target
const success = "#388e3c"; // good / above target
const highlight = "#1565c0"; // selected / focus

• •When everything is colorful, nothing stands out
• •Always pair color with a value — never traffic lights alone
• •Colorblind safe: add shape or text, don't rely on red/green distinction
• •If you need categorical colors, use 5 or fewer with maximum perceptual distance

Step 6: Typography and Craft

Charts are read, not just seen. Typography matters.

• •Axis labels: Short, no abbreviations the audience wouldn't know. Units in the axis title, not on every tick.
• •Title: States the insight, not the data. "Revenue grew 23% in Q4" not "Revenue by Quarter"
• •Numbers: Format for the audience. d3.format("$.2s") for executives (→ $1.2M), d3.format("$,.0f") for analysts (→ $1,234,568).
• •Font: Use the application's typeface. Don't introduce a new one for charts.

// Tick formatting
xAxis.tickFormat(d3.timeFormat("%b")); // "Jan", "Feb"
yAxis.tickFormat(d3.format("$.2s"));   // "$1.2M"
yAxis.ticks(5);                        // Don't crowd

Step 7: Responsive and Accessible

• •viewBox on SVG, no fixed dimensions
• •ARIA: role="img" + aria-label on SVG container
• •<title> and <desc> elements inside SVG
• •Text alternatives for data conveyed only visually
• •Keyboard focus indicators on interactive elements
• •prefers-reduced-motion check before transitions
• •prefers-color-scheme for dark mode support

const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

const t = svg.transition()
  .duration(prefersReducedMotion ? 0 : 750);

Step 8: Reusable Chart Pattern

If this chart will be used more than once, extract it:

function bulletChart() {
  let width = 300;
  let height = 30;
  let ranges = [0.5, 0.75, 1.0];

  function chart(selection) {
    selection.each(function(d) {
      // Build chart using width, height, ranges, d
    });
  }

  chart.width = function(v) {
    return arguments.length ? (width = v, chart) : width;
  };

  chart.height = function(v) {
    return arguments.length ? (height = v, chart) : height;
  };

  chart.ranges = function(v) {
    return arguments.length ? (ranges = v, chart) : ranges;
  };

  return chart;
}

// Usage
d3.selectAll(".bullet").datum(d => d).call(bulletChart().width(400));

Closure pattern, not classes. Getter-setter methods. Callable via selection.call().

Dashboard Layout (Few)

If building a dashboard, not a single chart:

• •Single screen. If it scrolls, it's a report. Prioritize ruthlessly.
• •Top-left = most important. Scan order: top-left → top-right → bottom-left → bottom-right.
• •Group related metrics. Proximity implies relationship.
• •Bullet graphs replace gauges. Always. 10x more data density.
• •Sparklines for trends. Inline, no axes, just the shape.
• •Context on every number. vs target, vs prior period, or qualitative range. A number alone is meaningless.

Anti-Patterns

Checklist Before Shipping

Integrity

• • Lie Factor 0.95–1.05 (bars at zero, sqrt for area, consistent scales)
• • No dual Y-axes
• • No 3D, no pie charts

Clarity

• • Title states the insight, not the data type
• • Direct labels, not legends (where feasible)
• • Numbers formatted for the audience
• • Color used for meaning, not decoration

Craft

• • Margin convention applied
• • viewBox for responsive sizing
• • ARIA labels and text alternatives
• • prefers-reduced-motion respected
• • Data joins with key functions (no full redraws)

Dashboard (if applicable)

• • Single screen, no scroll
• • Most important metric top-left
• • Context on every number (vs target, vs prior)
• • Bullet graphs, not gauges