snspinn/react-windrose-chart

Wind Rose Chart React Component

Windrose Chart Component

Features

• D3js (Javascript library for manipulating documents based on data) implemented SVG rendering
• A simplied fork of https://github.com/eunchurn/react-windrose-chart (who was in turn inspired by ssmaroju's Wind Rose Plot)

Installation

Not yet packages into a usable npm

cd your-project/src/
git clone

Usage

import React from "react";
import styled from "styled-components";
import { default as WindRose } from "./react-windrose-chart/src/WindRose";

const Container = styled.div`
  width: 600px;
  height: 600px;
`;

const data = {
  data: [
    {
      angle: "N  ",
      "0-10": 0.5,
      /* ... */
      "40-50": 0.2,
      "50+": 0.1,
      total: 4.9
    } /* ... */
  ],
  columns: [
    "angle",
    "0-10",
    /* ... */
    "40-50",
    "50+"
  ]
};

const App = () => (
  <Container>
    <WindRose data={data.data} columns={data.columns} />
  </Container>
);

Example

• The windrose defaults to zero data
• The example data can be found in the example/ directory
• For the windrose above, use:

import React from "react";
import styled from "styled-components";
import { default as WindRose } from "./react-windrose-chart/src/WindRose";
import data from "./react-windrose-chart/src/example/windrose_data_1.json";

const Container = styled.div`
  width: 600px;
  height: 600px;
`;

const App = () => (
  <Container>
    <WindRose data={data.data} columns={data.columns} />
  </Container>
);

Props

Name	Type	Required	Description	Default
data	Array	Required	Wind Rose Chart data
columns	Array	Required	Wind Rose Chart header string array
width	Number		container width, default value: 500
height	Number		container height, default value: 500

data Object array

Name	Type	Required	Description	Default
0-10	Number	Required	Frequency of 0-10 km/hr
10-20	Number	Required	Frequency of 10-20 km/hr
20-30	Number	Required	Frequency of 20-30 km/hr
30-40	Number	Required	Frequency of 30-40 km/hr
40-50	Number	Required	Frequency of 40-50 km/hr
50+	Number	Required	Frequency of 50+ m/sec
angle	String	Required	Wind direction N, NNE, NE, ENE, E, ESE, SE, SSE, S, SSW, SW, WSW, W, WNW, NW, NNW
total	Number	Required	Sum of frequencies of this direction

Data utils

• Classifying direction function only:

import { classifyDir } from "./react-windrose-chart/src/util";

const directionCharacter = classifyDir(270);
// Return : 'W'

License

MIT