Функции масштабирования D3

[ 0, 2, 3, 5, 7, 5, 9, 10 ]

var myScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 600]);

myScale(0);   // возвращает 0
myScale(2);   // возвращает 120
myScale(3);   // возвращает 180
...
myScale(10);  // возвращает 600

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 600]);
linearScale(0);   // возвращает 0
linearScale(5);   // возвращает 300
```linearScale(10);  // возвращает 600

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range(['желтый', 'красный']);
linearScale(0);   // возвращает "rgb(255, 255, 0)"
linearScale(5);   // возвращает "rgb(255, 128, 0)"
linearScale(10);  // возвращает "rgb(255, 0, 0)"

var sqrtScale = d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 30]);
sqrtScale(0);   // возвращает 0
sqrtScale(50);  // возвращает 21.21...
sqrtScale(100); // возвращает 30

var powerScale = d3.scalePow()
  .exponent(2)
  .domain([0, 1000])
  .range([0, 300]);
var myData = [100, 200, 300, 400, 1000];
// powerScale[item]

var logScale = d3.scaleLog()
  .domain([10, 100000])
  .range([0, 600]);
logScale(10);     // возвращает 0
logScale(100);    // возвращает 150
logScale(1000);   // возвращает 300
logScale(100000); // возвращает 600

timeScale = d3.scaleTime()
  .domain([new Date(2016, 0, 1), new Date(2017, 0, 1)])
  .range([0, 1000]);

#### scaleSequential
`scaleSequential` используется для отображения **`domain` заданного диапазона** на предопределенный **`interpolator` интерполятор**. (Интерполятор — это функция, которая принимает входные данные от 0 до 1 и возвращает интерполяцию между двумя числами, цветами, строками и т. д.)
D3 предоставляет множество предопределенных интерполяторов, включая множество цветных интерполяторов. Например, вы можете использовать `d3.interpolateRainbow` для создания известного радужного цвета (красивый! ):

 --------------------------
 #### invert
 Этот метод позволяет вам определить **входное** значение функции масштабирования при заданном **выходном** значении `.invert()`:
 ``` 
 let linearScale = d3.scaleLinear()
   .domain([0, 10])
   .range([0, 100]);
 linearScale.invert(50);   // возвращает 5
 linearScale.invert(100);  // возвращает 10
 ```
 #### clamp
 По умолчанию, когда входное значение выходит за пределы `domain(диапазона)`, выходное значение все равно будет вычислено, но не будет учитываться `range`.
 Например:
 ``` 
 var x = d3.scaleLinear()
     .domain([10, 130])
     .range([0, 960]);
 x(-10); // -160, за пределами диапазона
 x.invert(-160); // -10, за пределами диапазона
 ```
 Вы можете использовать метод `.clamp(true)` для **ограничения функции масштабирования**, чтобы входные значения оставались в пределах диапазона:
 ``` 
 x.clamp(true);
 x(-10); // 0, ограничен диапазоном
 x.invert(-160); // 10, ограничен диапазоном
 ```
 Также можно отключить его с помощью `.clamp(false)`.
 #### Множественные сегменты
 Домен и диапазон для `scaleLinear`, `scalePow` и `scaleSqrt` обычно состоят из двух значений, но если вы предоставите три или более значений, функция масштабирования будет разделена на несколько сегментов:
 ``` 
 var linearScale = d3.scaleLinear()
   .domain([-10, 0, 10])
   .range(['red', '#ddd', 'blue']);
 linearScale(-10);  // возвращает "rgb(255, 0, 0)"
 linearScale(0);    // возвращает "rgb(221, 221, 221)"
 linearScale(5);    // возвращает "rgb(111, 111, 238)"
 ```
   -------------------------------------------------
```  ### непрерывный вход и дискретный выход (вход непрерывен, выход дискретен)
   #### scaleQuantize
   `scaleQuantize` принимает непрерывный вход и возвращает несколько дискретных значений, определенных диапазоном.
   ```javascript
  var quantizeScale = d3.scaleQuantize()
    .domain([0, 100])
    .range(['blue', 'orange', 'green', 'pink']);
  quantizeScale(10);  // возвращает 'blue'
  quantizeScale(30);  // возвращает 'orange'
  quantizeScale(90);  // возвращает 'pink'
  ```
   Каждое значение диапазона отображается в блоки одинакового размера в домене, поэтому в приведенном выше примере:
   - 0 ≤ *v* < 25 отображается как `blue`
   - 25 ≤ *v* < 50 отображается как `orange`
   - 50 ≤ *v* < 75 отображается как `green`
   - 75 ≤ *v* < 100 отображается как `pink`
   где *v* — это входное значение.
   ![](./image/image-20220816170028059.png)
   > [Попробуйте редактировать приведенный выше пример в Codepen](https://codepen.io/wantnocode/pen/RwMqpRY)
   #### scaleQuantile
   `scaleQuantile` отображает непрерывные числовые входы в дискретные значения. `domain(домен)` определяется **массивом чисел**:
   ```javascript
  var myData = [0, 5, 7, 10, 20, 30, 35, 40, 60, 62, 65, 70, 80, 90, 100];
  var quantileScale = d3.scaleQuantile()
    .domain(myData)
    .range(['blue', 'orange', 'green']);
  ```
   ![](./image/image-20200816170455781.png)
   > [Попробуйте редактировать приведенный выше пример в Codepen](https://codepen.io/wantnocode/pen/yLKQMVe)
   Элементы массива `domain` делятся на *n* групп одинакового размера, где *n* — это количество значений в `range`.
   Таким образом, в приведенном выше примере массив домена делится на 3 группы, где:
   - Первые 5 значений отображаются как `blue` - Следующие 5 значений отображаются как `оранжевый`
  - Последние 5 значений отображаются как `зелёный`
   Разделы домена можно получить с помощью `. quantiles()`:
   ```javascript
  quantileScale. quantiles();  // возвращает [26, 63, . . . ]
  ```
   Возвращаются значения квантилей. Если `range` содержит *n* дискретных значений, то возвращаемый массив будет содержать *n* - 1 значение. В первом квантиле учитываются значения, меньшие первого порога; значения, большие или равные первому порогу, но меньшие второго порога, учитываются во втором квантиле и так далее.
   Проще говоря, наименьшие 25% данных отображаются в `range[0]`, следующие 25% данных отображаются в `range[1]` и так далее.
   ### Дискретный вход и дискретный выход (вход и выход не являются непрерывными)
   #### scaleOrdinal
   `scaleOrdinal` имеет дискретный `domain` и `range`. `domain` массив указывает на возможные входные значения, а `range` массив указывает на выходные значения. Если `range` массив короче `domain` массива, то `range` массив будет повторяться.
 ```
 var myData = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек']
 var ordinalScale = d3. scaleOrdinal()
   . domain(myData)
   . range(['синий', 'красный', 'розовый']);
 ordinalScale('Янв');  // возвращает 'синий'
 ordinalScale('Фев');  // возвращает 'красный'
 ordinalScale('Мар');  // возвращает 'розовый'
 ordinalScale('Апр');  // возвращает 'синий';  // повтор
 ```
 ![](./image/image-20220816172309736.png)
 > [Попробуйте редактировать пример выше в Codepen](https://codepen.io/wantnocode/pen/MWVzpVJ)По умолчанию, если значение, не входящее в `domain`, используется в качестве входного, `Scale` будет неявно добавлять это значение в `domain`:
``` 
ordinalScale('Понедельник');  // возвращает 'черный';
```
Если это поведение не требуется, можно использовать `.unknown()`:
``` 
ordinalScale.unknown('Не месяц');
ordinalScale('Вторник'); // возвращает 'Не месяц'
```
#### scaleBand
`scaleBand` используется для создания диаграммы столбцов и помогает определить геометрию столбцов, учитывая заполнение между ними. `domain` задается как набор значений (значения каждого столбца), а `range` обычно задается минимальным и максимальным значениями (например, общей шириной диаграммы столбцов).
На самом деле `scaleBand` разделяет `range` на `n` `bar` (где `n` — количество значений в массиве `domain`), и вычисляет положение и ширину каждого `bar`, учитывая любое указанное заполнение.
``` 
var bandScale = d3.scaleBand()
  .domain(['Пн', 'Вт', 'Ср', 'Чт', 'Пт'])
  .range([0, 200]);
bandScale('Пн'); // 0
bandScale('Вт'); // 40
bandScale('Пт'); // 160
```
Можно использовать метод `.bandwidth()` для доступа к ширине каждого бара:
``` 
bandScale.bandwidth();  // 40
```
Можно настроить два типа заполнения:
- `paddingInner` (как процент ширины бара) — количество заполнения между барами
- `paddingOuter` (как процент ширины бара) — количество заполнения перед первым баром и после последнего бара
Добавим внутреннее заполнение в пример выше:
``` 
bandScale.paddingInner(0.05);
bandScale.bandWidth();  // 38.38
bandScale('Пн');       // 0
bandScale('Вт');       // 40.4
```Тогда будет создана такая диаграмма столбцов:
![](./image/image-20220816173131167.png)
> [Попробуйте редактировать пример выше в Codepen](https://codepen.io/wantnocode/pen/mdxQWGg)

#### `scalePoint`
`scalePoint` создает набор точек, равномерно распределенных в заданном диапазоне (равномерно распределенных).

```js
var pointScale = d3.scalePoint()
  .domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])
  .range([0, 500]);
pointScale('Mon');  // возвращает 0
pointScale('Tue');  // возвращает 125
pointScale('Fri');  // возвращает 500
```
![](./image/image-20220816173806798.png)
Между точками можно получить расстояние с помощью метода `.step()`:
```
pointScale.step();  // возвращает 125
```
Внешний заполнитель можно указать как отношение заполнителя к расстоянию между точками. Например, чтобы сделать внешний заполнитель равным одной четвертой расстояния между точками, используйте значение 0.25:
```
pointScale.padding(0.25);
pointScale('Mon');  // возвращает 27.77...
pointScale.step();  // возвращает 111.11...
```
> [Попробуйте редактировать пример на Codepen](https://codepen.io/wantnocode/pen/YzaRZdB)