Ocean Salinity vs. Latitude and Longitude

Latitude: -90° 90°
Longitude: -180° 180°
Max Depth: 0m 11,000m 4000m
van2025

Suggested Prompts:

Please create a scientific visualization in a single HTML/CSS/JavaScript file
that displays a high-fidelity plot of ocean salinity as a function of depth
for a user-selected latitude and longitude.

The visualization should include:
- Realistic salinity calculation considering depth, latitude, longitude
- Color encoding with perceptually uniform scale
- High-resolution canvas plot with proper axes
- Interactive sliders for coordinates
- Real-time updates

The code will feature:

A centered 800x600px plot container with:
- A depth-responsive background gradient simulating ocean light
  with depth based attenuation using HSL colors (210, 100%, varying lightness)
- Exponential light decay calculation reaching 1% at 200m depth
- White axes and labels that remain legible against the dark background

A salinity curve with:
- 3px stroke width
- Gradient coloring from red to green to blue
- Smooth interpolation between data points

A legend under the main plot:
- 'Salinity (PSU)' title
- Gradient color bar
- PSU values 38, 35, and 32

A scrollable prompts history section below the plot:
- 800px width
- White background
- Showing original project prompts with proper formatting

Please implement this as a single, self-contained HTML file
with embedded CSS and JavaScript, using clean, modular code structure
and smooth transitions.
All elements should be responsive and centered within a white container
on a light green background.

Add depth-based background gradient, center all elements, add watermark,
and include scrolling prompt history showing project evolution.

Version Notes:
This was a 20 shot effort using:
deepseek-r1
Claude Sonnet-3.5-200k
Gemini Advanced 1.5 Experimental
ChatGPT o1
feeding successive versions to each other when one would fail out.