Графики повсюду. Они являются важной частью визуализации данных, потому что в большинстве случаев это простой способ переварить большой объем информации. Они используются для иллюстрации несоответствий между определенными вещами, шаблонами, которые наблюдаются в течение определенного периода времени, для информирования пользователя о чем-то, на что ему следует обратить внимание, и множеством других способов. Графики также бывают разных форм и размеров. В этом посте я буду говорить в основном о диаграммах, для которых требуются оси, такие как гистограммы, линии, диаграммы рассеяния и тому подобное. Без весов эти типы графиков было бы невозможно расшифровать. Данные важны, но масштабы — это ключ к тому, чтобы объяснить человеку, что такое график и почему он важен.
Шкалы — это удобная абстракция для фундаментальной задачи визуализации: отображения измерения абстрактных данных в визуальном представлении. -d3
Шкалы помогают людям составить мнение о наборе данных и в некоторых случаях обманывают людей, заставляя их думать определенным образом на основе.
На этом изображении разница в налоговой ставке кажется огромной, если смотреть на столбцы, но ось показывает реальную картину. Правая ось начинается с 34, а максимум равен 42, поэтому реальная разница составляет всего 4,6%, но на первый взгляд разница в столбцах делает разницу больше, чем она есть на самом деле.
В D3 много разных шкал, но я буду говорить о линейной, временной, квантовой и порядковой шкалах.
D3 ЛИНЕЙНАЯ ШКАЛА
Линейная шкала представляет собой непрерывную шкалу. Непрерывная шкала получает входной домен и сопоставляет его с выходным диапазоном, сохраняя при этом пропорциональные различия.
В приведенном выше примере кода я создаю экземпляр линейной шкалы с помощью метода scaleLinear (часть модуля d3-scale, если вы используете d3 версии 4) и связываю домен и диапазон. домен получает массив из 2 или более чисел и сопоставляет его с диапазоном. диапазон не обязательно должен быть числом, но массив также должен содержать 2 или более значений. Кроме того, обратите внимание, что вы можете передать домен, который превышает диапазон значений, указанный в домене. Выходной диапазон также будет корректно масштабироваться, поскольку масштаб не зажат и не ограничен границами заданного диапазона.
Все, что предоставляется в массиве диапазонов, если это не число, будет преобразовано в числовое значение. В приведенном выше примере я даю домен из 3 значений и диапазон из 3 цветов. Выходной диапазон регистрирует значение RGB, соответствующее тому, где домен сопоставлен с диапазоном.
Наконец, линейную шкалу можно инвертировать. Вместо того, чтобы предоставлять входной домен, инвертированная линейная шкала может получать входной диапазон, и он будет сопоставлен с выходным доменом. Это работает, только если диапазон представляет собой массив чисел. Если это не массив чисел, то выходной домен будет NaN.
ШКАЛА ВРЕМЕНИ D3
Шкала времени также является непрерывной шкалой. Он используется для сопоставления дат с числовыми значениями или наоборот. Например, допустим, мы хотим найти точную середину 2018 года.
В приведенном выше примере кода мы создаем экземпляр timeScale, вызывая метод d3.scaleTime. Затем мы предоставляем домен с 1 января 2018 года по 31 декабря 2018 года и диапазон от 1 до 100, чтобы мы могли записать в консоли процентное значение. Затем мы начинаем догадываться, что может быть точной серединой года. Как и в случае с линейной шкалой, входная область дат сопоставляется с выходным диапазоном.
Шкала времени также может быть инвертирована. Когда он инвертирован, он может получить входной диапазон и вывести домен. Таким образом, мы можем передать значение 50, чтобы получить точку середины года и другие значения. Выходной диапазон также дает нам значение времени. Шкала времени может быть полезна для поиска определенной даты в вашем домене или получения определенного значения в выходном диапазоне с учетом даты.
D3 КВАНТИРОВАТЬ МАСШТАБ
Ранее мы использовали непрерывные шкалы, в которых входная область пропорционально отображается в непрерывный выходной диапазон. Но что, если мы хотим, чтобы наш домен отображался на определенные значения в нашем диапазоне? Шкала квантования ведет себя аналогично линейной шкале, за исключением того, что она отображается в дискретном диапазоне, а не в непрерывном.
Приведенный выше пример очень похож на непрерывную шкалу. Мы хотим определить, является ли что-то горячим или холодным в зависимости от данного домена. Мы предоставляем входной домен в виде массива чисел и выходной диапазон. Но вместо этого мы используем метод scaleQuantize, который дает нам d3. Квантизация масштаба берет заданный диапазон и разбивает его на равные части пропорционально домену.
Итак, в нашем примере выше отображение больше похоже на левое. Если мы хотим точно знать, как они разбиваются, то у шкалы квантования есть собственный метод инвертирования. Для непрерывных масштабов мы использовали метод инвертировать, а для квантовых масштабов мы использовали метод invertExtent.
Инвертированный метод выводит массив области значений входного диапазона. Обратите внимание, второе значение выходного домена перекрывается с первым значением другого выходного домена. Я не уверен, почему это так.
D3 ОРДИНАЛЬНАЯ ШКАЛА
Все предыдущие шкалы использовали непрерывную область и отображали ее либо на непрерывный, либо на дискретный диапазон. Но что, если мы хотим иметь дискретную карту домена в дискретный диапазон, чтобы установить прямую связь между значениями? Порядковая шкала имеет дискретный домен и дискретный диапазон.
В приведенном выше примере мы создаем шкалу типа псевдо-NPS, чтобы показать, как дискретный домен напрямую сопоставляется с дискретным диапазоном. Порядковые шкалы полезны для нечисловых значений, которые сопоставляются с конкретными выходными значениями.
В заключении
D3 имеет много чешуек, и это только царапает поверхность. Все эти шкалы являются строительными блоками для создания таких вещей, как оси x и оси y, и имеют гораздо больше методов, чем показано здесь. Чтобы получить полную информацию, в репозитории d3 Github есть обширная документация и примеры по всем масштабам, которые может предложить d3. Каждая шкала имеет свой вариант использования, и их правильное использование важно для создания историй посредством визуализации данных.
