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.

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

Links

• Inspiration/Reference: https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks/16363437#16363437
• NPM Package: https://www.npmjs.com/package/sync-two-axes
• Tool: for convenience, a calculator is available via github-pages.
  • https://pc592.github.io/sync-two-axes/

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 node version: v18.6.0.

2. In the root directory, run npm install

   • Lint: npm run lint.
   • Test: npm run test. Easiest way to test and develop the package on its own.

3. For the tool:

   • Install gulp-cli to run gulp.
   • Otherwise, install npx and run npx gulp.