Divide a square in parallel slices whose area is proportional to the data demo page

This library allows you to divide a square into parallel slices whose area is proportional to the data received in input. Here is an example:

This means that the red slice (S1) has area equal to 30% of the area of ​​the square, the blue slice (S2) also, and the green slice (S3) has area equal to 40% of the total square area.

Install

yarn add divide-up-square-in-parallel-slices

or

npm install divide-up-square-in-parallel-slices --save

Screenshots

API

As seen before, you can create parallel slices proportional to square area.

computeSquareSlices(dataset, squareSide)

The computeSquareSlices function accepts two parameters and returns an array of objects containing useful information about each slice.

Parameters

| Argument | Type | Description | | ------------ | -------- | ---------------------------------------------------------------------------------------- | | dataset | T[] | array of objects, each object must contains a percentage property (number in [0, 1]) | | squareSide | number | square side lenght |

Note: the sum of percentage values must be 1.

and:

interface Point {
  x: number
  y: number
}

Returns

The returned array contains one object for each slice. Each object has these properties:

| Property name | Type | Description | | -------------------------- | --------------------------- | ------------------------------------------------------------------ | | ...datum | / | the original dataset object info | | percentage | number | number in [0, 1] | | cumulativePercentage | number | cumulative percentage value | | sidePosition | left or right or over | slice position compared to square diagonal | | vertices | Vertices | slice vertices coordinates | | height | number | slice height | | middlePointLeftDiagonal | Point | coordinates of the point at the center of the slice left diagonal | | middlePointRightDiagonal | Point | coordinates of the point at the center of the slice right diagonal | | leftDiagonalLenght | number | left diagonal lenght | | rightDiagonalLenght | number | rigth diagonal lenght | | path | string | slice path |

interface Vertices {
  ldt: Point
  ldb: Point
  rdt: Point
  rdb: Point
  rt: Point
  lb: Point
}

Example

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

import { computeSquareSlices } from 'divide-up-square-in-parallel-slices'

const dataset = [
  { percentage: 0.3, color: "#ff787a" },
  { percentage: 0.3, color: "#7f7ad9" },
  { percentage: 0.4, color: "#74dfc9" },
]
const squareSide = 125
const slicesInfo = computeSquareSlices(dataset, squareSide)

// [
//   {
//     "percentage": 0.3,
//     "color": "#ff787a",
//     "cumulativePercentage": 0.3,
//     "sidePosition": "left",
//     "vertices": {
//       "ldt": { "x": 0,  "y": 0 },
//       "ldb": { "x": 0,  "y": 0 },
//       "rdt": { "x": 193.64916731037084, "y": 0 },
//       "rdb": { "x": 0, "y": 193.64916731037084 },
//       "rt": { "x": 193.64916731037084, "y": 0 },
//       "lb": { "x": 0, "y": 193.64916731037084 }
//     },
//     "height": 136.93063937629154,
//     "middlePointLeftDiagonal": { "x": 0, "y": 0 },
//     "middlePointRightDiagonal": { "x": 96.82458365518542, "y": 96.82458365518542 },
//     "leftDiagonalLenght": 0,
//     "rightDiagonalLenght": 273.8612787525831,
//     "path": "M 0 0L 193.64916731037084 0L 193.64916731037084 0L 0 193.64916731037084L 0 193.64916731037084L 0 0 Z"
//   },
//   { ... },
//   { ... }

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

In particular:

the red slice has side = left because it lays on the left side of the square diagonal (the diagonal that connects the top-left vertice to the bottom-right vertice).

the blue slice has side = over because its area it's above the square diagonal.

And so on...

Demo page

A demo page is available.

License

MIT © Ilaria Venturini