FRED Macro — Grayscale Analytical Dashboard

A monochrome, publication-quality interactive dashboard built with React, D3, and the VizHub Grayscale Data Visualization Style Guide.

Charts

1. Horizontal bar chart — five macro gauges with progressively differentiated grayscale fills, sorted by value, direct labels, axes starting at zero.
2. Two-series line chart — Fed funds rate (solid ink) versus unemployment (dashed medium gray) with direct end-of-line labels.
3. Breakeven inflation band chart — raw monthly values, 12-month rolling mean, ±1σ band, and rolling min/max envelope, plus a dashed 2% target rule.
4. Scatterplot — unemployment versus breakeven inflation with subtle opacity for density and a highlighted (outlined) most-recent observation.

Design tokens

All colors, spacing, and typography are defined as CSS custom properties in styles.css and reused across every chart. No chromatic colors are used.

Data

Loaded at runtime from /data/fred_macro.csv with d3.csv, which handles the multi-line quoted header correctly. Columns referenced: date, sp500, fed_funds_rate, cpi, unemployment_rate, real_gdp, treasury_10y, breakeven_inflation.

Accessibility

Every chart exposes an aria-label, a <title>, role="img", keyboard focus, and direct labels/line styles so meaning is never carried by gray value alone. Tooltips use high-contrast dark text on white.

Responsive behavior

Charts are measured with ResizeObserver and re-rendered to their container. Page padding reduces to 16px below 640px.