3D charts
This section gathers the PortLAB 3D visualisation tool (func3d) and its reference pages. The tool renders, in the browser via WebGL, analytic functions and numerical data of various kinds: surfaces, point clouds, vector fields, animated time series. This page is the introductory manual.
What it is
func3d is an interactive 3D scene editor aimed at research data: you compose one or more series (functions or datasets), control their appearance, colour and scales, and explore the scene with the mouse (orbit rotation, zoom, pan). Rendering uses three.js (WebGL) and stays fluid even with dense grids and thousands of points. Everything happens in the browser: no data leaves the page, except when using the administered datasets stored in the portal database.
Series types
| Type | Source | Description |
|---|---|---|
| Analytic surface | function z = f(x, y) | Predefined functions with adjustable parameters (Sinc, Gaussian, Rosenbrock, Ackley, Bessel J0...); closed surfaces (ellipsoid, torus, hyperboloid...) are drawn with their upper and lower branches. |
| Parametric surface | function (u, v) → (x, y, z) | Objects that cannot be expressed as z(x,y): spherical harmonics and hybrid orbitals, Möbius strip, knotted tori, Klein bottle, minimal surfaces (catenoid↔helicoid), surfaces of revolution; true proportions, colour by height or by the u/v parameter. |
| Parametric curve | function t → (x, y, z) | Curves that may pass over the same point of the plane more than once — a helix, a trefoil knot, a Lorenz trajectory — and that therefore no height field could represent. Colour follows the parameter t, which also shows the direction of travel; line thickness in real pixels. |
| Image plane | image from the registry | A textured rectangle on one of the three coordinate planes, movable along its own normal: it puts a photograph, a map or a scan next to the data, at the right height. Not to be confused with draping, which lays the image onto the surface. |
| Surface from data | dataset (grid or scattered points) | The data is made samplable by an interpolation method (11 methods: from nearest and IDW to RST, kriging and natural neighbour) and drawn as a continuous surface. |
| Point cloud | rows [x, y, z, c] or [x, y, z, c₁, c₂] | Each point carries a value c that sets its colour; with double encoding a second value c₂ sets its size. |
| Vector field (quiver) | rows [x, y, z, u, v, w] | 3D arrows with cone tips: length proportional to the magnitude, colour from the magnitude on the colormap, adjustable scale. |
| Time series | frame-based dataset | Grids or clouds evolving in time: frame slider, Play/Pause with adjustable speed and, for clouds, particle trails with fading tails. |
Display options
- Colour: predefined colormaps (viridis, magma, turbo, coolwarm...) or custom ones built with the gradient designer (colour and opacity stops, in a modal window: the side column would leave the stops no room); per-series colour scales — linear, logarithmic or diverging, with optional min/max clamping; per-series colorbar with adjustable tick count and a size legend for double-encoded clouds.
- Surface: surface/wireframe mode (true line thickness via fat lines), opacity, per-series z scale.
- Axes and box: tick labels in real data values, per-axis view ranges, XY/XZ/YZ grid planes with step and colour, background, draggable title and legend.
- Visible range: six bounds (one per end of each axis) clip the view into a box without touching the data: useful to look inside a closed surface or to isolate a band of heights. Axes and grids stay whole, so the reference is not lost, and the interface warns when a clip is active — a clipped surface with no warning would look like a drawing defect.
- Isolines and bands: level curves on the surface and/or projected onto the base plane, with automatic levels (N between min and max) or a custom list; optional filled bands (stepped surface colours + filled map on the base plane).
- 2D section: a cut of the domain (x = const, y = const or an arbitrary segment) with the profile of the visible surfaces in a linked 2D panel, a cutting plane indicator in the 3D scene and a crosshair with values. Details in Data analysis.
- Shared colour scale: one switch forces the same bounds on every surface (the union of their ranges, or two values typed by hand). It is what makes comparison possible: with different scales the same colour means two different values, and comparing by eye is a lie. Point clouds and vector fields keep their own scale.
- Thematic mapping by another quantity: the shape stays the height, while the colour can come from another column of the data — a concentration, a date, a measurement error. The column is interpolated on the same grid and with the same method as the height, and the legend says which quantity it shows.
- Number formats: besides fixed, scientific, SI, locale and percentage there
is the sprintf mode, with the pattern written out
(
%+.1f,%.2e,%d m): the same grammar as the other charts of the portal, available on the ticks of the three axes and on the legend labels. - Scene: the Scene tab of the General settings gathers everything that does not belong to a single series — mouse controls (rotate, zoom, pan, damping), camera (field of view and distance), lights (ambient and directional), a separate typeface for the title, the legend and the axes, label opacity, an axis compass in a corner. One button restores the defaults by reading them from the form itself, so they are not duplicated in the code.
- Colour mode: gradient (the continuous colormap), flat (a single colour, useful when comparing two overlapping surfaces) and classes, with the classification methods of thematic cartography: natural breaks (Jenks, exact optimum), equal intervals, quantiles, standard deviation, pretty numbers, logarithmic, fixed step. The class table shows bounds and counts. You can also choose which coordinate drives the colour (height z, or x or y). Changing colours does not rebuild the surface: vertices are recoloured in place, so the response is immediate even on dense grids.
- Time animation: frame slider, Play with adjustable fps, previous/next frame, trails for clouds.
Importing data
From the Import/Export panel you can load your own CSV/TSV data (from file or pasted from the clipboard): the parser autodetects the delimiter and the decimal separator (including Italian CSV with semicolons and decimal commas) and proposes a mapping of the columns onto the roles x, y, z, c, c₂, t, group, u, v, w. Depending on the chosen roles you get surfaces, clouds, vector fields or time series, possibly multiple ones (group column). Administered datasets, stored in the portal database, appear instead directly among the available series according to your profile (see Functions and data series).
Exporting and sharing
- PNG at high resolution (scale factor), complete with colorbars and legends;
- CSV of the current data (sampled grid or points of the current frame);
- WebM: video recording of the time animation, legend included;
- JSON configuration (export/import the whole scene state);
- SVG of the scene with every readable element in vector form: title, axis labels, values, legend frame and colorbars come out as text and gradients rather than pixels — they open in Inkscape or Illustrator, can be corrected and print at any size. The 3D surface stays an embedded image (tens of thousands of shaded triangles: in vector form it would weigh megabytes and look worse), but whoever wants those megabytes has the Scene in vector form switch, which draws the triangles too;
- Section profile SVG: the 2D cut exported as a vector drawing, axes and labels included;
- Measurement log CSV: every measurement taken on the chart (distances, height differences, slopes, volumes) with its context;
- Shareable link: the full state compressed into the URL — whoever opens the link sees the same scene, camera included.
Data analysis
The analysis mode lets you read real values on the chart: a marker with snapping (vertex, barycentre, grid, locked direction), a tooltip on hover, highlighting of triangles and isocurves, a linked 2D section. The complete reference is in Data analysis.
Data administration
Built-in functions and datasets live in the code (versioned JavaScript files); administered datasets and managed functions (expressions written by the administrator directly in the func3d page) live in the database and are managed from the dedicated console (gest → database → func3d data): creation and editing of payloads, per-profile publication, enabling. Per-profile visibility also applies to file-based items. How to write new functions or datasets is explained in Functions and data series.
The pages of this section
- func3d — the tool;
- User manual — every section of the interface explained, with pictures;
- Functions and data series — what is there and how to extend it;
- Interpolation — the available methods and the comparison with GRASS GIS;
- Data analysis — value reading, snapping, highlights, 2D section;
- The three.js library — the technological base and possible developments.
Keywords: 3D charts, data visualisation, surfaces, point clouds, vector fields, Three.js, WebGL, manual