@d3plus/math

Mathematical functions to aid in calculating visualizations.

Installing

If using npm, npm install @d3plus/math. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "@d3plus/math";

In vanilla JavaScript, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/math@3.0.0-alpha.2"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.

API Reference

• closest - Finds the closest numeric value in an array.
• largestRect - An angle of zero means that the longer side of the polygon (the width) will be aligned with the x axis. An angle of 90 and/or -90 means that the longer side of the polygon (the width) will be aligned with the y axis. The value can be a number between -90 and 90 specifying the angle of rotation of the polygon, a string which is parsed to a number, or an array of numbers specifying the possible rotations of the polygon.
• lineIntersection - Finds the intersection point (if there is one) of the lines p1q1 and p2q2.
• path2polygon - Transforms a path string into an Array of points.
• pointDistance - Calculates the pixel distance between two points.
• pointDistanceSquared - Returns the squared euclidean distance between two points.
• pointRotate - Rotates a point around a given origin.
• polygonInside - Checks if one polygon is inside another polygon.
• polygonRayCast - Gives the two closest intersection points between a ray cast from a point inside a polygon. The two points should lie on opposite sides of the origin.
• polygonRotate - Rotates a point around a given origin.
• segmentBoxContains - Checks whether a point is inside the bounding box of a line segment.
• segmentsIntersect - Checks whether the line segments p1q1 && p2q2 intersect.
• shapeEdgePoint - Calculates the x/y position of a point at the edge of a shape, from the center of the shape, given a specified pixel distance and radian angle.
• largestRect - Simplifies the points of a polygon using both the Ramer-Douglas-Peucker algorithm and basic distance-based simplification. Adapted to an ES6 module from the excellent Simplify.js.

• LargestRect - The returned Object of the largestRect function.

d3plus.closest(n, arr) <>

Finds the closest numeric value in an array.

This is a global function

d3plus.largestRect(poly, [options]) <>

An angle of zero means that the longer side of the polygon (the width) will be aligned with the x axis. An angle of 90 and/or -90 means that the longer side of the polygon (the width) will be aligned with the y axis. The value can be a number between -90 and 90 specifying the angle of rotation of the polygon, a string which is parsed to a number, or an array of numbers specifying the possible rotations of the polygon.

This is a global function Author: Daniel Smilkov [dsmilkov@gmail.com]

d3plus.lineIntersection(p1, q1, p2, q2) <>

Finds the intersection point (if there is one) of the lines p1q1 and p2q2.

This is a global function

d3plus.path2polygon(path, [segmentLength]) <>

Transforms a path string into an Array of points.

This is a global function

d3plus.pointDistance(p1, p2) <>

Calculates the pixel distance between two points.

This is a global function

d3plus.pointDistanceSquared(p1, p2) <>

Returns the squared euclidean distance between two points.

This is a global function

d3plus.pointRotate(p, alpha, [origin]) <>

Rotates a point around a given origin.

This is a global function

d3plus.polygonInside(polyA, polyB) <>

Checks if one polygon is inside another polygon.

This is a global function

d3plus.polygonRayCast(poly, origin, [alpha]) <>

Gives the two closest intersection points between a ray cast from a point inside a polygon. The two points should lie on opposite sides of the origin.

This is a global function Returns: Array - An array containing two values, the closest point on the left and the closest point on the right. If either point cannot be found, that value will be null.

d3plus.polygonRotate(poly, alpha, [origin]) <>

Rotates a point around a given origin.

This is a global function

d3plus.segmentBoxContains(s1, s2, p) <>

Checks whether a point is inside the bounding box of a line segment.

This is a global function

d3plus.segmentsIntersect(p1, q1, p2, q2) <>

Checks whether the line segments p1q1 && p2q2 intersect.

This is a global function

d3plus.shapeEdgePoint(angle, distance) <>

Calculates the x/y position of a point at the edge of a shape, from the center of the shape, given a specified pixel distance and radian angle.

This is a global function Returns: String - [shape = "circle"] The type of shape, which can be either "circle" or "square".

d3plus.largestRect(poly, [tolerance], [highestQuality]) <>

Simplifies the points of a polygon using both the Ramer-Douglas-Peucker algorithm and basic distance-based simplification. Adapted to an ES6 module from the excellent Simplify.js.

This is a global function Author: Vladimir Agafonkin

LargestRect <>

The returned Object of the largestRect function.

This is a global typedef Properties

| Name | Type | Description | | --- | --- | --- | | width | Number | The width of the rectangle | | height | Number | The height of the rectangle | | cx | Number | The x coordinate of the rectangle's center | | cy | Number | The y coordinate of the rectangle's center | | angle | Number | The rotation angle of the rectangle in degrees. The anchor of rotation is the center point. | | area | Number | The area of the largest rectangle. | | points | Array | An array of x/y coordinates for each point in the rectangle, useful for rendering paths. |

Documentation generated on Wed, 02 Apr 2025 20:59:31 GMT