Wind Rose Chart — Free HTML CSS JS Snippet

A wind rose is a specialized polar chart used in meteorology to show two things about wind at once: how often it blows from each compass direction, and how fast it typically blows from that direction. Sixteen spokes radiate from the center, one per compass point (N, NNE, NE, and so on), and each spoke's length encodes how frequently wind was observed from that direction — while the spoke itself is subdivided into colored segments representing how much of that frequency fell into each speed band, from calm to strong. This snippet renders one entirely from raw synthesized observation data with hand-written SVG, no charting library, and is structurally distinct from a plain Polar Area Chart because every wedge is itself a *stacked* bar in polar space rather than a single flat radius.

Why this differs from a polar area chart

A standard polar area chart maps one value to each spoke's length. A wind rose maps a whole *distribution* to each spoke — the direction's total frequency is split across speed bands and stacked outward from the center, so the chart simultaneously answers "how often does wind come from the northwest" and "when it does, how strong is it usually." wedgePath() draws each stacked segment as its own annular wedge, with rCursor tracked per-direction so each band's inner radius picks up exactly where the previous band's outer radius left off — the polar-coordinate equivalent of a stacked bar chart's running total.

Synthesizing directionally realistic sample data

genData() does not pick random values independently per direction; it simulates 720 individual hourly wind observations (30 days), each with a direction drawn from a wrapped Gaussian centered on a "prevailing" westerly direction and a speed that is systematically higher near that same prevailing direction and lower further from it. This produces a dataset with the kind of directional skew and speed correlation real wind-rose data actually has — a single dominant lobe with realistic spread — rather than sixteen independent random numbers that would never resemble genuine meteorological data.

Wedge geometry with an inner radius hole

Every segment is built as a proper polar annular wedge via wedgePath(cx, cy, rInner, rOuter, startDeg, endDeg), which draws an SVG arc path along the outer radius, a straight line down to the inner radius, and a second arc back along the inner radius to close the shape. A small fixed R_MIN inner radius keeps every spoke's innermost segment from starting at a single point at the center, matching how printed wind roses always leave a small open hub in the middle rather than converging every wedge to a point.

A small angular gap for spoke separation

Each wedge is inset by a small pad value in degrees on both edges before the arc is drawn, so adjacent direction wedges never touch — a small but important detail, since without it, sixteen abutting wedges of similar color read as one continuous ring rather than sixteen distinct directional slices.

Concentric frequency rings as the radial scale

Faint concentric circles behind the wedges, each labeled with the frequency value it represents, give the radial axis a readable scale — computed by dividing the maximum observed direction total into four even rings, exactly analogous to horizontal gridlines on a standard bar chart's value axis, just wrapped into a circle.