divide-up-square-in-parallel-slices v0.0.1

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

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:

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