@antv/scale

What is @antv/scale?

@antv/scale is a JavaScript library for creating and managing scales, which are functions that map a domain of data values to a range of visual values. It is commonly used in data visualization to ensure that data is represented accurately and proportionally.

What are @antv/scale's main functionalities?

Linear Scale

Linear scales map a continuous domain to a continuous range. This is useful for data that is evenly distributed.

const { Linear } = require('@antv/scale');
const scale = new Linear({
  domain: [0, 100],
  range: [0, 1]
});
console.log(scale.map(50)); // 0.5

Ordinal Scale

Ordinal scales map a discrete domain to a discrete range. This is useful for categorical data.

const { Ordinal } = require('@antv/scale');
const scale = new Ordinal({
  domain: ['A', 'B', 'C'],
  range: [0, 1, 2]
});
console.log(scale.map('B')); // 1

Time Scale

Time scales map a time domain to a continuous range. This is useful for time-series data.

const { Time } = require('@antv/scale');
const scale = new Time({
  domain: [new Date(2020, 0, 1), new Date(2020, 11, 31)],
  range: [0, 1]
});
console.log(scale.map(new Date(2020, 5, 15))); // 0.5

Log Scale

Log scales map a logarithmic domain to a continuous range. This is useful for data that spans several orders of magnitude.

const { Log } = require('@antv/scale');
const scale = new Log({
  domain: [1, 100],
  range: [0, 1]
});
console.log(scale.map(10)); // 0.5

Other packages similar to @antv/scale

d3-scale

d3-scale is a part of the D3.js library and provides similar functionality for creating scales. It supports a wide range of scale types including linear, logarithmic, ordinal, and time scales. Compared to @antv/scale, d3-scale is more widely used and has a larger community, but @antv/scale may offer better integration with other AntV libraries.

vega-scale

vega-scale is part of the Vega visualization grammar and provides a variety of scale types for mapping data to visual values. It is similar to @antv/scale in terms of functionality but is designed to work within the Vega ecosystem. It offers robust support for different scale types and is well-documented.

README

@antv/scale

将抽象数据映射为视觉数据的比例尺工具包。 在线演示 · English

✨ 特性

• 功能强大：内置包含 15+ 丰富的比例尺类型，满足各种不同的定制化需求。
• 高性能：利用各种手段方法去提升数据映射的性能。
• TypeScript：全部 TypeScript，并提供了完整有效的类型定义。

📦 安装

$ npm install @antv/scale

🔨 上手

• 基本用法

import { Linear, LinearOptions } from '@antv/scale';

const options: LinearOptions = {
  domain: [0, 10],
  range: [0, 100],
};
const x = new Linear(options);

x.map(2); // 20
x.invert(20); // 2
x.getTicks(); // [0, 2.5, 5, 7.5, 10]

• 自定义可读 tickMethod

import { Linear } from '@antv/scale';

const x = new Linear({
  domain: [0, 10],
  range: [0, 100],
  tickCount: 3,
  tickMethod: () => [0, 5, 10],
});

x.getTicks(); // [0, 5, 10]

📎 链接

• 入门介绍
• API 索引

📮 贡献

$ git clone [e-mail]:antvis/scale.git

$ cd scale

$ npm i

$ npm t

写完代码之后，提交 PR 即可。

📄 License

MIT@AntV.