See here for the example code that generated this page

3D Surface Chart Examples

This page demonstrates 3D surface plots in JSPlots using Plotly.

Single and multiple surfaces: Basic 3D surface visualization with grouping
Interactive controls: Rotate, zoom, and pan to explore from all angles
Filtering: Use dropdown filters to filter data and dynamically update the surface
Color gradients: Automatic color schemes for different groups

Click and drag to rotate the 3D plots. Use scroll wheel to zoom!

Example 1: Basic 3D Surface

A simple 3D surface showing a ripple pattern. This demonstrates the basic usage with a single surface.

3D Surface: sin(√(x² + y²))

Classic ripple pattern - demonstrates basic 3D surface visualization

Plot Attributes

Aspect Ratio: 1.0 (0.25 - 2.5)

Data: surface_data

Example 2: Multiple Surfaces with Grouping

Compare different mathematical functions by grouping. Each function gets its own color gradient.

Multiple 3D Surfaces Comparison

Three different functions shown as separate colored surfaces

Plot Attributes

Aspect Ratio: 1.0 (0.25 - 2.5)

Data: multi_data

Example 3: 3D Surface with Filtering

This example demonstrates filtering capability. Use the dropdown filters to filter by distance from origin or region (quadrant). The surface updates dynamically as you adjust the filters - perfect for exploring subsets of your data!

3D Surface with Filtering

Use the filters to filter by distance from origin or region (quadrant)

Filters

region:

distance: 0 - 14.14

Plot Attributes

Aspect Ratio: 1.0 (0.25 - 2.5)

Data: filtered_data

Example 4: Shape Family Filtering

This example shows the power of filtering for exploring different mathematical families. Use the shape family filter to switch between trigonometric functions and polynomials. Within each family, you can see different shapes by color.

Shape Family Explorer

Filter by shape family to switch between trigonometric and polynomial functions

Filters

shapefamily:

Plot Attributes

Aspect Ratio: 1.0 (0.25 - 2.5)

Data: shape_data

Example 5: Wave Interference Pattern

A classic physics demonstration showing interference from two wave sources.

Wave Interference Pattern

Interference pattern from two wave sources - great for physics simulations

Plot Attributes

Aspect Ratio: 1.0 (0.25 - 2.5)

Data: wave_data

Example 6: Terrain Data from Struct Data Source

This 3D surface uses data from a struct containing multiple DataFrames. The TerrainData struct holds elevation and metadata information.

Terrain from Struct Data Source

This surface references data from a TerrainData struct using Symbol("terrain.elevation").

Plot Attributes

Aspect Ratio: 1.0 (0.25 - 2.5)

Data: terrain.elevation

Key Features Summary

Interactive 3D controls: Click and drag to rotate, scroll to zoom, shift+drag to pan
Multiple surface support: Compare different datasets on the same plot with distinct color gradients
Data filtering: Interactive multi-select dropdowns for both continuous and categorical variables (like distance, region, or shape family)
Dynamic updates: Surfaces update in real-time as you adjust filters - perfect for exploring data subsets
Scientific applications: Perfect for mathematical functions, simulations, and terrain data
Integration: Combine with other plot types, images, and text blocks

Tip: Hover over the surface to see exact x, y, z coordinates!

This page was created using JSPlots.jl v0.4.0.