Skip to main content
SimilarExport ZIP
100%

Wind chart

✓ Published0🌍 Public
Aask4jm
Last edited Jul 6, 2020
Created on Jul 6, 2020

A circular wind rose chart visualizes directional wind speed data as stacked radial bars around a central point, with each bar segment colored by speed category and labeled around the perimeter. Built with D3 v5, the visualization uses `d3.arc()` for the radial segments, `d3.scaleBand()` for angular positioning, and `d3.stack()` to layer the speed components. The data originates from the Data Canvas - Sense Your City project. A legend and circular grid lines with radial axis ticks support interpretation of the magnitude and direction of the wind measurements.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

https://raw.githubusercontent.com/ask4jm/Test/master/data.csv https://raw.githubusercontent.com/ask4jm/Test/master/speed.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Wind Rose Starter Playtime

This wind rose visualizes wind speed and direction using stacked radial bars. The wind speed bins are shown as colored segments, with direction labels placed around the circular plot. The code uses `d3.arc()` for the bar geometry, `d3.stack()` to layer the speed categories, and `d3.scaleOrdinal` for color mapping. Data comes from a CSV file, with circular grid lines drawn via `d3.axisLeft`. The custom `d3-scale-radial.js` library is included but the main visualization uses standard linear scales for radius.

AAndre J Denais
85% match
Loading thumbnail…

Rose Wind Plot

This wind rose plot visualizes the frequency of wind speeds and directions across eight compass points, with color-coded stacked bars representing wind speed ranges (0–1, 1–2, ..., 6+). The circular chart uses an SVG rendering with a radial scale (`d3.scaleRadial`) and `d3.arc` to draw the concentric segments. The code loads data from a CSV file, constructs a stacked layout with `d3.stack`, and adds axis labels, a legend, and grid circles using `d3.axisLeft` and `d3.scaleLinear`.

SShuyu Zheng
85% match
Loading thumbnail…

Wind Rose Starter

This wind rose visualization displays the frequency and direction of wind speeds, with eight speed categories (from 0-1 to 6+ units) arranged as concentric rings around a central point. Each of the 16 compass directions (N, NNE, NE, etc.) is represented as a wedge, colored by speed category using `d3.scaleOrdinal()`. The chart uses `d3.arc()` with `innerRadius` and `outerRadius` from a `d3.scaleLinear()` to draw stacked radial bars, and includes circular gridlines and angle labels. Data is loaded from a CSV file with `d3.csv()`, and the visualization is rendered as SVG, with an optional `scaleRadial` function from the included `d3-scale-radial.js` file available for alternative radial scaling.

AAndre J Denais
85% match
Loading thumbnail…

Fork of Rose Wind Plot

This example visualizes wind speed and direction as a radial stacked bar chart, or wind rose, with each of the 16 compass directions represented by an angular segment. The colored bars show the proportional distribution of wind speeds across eight magnitude bins, while circular gridlines and axis ticks indicate the scale. The visualization is built with D3 v6, using `d3.stack` to structure the data, `d3.arc` to generate the SVG paths, and a custom `scaleRadial` implementation from d3-scale-radial.js for the radial axis. Data is loaded from a CSV file specifying wind frequency per direction and speed class.

Yyingzhe-z
85% match
Loading thumbnail…

Fork of Rose Wind Plot

This example visualizes wind speed and direction as a radial stacked bar chart, or wind rose, with each of the 16 compass directions represented by an angular segment. The colored bars show the proportional distribution of wind speeds across eight magnitude bins, while circular gridlines and axis ticks indicate the scale. The visualization is built with D3 v6, using `d3.stack` to structure the data, `d3.arc` to generate the SVG paths, and a custom `scaleRadial` implementation from d3-scale-radial.js for the radial axis. Data is loaded from a CSV file specifying wind frequency per direction and speed class.

Yyingzhe-z
85% match
Loading thumbnail…

Fork of Rose Wind Plot

A radial stacked bar chart displays wind speed distribution across compass directions, with each direction divided into wind speed bins colored from blue to red. The circular layout uses a custom `scaleRadial` scale built on `d3-scale` to map data values to radial distances. The `d3.csv` function loads the dataset, `d3.stack()` layers the speed categories, and `d3.arc()` renders the annular segments. Concentric dashed circles show frequency values, while angled labels and a legend identify directions and speed ranges. The SVG output is generated entirely through D3 v6 APIs.

Mmauricio-acosta-reyes
84% match
Loading thumbnail…

Fork of Rose Wind Plot

This fork of a wind rose plot visualizes wind speed and direction distribution using stacked radial bars around a circular axis. The chart displays eight wind speed ranges across sixteen compass directions, colored distinctly to show frequency percentages for each category. Built with D3 v6, the visualization uses `d3.arc`, `d3.stack`, and a custom `scaleRadial` to map data from a CSV file. SVG rendering includes circular gridlines, directional labels, and a legend, with the layout centered and rotated to align angular bands precisely.

DDonald Bagwell
83% match
Loading thumbnail…

Fork of Rose Wind Plot

A radial wind rose chart displays wind speed and direction data from a CSV file, using a circular layout where each of the compass directions forms a segment whose length corresponds to wind speed. The chart uses stacked bars colored by speed range from blue to red, with the data loaded via `d3.csv`. The implementation combines D3's `scaleLinear`, `scaleBand`, and `scaleOrdinal` with a custom `radial` scale function that applies a square-root transformation to map linear data onto a circular radius. Angular axes and concentric circular gridlines are generated using `axisLeft` with a transformed radius scale, while the chart is rendered as SVG.

AAndres de la Garza
83% match