Wind Rose Charts in JavaScript

How to graph D3.js-based wind rose charts in plotly.js .

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Wind Rose Chart

var data = [{
    r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
    theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
    name: "11-14 m/s",
    marker: {color: "rgb(106,81,163)"},
    type: "barpolar"
  }, {
    r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
    theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
    name: "8-11 m/s",
    marker: {color: "rgb(158,154,200)"},
    type: "barpolar"
  }, {
    r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
    theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
    name: "5-8 m/s",
    marker: {color: "rgb(203,201,226)"},
    type: "barpolar"
  }, {
    r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
    theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
    name: "< 5 m/s",
    marker: {color: "rgb(242,240,247)"},
    type: "barpolar"
  }]
var layout = {
    title: {
      text: "Wind Speed Distribution in Laurel, NE"
    },
    font: {size: 16},
    legend: {font: {size: 16}},
    polar: {
      barmode: "overlay",
      bargap: 0,
      radialaxis: {ticksuffix: "%", angle: 45, dtick: 20},
      angularaxis: {direction: "clockwise"}
    }
  }

Plotly.newPlot("myDiv", data, layout)

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var data = [{\n r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],\n theta: [\"North\", \"N-E\", \"East\", \"S-E\", \"South\", \"S-W\", \"West\", \"N-W\"],\n name: \"11-14 m/s\",\n marker: {color: \"rgb(106,81,163)\"},\n type: \"barpolar\"\n }, {\n r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],\n theta: [\"North\", \"N-E\", \"East\", \"S-E\", \"South\", \"S-W\", \"West\", \"N-W\"],\n name: \"8-11 m/s\",\n marker: {color: \"rgb(158,154,200)\"},\n type: \"barpolar\"\n }, {\n r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],\n theta: [\"North\", \"N-E\", \"East\", \"S-E\", \"South\", \"S-W\", \"West\", \"N-W\"],\n name: \"5-8 m/s\",\n marker: {color: \"rgb(203,201,226)\"},\n type: \"barpolar\"\n }, {\n r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],\n theta: [\"North\", \"N-E\", \"East\", \"S-E\", \"South\", \"S-W\", \"West\", \"N-W\"],\n name: \"< 5 m/s\",\n marker: {color: \"rgb(242,240,247)\"},\n type: \"barpolar\"\n }]\nvar layout = {\n title: {\n text: \"Wind Speed Distribution in Laurel, NE\"\n },\n font: {size: 16},\n legend: {font: {size: 16}},\n polar: {\n barmode: \"overlay\",\n bargap: 0,\n radialaxis: {ticksuffix: \"%\", angle: 45, dtick: 20},\n angularaxis: {direction: \"clockwise\"}\n }\n }\n\nPlotly.newPlot(\"myDiv\", data, layout)"}">