Charts: Surface — 3D Surface, Plotless 3D Surface, Contour and Plotless Contour in IT and AI
We continue exploring data visualization. Last time we broke down stock charts — candlesticks, volume, OHLC. Today we move to the next level: surface charts. These are not just "3D pictures". They are a tool for visualizing data with two independent dimensions (X and Y) and one dependent dimension (Z). Temperature on a map, terrain elevation, neural network density — all of these are surface data. We will break down five key variants: Surface, 3D Surface, Plotless 3D Surface, Contour, and Plotless Contour.
The data used in the examples is synthetic but realistic: we generated a function that mimics a landscape with peaks and valleys so you can see how each chart type changes the perception of shape. This is not abstract theory — it is practice you can apply in your own JavaScript projects with ECharts GL.
Key idea: a surface chart is not about beauty. It is about the shape of data. Once you learn to read surfaces, you can visualize any function of two variables — from model loss to server infrastructure load.
What Is a Surface Chart?
A surface chart is a type of visualization that displays a function of two variables as a three-dimensional surface. Each point on the surface has coordinates (X, Y, Z), where X and Y are the independent dimensions and Z is the value we want to show. Unlike a regular 3D plot, a surface connects points into a continuous "film", allowing you to see the overall shape of the data: where the peaks are, where the valleys are, where the plateaus are.
In ECharts, this is done using the ECharts GL extension with the surface series type. You can pass either a data array or an equation — a function that computes Z for each (X, Y). The second approach is more compact and allows you to draw smooth mathematical surfaces without storing thousands of points.
It is important to understand the difference between a 3D surface and a contour chart. The first shows the surface in three-dimensional space — you see its shape. The second projects the same surface onto a plane, connecting points with the same Z values with lines. It is like a topographic map: instead of looking at a mountain from the side, you look at it from above and see contour lines.
1. Surface — Basic 3D Landscape
The simplest variant. We build a surface in three-dimensional space using series: [{ type: 'surface', data: [...] }]. ECharts GL automatically creates the 3D grid, axes, and camera controls. You can rotate, zoom in, and zoom out of the chart — this is built in.
For the example we use the function z = sin(x) * cos(y) — a classic "wavy" surface with alternating peaks and valleys. It clearly demonstrates what a surface chart looks like in its pure form: without color coding, only shape and grid.
When to use: for a first introduction to the shape of data, when it is important to see the overall relief rather than specific values. Suitable for presentations where you need to show "here is our loss function".
2. 3D Surface — Color as Value
Add color. In ECharts GL this is done via visualMap: you specify which dimension to color the surface by (usually Z) and set a gradient. Now the height of a point is encoded not only by its position in space but also by its color — this makes value perception faster.
In our example we use a gradient from blue (low values) through green to red (high values). This is an intuitive scale that works for most data: cold is low, hot is high.
When to use: almost always, when you show a surface to people. Color is an additional information channel, and ignoring it means losing perception speed. The only exception is when color is already occupied with another meaning.
3. Plotless 3D Surface — Form Without Distraction
Remove the color. Leave only the grid and a monochrome surface. Why? Because color can get in the way. For example, if you want to overlay additional data on the surface, or if the audience perceives color as a signal that is not present here.
In ECharts GL this is done via itemStyle.color with a single value and disabling visualMap. The surface becomes monochrome, and all attention shifts to geometry: the shape of peaks, the steepness of slopes, the location of valleys.
When to use: for scientific presentations where accuracy of form matters more than "wow effect". Or when you build a surface in shades of gray for printing. It is a professional, restrained variant.
4. Contour — A Map of Elevations
We move into two-dimensional space. A contour chart is a projection of a surface onto a plane, where instead of a third dimension, lines of equal values (contour lines) are used. This is what you see on topographic maps: lines connecting points of equal elevation.
In ECharts there is no built-in series type for contour charts, but there is the @echarts-x/custom-contour extension, or you can use a custom series with your own rendering. An alternative approach is to use a heatmap with color coding, but true contour lines look more professional.
In our example we use a custom series that draws contour lines for the same function z = sin(x) * cos(y). The result is a set of closed curves, each corresponding to a specific Z value.
When to use: for data where not the absolute height matters but the gradient. Contour lines show where values change quickly and where they change slowly. This is a powerful tool for analyzing loss function landscapes in machine learning.
5. Plotless Contour — Pure Structure
Remove color from the contour chart as well. Only lines remain on a neutral background. This is a minimalist variant that focuses attention on the structure of the isolines rather than on the values. It is often used in academic publications where color is not welcome or is limited.
In our example we make the lines black (or dark gray) on a light background — a classic style of scientific visualization. You see pure topology: how many peaks, how many valleys, how they are connected.
When to use: for publications where color is limited. For quickly analyzing the topology of a function. For cases when you want to show "here are the pits, here are the hills" without going into specific values.
What I Took Away From This Breakdown
- A surface chart is about shape. Two inputs, one output — and you see the relief of the data.
- Color is an accelerator. A 3D surface with visualMap is read faster than a plotless one.
- Plotless does not mean worse. Sometimes monochrome is more appropriate than a rainbow.
- Contour is a map. Instead of looking at a mountain from the side, look at it from above.
- ECharts GL makes 3D accessible. Without WebGL programming you get rotation, zoom and colors.
- Mobile optimization matters. 3D charts are heavier than 2D. On phones, reduce the number of points.
- Type choice is a compromise. Informativeness versus speed. Beauty versus accuracy.
Verdict: Is It Worth Learning Surface Charts in 2026?
Definitely yes. In the world of AI, where models operate in multidimensional spaces, the ability to see the shape of a function becomes basic literacy. Surface charts are a bridge between abstract mathematics and human perception. They allow you to see the loss landscape, the decision surface, the activation map.
For me personally, this breakdown was a discovery: it turns out a contour chart is not a "simplified version of 3D" but an independent tool with its own advantages. Sometimes looking from above is more useful than looking from the side. And the choice between 3D and contour surfaces is a choice between "showing form" and "showing structure".