Диаграмма, Поверхностная — объёмные, контурные и бесцветные поверхностные графики в IT и AI
Мы продолжаем изучать визуализацию данных. В прошлый раз мы разбирали биржевые диаграммы — свечи, объём, OHLC. Сегодня — следующий уровень: поверхностные диаграммы. Это не просто «трёхмерные картинки». Это инструмент для визуализации данных, у которых есть два независимых измерения (X и Y) и одно зависимое (Z). Температура на карте, высота ландшафта, плотность нейронной сети — всё это поверхностные данные. Мы разберём пять ключевых вариантов: Поверхностная, Объёмная поверхностная, Бесцветная объёмная поверхностная, Контурная и Бесцветная контурная.
Данные для примеров — синтетические, но реалистичные: мы сгенерировали функцию, которая имитирует ландшафт с пиками и впадинами, чтобы вы могли увидеть, как каждый тип диаграммы меняет восприятие формы. Это не абстрактная теория — это практика, которую вы сможете применить в своих проектах на JavaScript с ECharts GL.
Главная мысль: поверхностная диаграмма — это не про красоту. Это про форму данных. Научившись читать поверхности, вы сможете визуализировать любые функции от двух переменных: от потерь модели до нагрузки на серверную инфраструктуру.
Что такое поверхностная диаграмма?
Поверхностная диаграмма (surface chart) — это тип визуализации, который отображает функцию от двух переменных в виде трёхмерной поверхности. Каждая точка на поверхности имеет координаты (X, Y, Z), где X и Y — независимые измерения, а Z — значение, которое мы хотим показать. В отличие от обычного 3D-графика, поверхность соединяет точки в непрерывную «плёнку», позволяя увидеть общую форму данных: где пики, где впадины, где плато.
В ECharts для этого используется расширение ECharts GL с типом серии surface. Вы можете передать либо массив данных, либо equation — функцию, которая вычислит Z для каждого (X, Y). Второй способ компактнее и позволяет рисовать гладкие математические поверхности без хранения тысяч точек.
Важно понимать разницу между объёмной поверхностной и контурной диаграммой. Первая показывает поверхность в трёхмерном пространстве — вы видите её форму. Вторая проецирует ту же поверхность на плоскость, соединяя точки с одинаковыми значениями Z линиями. Это как карта высот: вместо того чтобы смотреть на гору сбоку, вы смотрите на неё сверху и видите изолинии.
1. Поверхностная — базовый 3D-ландшафт
Самый простой вариант. Мы строим поверхность в трёхмерном пространстве с помощью series: [{ type: 'surface', data: [...] }]. ECharts GL автоматически создаёт 3D-сетку, оси и управление камерой. Вы можете вращать график, приближать и удалять его — это встроено.
Для примера мы используем функцию z = sin(x) * cos(y) — классическую «волнистую» поверхность с чередующимися пиками и впадинами. Она хорошо демонстрирует, как выглядит поверхностная диаграмма в чистом виде: без цветового кодирования, только форма и сетка.
Когда использовать: для первичного знакомства с формой данных, когда важно увидеть общий рельеф, а не конкретные значения. Подходит для презентаций, где нужно показать «вот такая у нас функция потерь».
2. Объёмная поверхностная — цвет как значение
Добавляем цвет. В ECharts GL это делается через visualMap: вы указываете, по какому измерению красить поверхность (обычно Z), и задаёте градиент. Теперь высота точки кодируется не только положением в пространстве, но и цветом — это делает восприятие значений быстрее.
В нашем примере мы используем градиент от синего (низкие значения) через зелёный к красному (высокие значения). Это интуитивная шкала, которая работает для большинства данных: холодное — низкое, горячее — высокое.
Когда использовать: почти всегда, когда вы показываете поверхность людям. Цвет — это дополнительный канал информации, и игнорировать его — значит терять скорость восприятия. Единственное исключение — когда цвет уже занят другим смыслом.
3. Бесцветная объёмная поверхностная — форма без отвлечений
Убираем цвет. Оставляем только сетку и монохромную поверхность. Зачем? Когда цвет мешает. Например, если вы хотите наложить на поверхность дополнительные данные или если аудитория воспринимает цвет как сигнал, которого здесь нет.
В ECharts GL это делается через itemStyle.color с одним значением и отключением visualMap. Поверхность становится однотонной, и всё внимание переходит на геометрию: форму пиков, крутизну склонов, расположение впадин.
Когда использовать: для научных презентаций, где важна точность формы, а не «вау-эффект». Или когда вы строите поверхность в оттенках серого для печати. Это профессиональный, сдержанный вариант.
4. Контурная — карта высот
Переходим в двухмерное пространство. Контурная диаграмма (contour chart) — это проекция поверхности на плоскость, где вместо третьего измерения используются линии равных значений (изолинии). Это то, что вы видите на топографических картах: линии, соединяющие точки одинаковой высоты.
В ECharts для контурных диаграмм нет встроенного типа серии, но есть расширение @echarts-x/custom-contour или можно использовать custom series с собственной отрисовкой. Альтернативный подход — использовать heatmap с цветовым кодированием, но настоящие контурные линии выглядят профессиональнее.
В нашем примере мы используем custom series, который рисует изолинии для той же функции z = sin(x) * cos(y). Результат — набор замкнутых кривых, каждая из которых соответствует определённому значению Z.
Когда использовать: для данных, где важна не абсолютная высота, а градиент. Контурные линии показывают, где значения меняются быстро, а где — медленно. Это мощный инструмент для анализа ландшафтов функций потерь в машинном обучении.
5. Бесцветная контурная — чистая структура
Убираем цвет и из контурной диаграммы. Остаются только линии на нейтральном фоне. Это минималистичный вариант, который фокусирует внимание на структуре изолиний, а не на значениях. Часто используется в академических публикациях, где цвет не приветствуется или ограничен.
В нашем примере мы делаем линии чёрными (или тёмно-серыми) на светлом фоне — классический стиль научной визуализации. Вы видите чистую топологию: сколько пиков, сколько впадин, как они связаны.
Когда использовать: для публикаций, где цвет ограничен. Для быстрого анализа топологии функции. Для случаев, когда вы хотите показать «вот где здесь ямы, а вот где холмы», не вдаваясь в конкретные значения.
Что я вынес из этого разбора
- Поверхностная диаграмма — это про форму. Два входа, один выход — и вы видите рельеф данных.
- Цвет — это ускоритель. Объёмная поверхностная с visualMap читается быстрее, чем бесцветная.
- Бесцветная — не значит хуже. Иногда монохром уместнее, чем радуга.
- Контурная — это карта. Вместо того чтобы смотреть на гору сбоку, смотрите сверху.
- ECharts GL делает 3D доступным. Без WebGL-программирования вы получаете вращение, зум и цвета.
- Мобильная оптимизация важна. 3D-графики тяжелее 2D. На телефонах уменьшайте количество точек.
- Выбор типа — это компромисс. Информативность против скорости. Красота против точности.
Вердикт: стоит ли изучать поверхностные диаграммы в 2026?
Определённо да. В мире AI, где модели оперируют многомерными пространствами, умение видеть форму функции становится базовой грамотностью. Поверхностные диаграммы — это мост между абстрактной математикой и человеческим восприятием. Они позволяют увидеть ландшафт потерь, поверхность решения, карту активаций.
Лично для меня этот разбор стал открытием: оказывается, контурная диаграмма — это не «упрощённая версия 3D», а самостоятельный инструмент с собственными преимуществами. Иногда смотреть сверху полезнее, чем сбоку. И выбор между объёмной и контурной поверхностью — это выбор между «показать форму» и «показать структуру».