JSPM

sync-two-axes

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q9901F
  • License MIT

Algorithm to sync/align two axes' ticks so that their intervals are 'nice'.

Package Exports

  • sync-two-axes
  • sync-two-axes/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sync-two-axes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sync-two-axes

Algorithm to sync/align two axes' ticks so that their intervals are 'nice'. If there are multiple 'nice' options, it should return the option with the largest tick count first.

Inspiration: https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks/16363437#16363437

"[T]he "nicest" numbers in decimal are 1, 2, and 5, and all power-of-ten multiples of these numbers"

Example

Imagine you have two data sets, both graphed on the same axis. The left, y1 axis, has a range of 0 to 200. The right, y2 axis, has a range of 0 to 50. For readability's sake, you want the tick marks across the two graphs to align on 'nice' numbers. That's where this algorithm comes in.

  const y1 = {
    min: 0,
    max: 200,
  };
  const y2 = {
    min: 0,
    max: 50,
  };

  getAlignedTicksForTwoAxes(y1, y2);

Returns the following object:

  {
    tickCount: 10,
    axis1TickInterval: 20,
    axis2TickInterval: 5,
  }

Which means there are 10 ticks across both axes, in intervals of 20 for y1 and intervals of 5 for y2.

You can also define minTicks (default 3) and maxTicks (default 10).

  const minTicks = 15;
  const maxTicks = 30;
  getAlignedTicksForTwoAxes(y1, y2, minTicks, maxTicks); // None

Returns 'None' since it could not determine an alignment fitting those requirements.

Development/Contributing

I, unfortunately, have decided to do this on windows.

  1. https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows

I chose to use nvm-windows.

Current nvm latest: v18.6.0