3f:null 40:["$","title",null,{"children":"Wind rose plot and legend | akbstone | Observable"}] 46:Te95,function windRose(data, { width = 520, height = 520, innerRadius = 0, speedField = "wind_speed", directionField = "wind_from_direction", valueField = "pct", colorScheme, title, subtitle } = {}) { const directions = Array.from(new Set(data.map(d => d[directionField]))).sort((a, b) => a - b); const speeds = Array.from(new Set(data.map(d => d[speedField]))).sort((a, b) => a - b); const sectorAngle = (2 * Math.PI) / directions.length; const byDirection = d3.group(data, d => d[directionField]); const stacked = directions.map(dir => { const rows = speeds.map(s => byDirection.get(dir)?.find(d => d[speedField] === s)); let cumulative = 0; return rows.map((d, i) => { const v = d ? d[valueField] : 0; const y0 = cumulative; const y1 = cumulative + v; cumulative = y1; return {direction: dir, speed: speeds[i], y0, y1, value: v}; }); }); const maxRadius = d3.max(stacked, arr => arr.at(-1).y1); const margin = 50; const outerR = Math.min(width, height) / 2 - margin; const radiusScale = d3.scaleLinear().domain([0, maxRadius]).range([innerRadius, outerR]).nice(); const color = d3.scaleSequential(colorScheme).domain([0, speeds.length - 1]); function angleFor(dir) { return (dir * Math.PI) / 180; } const arc = d3.arc() .innerRadius(d => radiusScale(d.y0)) .outerRadius(d => radiusScale(d.y1)) .startAngle(d => angleFor(d.direction) - sectorAngle / 2) .endAngle(d => angleFor(d.direction) + sectorAngle / 2) .padAngle(0.01) .padRadius(innerRadius); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); if (title) { svg.append("text").attr("x", -width / 2 + 10).attr("y", -height / 2 + 20) .attr("font-size", 14).attr("font-weight", 600).text(title); } if (subtitle) { svg.append("text").attr("x", -width / 2 + 10).attr("y", -height / 2 + 36) .attr("font-size", 11).attr("fill", "currentColor").attr("opacity", 0.7).text(subtitle); } const gridTicks = radiusScale.ticks(4).filter(t => t > 0); const gridGroup = svg.append("g").attr("stroke", "currentColor").attr("stroke-opacity", 0.15).attr("fill", "none"); gridTicks.forEach(t => gridGroup.append("circle").attr("r", radiusScale(t))); svg.append("g").selectAll("text").data(gridTicks).join("text") .attr("y", d => -radiusScale(d)).attr("dy", "-0.3em").attr("text-anchor", "middle") .attr("fill", "currentColor").attr("opacity", 0.6).text(d => `${d}%`); const dirNames = {0: "N", 45: "NE", 90: "E", 135: "SE", 180: "S", 225: "SW", 270: "W", 315: "NW"}; svg.append("g").selectAll("line").data(directions).join("line") .attr("stroke", "currentColor").attr("stroke-opacity", 0.1) .attr("x1", 0).attr("y1", 0) .attr("x2", d => Math.sin(angleFor(d)) * outerR) .attr("y2", d => -Math.cos(angleFor(d)) * outerR); svg.append("g").selectAll("text").data(directions).join("text") .attr("x", d => Math.sin(angleFor(d)) * (outerR + 14)) .attr("y", d => -Math.cos(angleFor(d)) * (outerR + 14)) .attr("text-anchor", "middle").attr("dominant-baseline", "middle") .attr("font-size", 11).text(d => dirNames[d] ?? `${d}°`); svg.append("g").selectAll("path") .data(stacked.flat().filter(d => d.value > 0)) .join("path") .attr("d", arc) .attr("fill", d => color(speeds.indexOf(d.speed))) .attr("stroke", "#FFF") .attr("stroke-width",".6") .append("title") .text(d => `direction ${d.direction}°, speed ${d.speed}\n${d.value.toFixed(2)}%`); return {node: svg.node(), speeds, color}; }47:[] 44:{"id":"5f8ce5162eaae7e7","slug":"wind-rose","title":"Wind rose plot and legend","thumbnail":"272e52b2738b5282ee39b1be927210303457ef2646d56f55c20f2d30ef14c739","access_level":"public","create_time":"$D2026-09-15T20:47:14.711Z","update_time":"$D2026-09-15T20:51:14.340Z","view_time":null,"first_public_time":"$D2026-09-15T20:48:04.918Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e2bf871ed39979f5","login":"akbstone","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5f1198be755feb49abf2a4a66e9ba1c5387eab18c8da8e0bc8bc865def49f441","tier":"starter_2024","bio":"","following":false},"version":12,"publish_version":12,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3206b376defd402","login":"akbstone","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5f1198be755feb49abf2a4a66e9ba1c5387eab18c8da8e0bc8bc865def49f441","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"e2bf871ed39979f5","login":"akbstone","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5f1198be755feb49abf2a4a66e9ba1c5387eab18c8da8e0bc8bc865def49f441","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Wind rose plot and legend","cells":[{"id":1,"value":"# Wind rose plot and legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function windRoseLegend(speeds, color, {title = \"Speed bin\"} = {}) {\n const swatch = 12, rowH = 18;\n return html`

${title}

\n ${speeds.map((s, i) => html`

\n \n ${s}${i < speeds.length - 1 ? `–${speeds[i + 1]}` : \"+\"} m/s\n

`)}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 45:"$44:body"