SVG

SVG Path Functions

SVG paths are written as a single d attribute — a mini-language of commands and coordinates that describes shapes. Each command is a letter; uppercase means absolute coordinates, lowercase means relative to the current position. This is a reference for all path commands with examples, followed by a worked pie chart that puts the arc command through its paces.

The full MDN reference lives at developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths.

Move and Line Commands

M — Move To

M x y

Lifts the pen and moves to (x, y) without drawing. Every path starts with an M. On its own it’s invisible — it’s a positioning command.

Chart Cheat Sheet

A reference for chart types, anatomy, and terminology — particularly useful when working with D3 or communicating design intent to engineers and stakeholders.

Terminology

Graph — a diagram representing a mathematical function or relationship between variables, typically drawn as a continuous line. The term comes from graph theory; in common usage it is often conflated with "chart" but strictly refers to a plotted function.

Chart — a graphical representation of data using shapes, symbols, or spatial encoding (bars, slices, bubbles). Charts communicate patterns in discrete or categorical data rather than continuous functions.