Wind Rose Chart — Free HTML CSS JS Snippet

<div class="app">
  <div class="card">
    <div class="card-header">
      <h3>Wind Speed & Direction — 30-Day Sample</h3>
      <p class="sub">Each spoke is a compass direction. Segment length is frequency; segment color is speed band.</p>
    </div>
    <div class="chart-wrap">
      <svg id="rose" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"></svg>
    </div>
    <div class="legend" id="legend"></div>
  </div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f8fafc; font-family: system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.app { width: 100%; max-width: 520px; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; box-shadow: 0 12px 30px rgba(30,41,59,0.06); }
.card-header { margin-bottom: 6px; }
h3 { font-size: 16px; font-weight: 800; color: #1e293b; }
.sub { font-size: 12px; color: #94a3b8; margin-top: 3px; }
#rose { width: 100%; display: block; overflow: visible; }
.rose-ring { fill: none; stroke: #eef2f7; stroke-width: 1; }
.rose-ring-label { font-size: 9px; fill: #94a3b8; }
.rose-dir-label { font-size: 11px; font-weight: 700; fill: #64748b; text-anchor: middle; dominant-baseline: middle; }
.rose-spoke { stroke: #eef2f7; stroke-width: 1; }
.rose-seg { stroke: #fff; stroke-width: 1; cursor: pointer; transition: opacity 0.15s; }
.rose-seg:hover { opacity: 0.75; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #475569; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

const svg = document.getElementById('rose');
const legendEl = document.getElementById('legend');
const NS = 'http://www.w3.org/2000/svg';

const DIRECTIONS = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
const SPEED_BANDS = [
  { label: '0-5 kt',  color: '#c7d2fe' },
  { label: '5-10 kt', color: '#a5b4fc' },
  { label: '10-15 kt',color: '#818cf8' },
  { label: '15-20 kt',color: '#6366f1' },
  { label: '20+ kt',  color: '#4338ca' },
];

// Synthesize a plausible dataset: a prevailing westerly wind with realistic
// spread, so the rose shows a clear dominant lobe rather than uniform noise.
function genData() {
  const data = DIRECTIONS.map(() => SPEED_BANDS.map(() => 0));
  const prevailingIdx = 12; // W
  const totalObservations = 720; // 30 days * 24 hourly readings
  for (let i = 0; i < totalObservations; i++) {
    // Direction: wrapped-normal-ish around the prevailing direction
    let dirIdx = Math.round(prevailingIdx + gaussian() * 2.6);
    dirIdx = ((dirIdx % DIRECTIONS.length) + DIRECTIONS.length) % DIRECTIONS.length;
    // Speed: gamma-ish positive skew, higher near the prevailing direction
    const distFromPrevail = Math.min(Math.abs(dirIdx - prevailingIdx), DIRECTIONS.length - Math.abs(dirIdx - prevailingIdx));
    const speedBase = 12 - distFromPrevail * 0.9 + gaussian() * 5;
    const speed = Math.max(0.5, speedBase);
    const bandIdx = Math.min(SPEED_BANDS.length - 1, Math.floor(speed / 5));
    data[dirIdx][bandIdx]++;
  }
  return data;
}

function gaussian() {
  let u = 0, v = 0;
  while (u === 0) u = Math.random();
  while (v === 0) v = Math.random();
  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
}

function el(tag, attrs) {
  const e = document.createElementNS(NS, tag);
  Object.entries(attrs).forEach(([k, v]) => e.setAttribute(k, v));
  return e;
}

const CX = 240, CY = 240;
const R_MAX = 175, R_MIN = 26;

function polar(cx, cy, r, angleDeg) {
  const rad = (angleDeg - 90) * Math.PI / 180;
  return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
}

function wedgePath(cx, cy, rInner, rOuter, startDeg, endDeg) {
  const pad = 1.2; // small gap between adjacent spokes
  const a0 = startDeg + pad, a1 = endDeg - pad;
  const [x1, y1] = polar(cx, cy, rOuter, a0);
  const [x2, y2] = polar(cx, cy, rOuter, a1);
  const [x3, y3] = polar(cx, cy, rInner, a1);
  const [x4, y4] = polar(cx, cy, rInner, a0);
  const largeArc = (a1 - a0) > 180 ? 1 : 0;
  return `M ${x1},${y1} A ${rOuter},${rOuter} 0 ${largeArc} 1 ${x2},${y2} L ${x3},${y3} A ${rInner},${rInner} 0 ${largeArc} 0 ${x4},${y4} Z`;
}

function draw() {
  svg.innerHTML = '';
  const data = genData();
  const rowTotals = data.map(row => row.reduce((a, b) => a + b, 0));
  const maxTotal = Math.max(...rowTotals);
  const ringSteps = 4;

  // Concentric frequency rings
  for (let i = 1; i <= ringSteps; i++) {
    const r = R_MIN + ((R_MAX - R_MIN) / ringSteps) * i;
    svg.appendChild(el('circle', { class: 'rose-ring', cx: CX, cy: CY, r }));
    const val = Math.round((maxTotal / ringSteps) * i);
    const label = el('text', { class: 'rose-ring-label', x: CX + 4, y: CY - r - 2 });
    label.textContent = val;
    svg.appendChild(label);
  }

  const angleStep = 360 / DIRECTIONS.length;

  // Radial spokes + direction labels
  DIRECTIONS.forEach((dir, i) => {
    const angle = i * angleStep;
    const [x, y] = polar(CX, CY, R_MAX + 6, angle);
    svg.appendChild(el('line', { class: 'rose-spoke', x1: CX, y1: CY, x2: polar(CX, CY, R_MAX, angle)[0], y2: polar(CX, CY, R_MAX, angle)[1] }));
    const label = el('text', { class: 'rose-dir-label', x, y });
    label.textContent = dir;
    svg.appendChild(label);
  });

  // Stacked wedges per direction, one segment per speed band
  DIRECTIONS.forEach((dir, i) => {
    const startAngle = i * angleStep - angleStep / 2;
    const endAngle = i * angleStep + angleStep / 2;
    let rCursor = R_MIN;
    data[i].forEach((count, bandIdx) => {
      if (count === 0) return;
      const segLen = (count / maxTotal) * (R_MAX - R_MIN);
      const rOuter = rCursor + segLen;
      const path = el('path', {
        class: 'rose-seg',
        d: wedgePath(CX, CY, rCursor, rOuter, startAngle, endAngle),
        fill: SPEED_BANDS[bandIdx].color,
      });
      const title = el('title', {});
      title.textContent = `${dir}, ${SPEED_BANDS[bandIdx].label}: ${count} readings`;
      path.appendChild(title);
      svg.appendChild(path);
      rCursor = rOuter;
    });
  });

  legendEl.innerHTML = '';
  SPEED_BANDS.forEach(band => {
    const item = document.createElement('div');
    item.className = 'legend-item';
    item.innerHTML = `<span class="legend-swatch" style="background:${band.color}"></span>${band.label}`;
    legendEl.appendChild(item);
  });
}

draw();