Визуализация данных

Two.js — это библиотека для 2D-графики на JavaScript, которая позволяет создавать интерактивные визуализации с использованием Canvas, SVG или WebGL. Центральным элементом является экземпляр Two, который управляет сценой и всеми объектами на ней.

Создание сцены начинается с инициализации объекта Two с указанием размеров и метода рендеринга:

const params = { width: 800, height: 600, type: Two.Types.canvas };
const two = new Two(params).appendTo(document.body);

Здесь width и height задают размеры холста, а type определяет тип рендеринга (canvas, svg или webgl). После создания сцены можно добавлять фигуры и линии.

Прямоугольники, круги и линии

Two.js предоставляет методы для создания базовых фигур:

const circle = two.makeCircle(150, 150, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;

const rectangle = two.makeRectangle(400, 150, 100, 50);
rectangle.fill = '#00BFFF';
rectangle.stroke = '#000000';
rectangle.linewidth = 2;

const line = two.makeLine(50, 300, 750, 300);
line.stroke = '#228B22';
line.linewidth = 3;

Каждая фигура имеет позицию, размер и стиль, который можно динамически изменять. Это позволяет строить интерактивные диаграммы и графики, меняя свойства объектов в реальном времени.

Работа с группами объектов

Для упрощения управления несколькими элементами Two.js поддерживает группы. Группа позволяет перемещать, вращать или масштабировать набор фигур одновременно:

const group = two.makeGroup(circle, rectangle);
group.translation.set(100, 50);
group.rotation = Math.PI / 8;

Использование групп облегчает построение комплексных визуализаций, таких как графы, диаграммы связей и интерактивные панели данных.

Добавление текста

Визуализация данных часто требует подписей и меток. Two.js поддерживает текстовые объекты:

const label = two.makeText('Продажи Q1', 400, 500, { size: 24, family: 'Arial', fill: '#333' });

Параметры позволяют задавать размер шрифта, шрифт, цвет текста и позицию. Текст можно группировать с фигурами для создания подписанных элементов графиков.

Анимация и обновление сцены

Two.js позволяет легко создавать анимации. Для этого используется метод two.update() и встроенный метод two.bind('update', callback):

two.bind('update', function(frameCount) {
  circle.rotation += 0.02;
  rectangle.scale = 1 + 0.5 * Math.sin(frameCount * 0.05);
}).play();
  • frameCount — количество прошедших кадров
  • Динамическое изменение свойств объектов обеспечивает плавные визуальные эффекты
  • Метод play() запускает анимацию и рендеринг сцены

Визуализация данных с помощью линий и графиков

Линейные графики строятся путем соединения точек через Two.Path. Для примера:

const data = [10, 25, 15, 40, 30];
const pathPoints = data.map((value, i) => new Two.Anchor(i * 100 + 50, 500 - value * 10));
const path = two.makePath(pathPoints, false);
path.stroke = '#FF4500';
path.linewidth = 3;
path.noFill();
  • Массив data преобразуется в массив объектов Two.Anchor
  • makePath создает линию через заданные точки
  • Использование noFill() делает график прозрачным внутри, отображая только линии

Для построения столбчатых диаграмм удобно использовать прямоугольники в цикле:

data.forEach((value, i) => {
  const bar = two.makeRectangle(50 + i * 100, 500 - value * 5 / 2, 50, value * 5);
  bar.fill = '#1E90FF';
  bar.noStroke();
});

Это позволяет визуализировать набор данных с равномерным распределением по оси X.

Цветовые градиенты и стили

Two.js поддерживает динамическое изменение цветов объектов, что полезно для тепловых карт или градиентных визуализаций:

circle.fill = `rgb(${Math.floor(255 * Math.random())}, 100, 150)`;
rectangle.fill = '#32CD32';

Для сложных визуализаций можно применять анимацию цветов через update:

two.bind('update', function(frameCount) {
  rectangle.fill = `rgb(${(frameCount * 2) % 255}, 100, 200)`;
});

Интерактивность и события

Two.js позволяет отслеживать события мыши и взаимодействие с объектами:

circle._renderer.elem.addEventListener('click', () => {
  circle.fill = '#FFD700';
});
  • _renderer.elem — это DOM-элемент, используемый рендерером
  • Любой объект можно сделать интерактивным
  • События мыши позволяют строить дашборды и визуализации с динамическим откликом

Примеры комплексных визуализаций

Комбинация всех элементов позволяет создавать графики, диаграммы и инфографику:

  • Линейные графики с анимированными точками и подписанными осями
  • Столбчатые диаграммы с динамическими цветами и всплывающими подсказками
  • Круговые диаграммы с анимацией сегментов и текстовыми метками

Two.js объединяет возможности Canvas, SVG и WebGL, обеспечивая высокую производительность и гибкость при работе с интерактивной 2D-графикой.

Оглавление