Charts · Radial
WindRose
Observations of (bearing, speed) binned by compass sector and speed. Family: Radial · chart 31 of 60.
| direction | share | < 5 | 5–10 | 10–15 | 15–20 | ≥ 20 |
|---|---|---|---|---|---|---|
| N | 11% | 1% | 5% | 4% | 0% | 0% |
| NNE | 7% | 1% | 3% | 2% | 0% | 0% |
| NE | 4% | 0% | 2% | 1% | 0% | 0% |
| ENE | 4% | 1% | 3% | 1% | 0% | 0% |
| E | 13% | 0% | 7% | 5% | 0% | 0% |
| ESE | 5% | 0% | 2% | 3% | 0% | 0% |
| SE | 4% | 0% | 1% | 2% | 1% | 0% |
| SSE | 6% | 0% | 3% | 1% | 1% | 0% |
| S | 7% | 0% | 2% | 2% | 1% | 1% |
| SSW | 5% | 0% | 1% | 3% | 0% | 1% |
| SW | 3% | 0% | 1% | 1% | 1% | 0% |
| WSW | 2% | 0% | 1% | 1% | 0% | 0% |
| W | 3% | 1% | 1% | 1% | 0% | 0% |
| WNW | 6% | 0% | 1% | 2% | 1% | 1% |
| NW | 11% | 0% | 3% | 4% | 3% | 1% |
| NNW | 6% | 0% | 3% | 3% | 1% | 0% |
| direction | share | < 5 | 5–10 | 10–15 | 15–20 | ≥ 20 |
|---|---|---|---|---|---|---|
| N | 11% | 1% | 5% | 4% | 0% | 0% |
| NNE | 7% | 1% | 3% | 2% | 0% | 0% |
| NE | 4% | 0% | 2% | 1% | 0% | 0% |
| ENE | 4% | 1% | 3% | 1% | 0% | 0% |
| E | 13% | 0% | 7% | 5% | 0% | 0% |
| ESE | 5% | 0% | 2% | 3% | 0% | 0% |
| SE | 4% | 0% | 1% | 2% | 1% | 0% |
| SSE | 6% | 0% | 3% | 1% | 1% | 0% |
| S | 7% | 0% | 2% | 2% | 1% | 1% |
| SSW | 5% | 0% | 1% | 3% | 0% | 1% |
| SW | 3% | 0% | 1% | 1% | 1% | 0% |
| WSW | 2% | 0% | 1% | 1% | 0% | 0% |
| W | 3% | 1% | 1% | 1% | 0% | 0% |
| WNW | 6% | 0% | 1% | 2% | 1% | 1% |
| NW | 11% | 0% | 3% | 4% | 3% | 1% |
| NNW | 6% | 0% | 3% | 3% | 1% | 0% |
| direction | share | < 5 | 5–10 | 10–15 | 15–20 | ≥ 20 |
|---|---|---|---|---|---|---|
| N | 11% | 1% | 5% | 4% | 0% | 0% |
| NNE | 7% | 1% | 3% | 2% | 0% | 0% |
| NE | 4% | 0% | 2% | 1% | 0% | 0% |
| ENE | 4% | 1% | 3% | 1% | 0% | 0% |
| E | 13% | 0% | 7% | 5% | 0% | 0% |
| ESE | 5% | 0% | 2% | 3% | 0% | 0% |
| SE | 4% | 0% | 1% | 2% | 1% | 0% |
| SSE | 6% | 0% | 3% | 1% | 1% | 0% |
| S | 7% | 0% | 2% | 2% | 1% | 1% |
| SSW | 5% | 0% | 1% | 3% | 0% | 1% |
| SW | 3% | 0% | 1% | 1% | 1% | 0% |
| WSW | 2% | 0% | 1% | 1% | 0% | 0% |
| W | 3% | 1% | 1% | 1% | 0% | 0% |
| WNW | 6% | 0% | 1% | 2% | 1% | 1% |
| NW | 11% | 0% | 3% | 4% | 3% | 1% |
| NNW | 6% | 0% | 3% | 3% | 1% | 0% |
| direction | share | < 5 | 5–10 | 10–15 | 15–20 | ≥ 20 |
|---|---|---|---|---|---|---|
| N | 11% | 1% | 5% | 4% | 0% | 0% |
| NNE | 7% | 1% | 3% | 2% | 0% | 0% |
| NE | 4% | 0% | 2% | 1% | 0% | 0% |
| ENE | 4% | 1% | 3% | 1% | 0% | 0% |
| E | 13% | 0% | 7% | 5% | 0% | 0% |
| ESE | 5% | 0% | 2% | 3% | 0% | 0% |
| SE | 4% | 0% | 1% | 2% | 1% | 0% |
| SSE | 6% | 0% | 3% | 1% | 1% | 0% |
| S | 7% | 0% | 2% | 2% | 1% | 1% |
| SSW | 5% | 0% | 1% | 3% | 0% | 1% |
| SW | 3% | 0% | 1% | 1% | 1% | 0% |
| WSW | 2% | 0% | 1% | 1% | 0% | 0% |
| W | 3% | 1% | 1% | 1% | 0% | 0% |
| WNW | 6% | 0% | 1% | 2% | 1% | 1% |
| NW | 11% | 0% | 3% | 4% | 3% | 1% |
| NNW | 6% | 0% | 3% | 3% | 1% | 0% |
Example
The chart above, in each framework. Pick a framework once and every example on the site follows it. The full dataset is 742 hourly METAR reports (Iowa Environmental Mesonet).
npm install @silverpoint/react @silverpoint/grounds @silverpoint/fontsimport '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { WindRose } from '@silverpoint/react/wind-rose';
const data = [
{ bearing: 180, speed: 11 },
{ bearing: 170, speed: 11 },
{ bearing: 180, speed: 9 },
{ bearing: 180, speed: 10 },
{ bearing: 170, speed: 7 },
{ bearing: 180, speed: 11 },
{ bearing: 180, speed: 10 },
{ bearing: 180, speed: 9 },
{ bearing: 160, speed: 7 },
{ bearing: 150, speed: 6 },
{ bearing: 140, speed: 9 },
{ bearing: 150, speed: 8 },
// … 730 more rows of the same shape
];
export default function App() {
return (
<div style={{ width: 480 }}>
<WindRose
data={data}
bearingKey="bearing"
valueKey="speed"
title="Wind, Des Moines, March 2024"
unit="kt"
/>
</div>
);
}npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpWindRose } from '@silverpoint/vue/wind-rose';
const data = [
{ bearing: 180, speed: 11 },
{ bearing: 170, speed: 11 },
{ bearing: 180, speed: 9 },
{ bearing: 180, speed: 10 },
{ bearing: 170, speed: 7 },
{ bearing: 180, speed: 11 },
{ bearing: 180, speed: 10 },
{ bearing: 180, speed: 9 },
{ bearing: 160, speed: 7 },
{ bearing: 150, speed: 6 },
{ bearing: 140, speed: 9 },
{ bearing: 150, speed: 8 },
// … 730 more rows of the same shape
];
</script>
<template>
<div style="width: 480px">
<SpWindRose
:data="data"
bearing-key="bearing"
value-key="speed"
title="Wind, Des Moines, March 2024"
unit="kt"
/>
</div>
</template>npm install @silverpoint/angular @silverpoint/grounds @silverpoint/fonts// src/styles.css:
// @import '@silverpoint/fonts/fonts.css';
// @import '@silverpoint/grounds/styles.css';
import { Component } from '@angular/core';
import { SpWindRose } from '@silverpoint/angular/wind-rose';
@Component({
selector: 'app-root',
imports: [SpWindRose],
template: `
<div style="width: 480px">
<sp-wind-rose
[data]="data"
bearingKey="bearing"
valueKey="speed"
title="Wind, Des Moines, March 2024"
unit="kt"
/>
</div>
`,
})
export class App {
protected readonly data = [
{ bearing: 180, speed: 11 },
{ bearing: 170, speed: 11 },
{ bearing: 180, speed: 9 },
{ bearing: 180, speed: 10 },
{ bearing: 170, speed: 7 },
{ bearing: 180, speed: 11 },
{ bearing: 180, speed: 10 },
{ bearing: 180, speed: 9 },
{ bearing: 160, speed: 7 },
{ bearing: 150, speed: 6 },
{ bearing: 140, speed: 9 },
{ bearing: 150, speed: 8 },
// … 730 more rows of the same shape
];
}pip install reflex-silverpoint-reactimport reflex as rx
from reflex_silverpoint_react import wind_rose
DATA = [
{"bearing": 180, "speed": 11},
{"bearing": 170, "speed": 11},
{"bearing": 180, "speed": 9},
{"bearing": 180, "speed": 10},
{"bearing": 170, "speed": 7},
{"bearing": 180, "speed": 11},
{"bearing": 180, "speed": 10},
{"bearing": 180, "speed": 9},
{"bearing": 160, "speed": 7},
{"bearing": 150, "speed": 6},
{"bearing": 140, "speed": 9},
{"bearing": 150, "speed": 8},
# … 730 more rows of the same shape
]
def index() -> rx.Component:
return rx.box(
wind_rose(
data=DATA,
bearing_key="bearing",
value_key="speed",
title="Wind, Des Moines, March 2024",
unit="kt",
),
width="480px",
)
app = rx.App()
app.add_page(index)Import
Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.
| Framework | Import |
|---|---|
| React | import { WindRose } from '@silverpoint/react/wind-rose'; |
| Vue | import { SpWindRose } from '@silverpoint/vue/wind-rose'; |
| Angular | import { SpWindRose } from '@silverpoint/angular/wind-rose'; // <sp-wind-rose> |
| Reflex | from reflex_silverpoint_react import wind_rose |
Props
The props WindRose adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
bearingKey | bearing-key | bearing_key | Accessor<number | null | undefined> | Where the wind blows from, in degrees clockwise from north. |
valueKey | value-key | value_key | Accessor<number | null | undefined> | The wind speed; 0 is a calm, which has no direction. |
sectors | sectors | sectors | number | Compass sectors: 4, 8, 16 or 32; 16 by default. |
bins | bins | bins | readonly number[] | Ascending speed thresholds that split each sector; [5, 10, 15, 20] by default. |
Common props
Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.
Show the 22 common props
| React / Angular | Vue | Reflex | Type | Description |
|---|---|---|---|---|
data | data | data | readonly Datum[] | Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (…_key, keys, names) are ignored. |
ground | ground | ground | GroundRef | Style ground: silverpoint or cyanotype, or a ground object. Defaults to the app provider's, or silverpoint. |
substrate | substrate | substrate | SubstrateName | Prepared substrate within the ground (REQ-046). |
mode | mode | mode | InkMode | ink by default; precision disables inking (REQ-021). |
seed | seed | seed | Seed | Seed. If omitted, it is derived from id stably (REQ-003). |
id | id | id | string | Stable identifier. If omitted, it is generated deterministically. |
height | height | height | number | Height of the drawing area in px. Width is the container's unless pinned. |
width | width | width | number | — |
chrome | chrome | chrome | 'card' | 'bare' | card draws the full frame; bare only the drawing area (REQ-095). |
hatchFill | hatch-fill | hatch_fill | 'tile' | 'per-shape' | How areas are filled (REQ-029). |
title | title | title | string | — |
badge | badge | badge | string | — |
value | value | value | string | number | — |
unit | unit | unit | string | — |
footerLeft | footer-left | footer_left | string | — |
footerRight | footer-right | footer_right | string | — |
label | label | label | string | Accessible name. If omitted, it is derived from title (REQ-120). |
description | description | description | string | Long description for screen readers (REQ-120). |
dataTable | data-table | data_table | 'visible' | 'hidden' | 'none' | Tabular alternative; hidden leaves it for assistive technology only (REQ-121). |
locale | locale | locale | string | — |
numberFormat | number-format | number_format | Intl.NumberFormatOptions | — |
className | class-name | class_name | string | — |
Events
Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.
| Framework | Active item | Selection | Custom readout |
|---|---|---|---|
| React | onActiveChange | onSelect | tooltip={(item, readout) => …} |
| Vue | @active-change | @select | <template #tooltip> |
| Angular | (activeChange) | (select) | <ng-template spTooltip> |
| Reflex | on_active_change | on_select | tooltip=tooltip_template(…) |
Report it
Found something wrong with WindRose? Open an issue on GitHub — the form comes pre-filled with the chart and the version.