grammar-of-graphics-and-declarative-visualization

Use Observable Plot for concise exploratory charts in JavaScript, Vega-Lite for portable declarative specs with transforms and faceting, and D3 only when the chart needs bespoke layout or rendering control that a grammar cannot express cleanly.

Normalize the table shape, then name the mark, encodings, transforms, faceting, and interaction model explicitly. Keep the spec readable and portable so it can be embedded, validated, or translated across stacks.

Switch when the spec becomes harder to read than custom code, or when you need GPU-scale marks, particles, custom shaders, true 3D, or high-volume geospatial layers. Declarative grammars fit while the chart stays expressible as data plus marks plus encodings.

Vega-Lite supports responsive specs, but you must plan label and tick reduction, hover replacement for touch, and touch target sizing. Check whether the grammar keeps the main visualization visible around controls in portrait and landscape.

Declarative grammars struggle with bespoke layout, extreme density, GPU-scale rendering, and interactions the grammar cannot express. Forcing such charts into a spec produces opaque, brittle output that is harder to maintain than custom rendering code.