Divide a circle into circular segments whose area is proportional to the data
demo page

This library allows you to divide a circle into circular segments whose area is proportional to the data received in input. Here is an example:

This means that the red circular segment (S1) has area equal to 30% of the area of ​​the circle, the blue circular segment (S2) also, while the blue circular segment (S3) has area equal to 40% of the total area of ​​the circle.

The computation is therefore made on areas, not as a proportion of the diameter. In this case the result would have been different:

As you can see, in the firs case (library output) the first two circular segments have both value 30% but their heights are different, in the second case not.

⚙️ Install

yarn add divide-up-circle-in-circular-segments

or

npm install divide-up-circle-in-circular-segments --save

📷 Screenshots

🐝 API

As seen before, you can create circular segments proportional by circle area.

computeCircularSegments(dataset, radius, center, options?)

The computeCircularSegments function accepts 4 parameters and an array of objects in which each object contains the useful information about each circular segment.

Parameters

| Argument | Type | Description | | -------------------- | --------- | -------------------------------------------------------------------------------------- | | dataset | number | array of objects, each object must contains a percentage property (number in [0, 1]) | | radius | number | circle radius | | center | Point | circle center | | options (optional) | Options | option objects |

Note: the sum of percentage values must be 1.

Where:

interface Point {
  x: number
  y: number
}

interface Options {
  orientation?: 'horizontal' | 'vertical'
}

options object is optional and the default is:

const defaultOptions: Options = {
  orientation: 'horizontal',
}

Returns

The returned array contains one object for each circular segment. Each object is composed of these properties:

| Property name | Type | Description | | ---------------------- | ---------- | ----------------------------------------------------------------------------------------- | | ...datum | / | the original dataset object info | | percentage | number | number in [0, 1] | | cumulativePercentage | number | cumulative percentage value | | height | number | circular segment height | | cumulativeHeight | number | cumulative circular segment height | | theta | number | angle subtended by the chord at the center of the circle related to the circlular segment | | path | string | path string useful to draw the circular segment | | center | Point | center point of the circular segment | | vertices | Vertices | coordinates of vertices of circular segment |

interface Vertices {
  topLeft: Point
  topRight: Point
  bottomLeft: Point
  bottomRight: Point
}

Example

I hope the following example can better explain the information written above.

import { computeCircularSegments } from 'divide-up-circle-in-circular-segments'

const dataset = [
  {percentage: 0.3, color: "#ff787a"},
  {percentage: 0.3, color: "#7f7ad9"},
  {percentage: 0.4, color: "#74dfc9"}
]
const radius = 125
const center = { x: radius, y: radius }
const circularSegments = computeCircularSegments(dataset, r, center)

// [
//   {
//     center: { x: 125, y: 42.5192806380935 },
//     color: '#ff787a',
//     cumulativeHeight: 85.038561276187,
//     cumulativePercentage: 0.3,
//     height: 85.038561276187,
//     path:
//       'M 125 0 L 125 0 A 125 125 2.4907848665483074 0 0 6.559789703315133 85.038561276187 L 243.44021029668488 85.038561276187 A 125 125 2.4907848665483074 0 0 125 0',
//     percentage: 0.3,
//     theta: 2.4907848665483074,
//     vertices: {
//       bottomLeft: { x: 6.559789703315133, y: 85.038561276187 },
//       bottomRight: { x: 243.44021029668488, y: 85.038561276187 },
//       topLeft: { x: 125, y: 0 },
//       topRight: { x: 125, y: 0 },
//     },
//   },
//   { ... },
//   { ... }

You can draw the circular segments using the information above and here is the result:

In particular:

and so on...

In this case the options object is undefined and since the default orientation value is horizontal, the circular segments are drawn horizontally.

Setting orientation to vertical (computeCircularSegments(dataset, r, center, { orientation: 'vertical' })), you get:

🙈 Demo page

A demo page is available.

License

MIT © Ilaria Venturini