As always this proposal is far from being perfect so let me know your thoughts or any questions you might have
The code
import pandas as pd
import plotly.graph_objects as go
from dash import Dash, dcc, html, Input, Output, State, dash_table
import dash_bootstrap_components as dbc
import numpy as np
from scipy.interpolate import griddata
import plotly.express as px
— 1. Data Loading and Preparation —
try:
df = pd.read_csv(“model-grid-subsample.csv”)
# Filter data to eliminate points above ground
df = df[df.dem_m > df.zkm * 1e3]
# Round depths for discrete slider points
df['zm_depth_rounded'] = (df['zm_depth'] / 5).round() * 5
# Get ranges for sliders
min_lat, max_lat = df['Latitude'].min(), df['Latitude'].max()
min_lon, max_lon = df['Longitude'].min(), df['Longitude'].max()
min_depth, max_depth = df['zm_depth'].min(), df['zm_depth'].max()
# Determine unique depths for the slider
available_depths = sorted(df['zm_depth_rounded'].unique())
if len(available_depths) > 100:
available_depths = np.linspace(min_depth, max_depth, 100).round(0).astype(int)
available_depths = sorted(list(set(available_depths)))
# Enhanced parameter information with risk levels and interpretations
param_info = {
'mean_tds': {
'name': 'Total Dissolved Solids (TDS)',
'short_name': 'Salinity',
'unit': 'mg/L',
'desc': 'Measures the total amount of dissolved substances in water. Higher values indicate saltier water.',
'interpretation': 'High TDS can indicate saltwater intrusion, contamination, or natural mineral dissolution.',
'thresholds': {'excellent': 300, 'good': 600, 'poor': 1000, 'very_poor': 2000},
'color_scale': 'Reds',
'icon': 'fas fa-tint'
},
'mean_temp': {
'name': 'Temperature',
'short_name': 'Temperature',
'unit': '°C',
'desc': 'Water temperature affects chemical reactions and biological processes underground.',
'interpretation': 'Temperature anomalies can indicate geothermal activity or surface water infiltration.',
'thresholds': {'cold': 10, 'cool': 15, 'normal': 20, 'warm': 25},
'color_scale': 'RdYlBu_r',
'icon': 'fas fa-thermometer-half'
},
'mean_res': {
'name': 'Electrical Resistivity',
'short_name': 'Resistivity',
'unit': 'Ohm-m',
'desc': 'Measures how well the material resists electrical current. Lower values indicate higher salinity.',
'interpretation': 'Low resistivity suggests high salt content or contamination.',
'thresholds': {'very_low': 1, 'low': 10, 'moderate': 100, 'high': 1000},
'color_scale': 'Viridis',
'icon': 'fas fa-bolt'
},
'mean_por': {
'name': 'Porosity',
'short_name': 'Porosity',
'unit': '%',
'desc': 'Percentage of empty space in rock or sediment that can hold water.',
'interpretation': 'Higher porosity means more water storage capacity.',
'thresholds': {'very_low': 5, 'low': 15, 'moderate': 25, 'high': 35},
'color_scale': 'Blues',
'icon': 'fas fa-circle-notch'
},
'mean_bicarb': {
'name': 'Bicarbonate (HCO₃⁻)',
'short_name': 'Bicarbonate',
'unit': 'mg/L',
'desc': 'Common ion that affects water pH and hardness. Part of natural buffering system.',
'interpretation': 'Moderate levels are normal. Very high levels may indicate specific geological conditions.',
'thresholds': {'low': 100, 'moderate': 300, 'high': 500, 'very_high': 800},
'color_scale': 'Greens',
'icon': 'fas fa-atom'
}
}
# Calculate statistics for each parameter
param_stats = {}
for param in param_info.keys():
param_stats[param] = {
'min': df[param].min(),
'max': df[param].max(),
'mean': df[param].mean(),
'std': df[param].std(),
'median': df[param].median()
}
except FileNotFoundError:
print(“Error: ‘model-grid-subsample.csv’ not found. Please ensure the file is in the correct path.”)
exit()
— 2. Helper Functions —
def get_quality_category(value, thresholds):
“”“Categorize parameter values based on thresholds”“”
if ‘excellent’ in thresholds:
if value <= thresholds[‘excellent’]:
return ‘Excellent’
elif value <= thresholds[‘good’]:
return ‘Good’
elif value <= thresholds[‘poor’]:
return ‘Poor’
else:
return ‘Very Poor’
else:
# For other parameters, use descriptive categories
thresh_keys = list(thresholds.keys())
for i, key in enumerate(thresh_keys):
if value <= thresholds[key]:
return key.title()
return thresh_keys[-1].title()
def create_summary_stats_table(param, depth):
“”“Create a summary statistics table for the selected parameter and depth”“”
filtered_df = df[df[‘zm_depth_rounded’] == depth]
if filtered_df.empty:
return dbc.Alert(“No data available for this depth”, color=“warning”)
stats = filtered_df[param].describe()
return dash_table.DataTable(
data=[
{'Statistic': 'Count', 'Value': f"{stats['count']:.0f}"},
{'Statistic': 'Mean', 'Value': f"{stats['mean']:.2f}"},
{'Statistic': 'Median', 'Value': f"{stats['50%']:.2f}"},
{'Statistic': 'Std Dev', 'Value': f"{stats['std']:.2f}"},
{'Statistic': 'Min', 'Value': f"{stats['min']:.2f}"},
{'Statistic': 'Max', 'Value': f"{stats['max']:.2f}"},
],
columns=[{'name': 'Statistic', 'id': 'Statistic'}, {'name': 'Value', 'id': 'Value'}],
style_cell={'textAlign': 'left', 'fontSize': '12px', 'padding': '8px'},
style_header={'backgroundColor': '#3498DB', 'color': 'white', 'fontWeight': 'bold'},
style_data={'backgroundColor': '#F8F9FA'},
style_table={'height': '200px', 'overflowY': 'auto'}
)
— 3. Dash App Initialization —
app = Dash(name, external_stylesheets=[
dbc.themes.MINTY,
“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css”
])
app.title=‘Groundwater Salinity Dashboard’
— 4. Enhanced Layout with Bootstrap Cards —
app.layout = dbc.Container([
# Header Section
dbc.Row([
dbc.Col([
html.H1([
html.I(className=“fas fa-water me-3”, style={‘color’: ‘#3498DB’}),
“Groundwater Quality Explorer”
], className=“text-center mb-3”, style={‘color’: ‘#2C3E50’}),
html.P(“Interactive visualization of groundwater properties across different depths and locations”,
className=“text-center text-muted mb-4”, style={‘fontSize’: ‘18px’}),
])
], className=“mb-4”),
# Quick Stats Cards Row
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H4([
html.I(className="fas fa-chart-bar me-2", style={'color': '#3498DB'}),
"Quick Stats"
], className="card-title"),
html.P(f"Total Data Points: {len(df):,}", className="mb-1"),
html.P(f"Depth Range: {min_depth:.0f}m - {max_depth:.0f}m", className="mb-1"),
html.P(f"Area Coverage: {(max_lat-min_lat):.3f}° × {(max_lon-min_lon):.3f}°", className="mb-0"),
])
], color="light", outline=True, className="h-100")
], width=4),
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H4([
html.I(className="fas fa-compass me-2", style={'color': '#E74C3C'}),
"How to Use"
], className="card-title"),
html.P("1. Select a parameter to visualize", className="mb-1"),
html.P("2. Choose depth for horizontal view", className="mb-1"),
html.P("3. Set cut line for vertical cross-section", className="mb-0"),
])
], color="light", outline=True, className="h-100")
], width=4),
dbc.Col([
dbc.Card([
dbc.CardBody([
html.H4([
html.I(className="fas fa-exclamation-triangle me-2", style={'color': '#F39C12'}),
"Data Quality"
], className="card-title"),
html.P("This is model-predicted data", className="mb-1"),
html.P("Use for exploratory analysis", className="mb-1"),
html.P("Verify with field measurements", className="mb-0"),
])
], color="light", outline=True, className="h-100")
], width=4),
], className="mb-4"),
# Parameter Selection Card
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader([
html.H3([
html.I(className="fas fa-cog me-2", style={'color': '#2C3E50'}),
"Parameter Selection"
], className="mb-0")
]),
dbc.CardBody([
dbc.Row([
dbc.Col([
dbc.Label("Select Parameter:", className="fw-bold mb-2"),
dcc.Dropdown(
id='main-param-dropdown',
options=[{'label': f"{info['name']} ({info['unit']})", 'value': key}
for key, info in param_info.items()],
value='mean_tds',
clearable=False,
className="mb-2"
),
], width=6),
dbc.Col([
dbc.Label("Parameter Information:", className="fw-bold mb-2"),
dbc.Card([
dbc.CardBody(id='param-info-display', className="p-3")
], color="info", outline=True)
], width=6),
])
])
])
])
], className="mb-4"),
# Horizontal View Card
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader([
html.H3([
html.I(className="fas fa-map me-2", style={'color': '#2C3E50'}),
"Horizontal View (Map at Fixed Depth)"
], className="mb-0")
]),
dbc.CardBody([
dbc.Row([
dbc.Col([
dbc.Label("Select Depth:", className="fw-bold mb-2"),
dcc.Slider(
id='depth-slider',
min=min(available_depths),
max=max(available_depths),
step=5,
value=min(available_depths) if available_depths else 0,
marks={str(int(d)): {'label': f'{int(d)}m', 'style': {'fontSize': '12px'}}
for d in available_depths[::max(1, len(available_depths)//8)]},
tooltip={"placement": "bottom", "always_visible": True},
className="mb-3"
),
], width=8),
dbc.Col([
dbc.Label("Statistics at This Depth:", className="fw-bold mb-2"),
html.Div(id='depth-stats-table')
], width=4),
], className="mb-3"),
dcc.Graph(
id='horizontal-slice-map',
config={'displayModeBar': True, 'scrollZoom': True},
style={'height': '600px'}
),
dbc.Alert(id='horizontal-slice-info', color="info", className="mt-3")
])
])
])
], className="mb-4"),
# Vertical Cross-Section Card
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader([
html.H3([
html.I(className="fas fa-layer-group me-2", style={'color': '#2C3E50'}),
"Vertical Cross-Section (Depth Profile)"
], className="mb-0")
]),
dbc.CardBody([
dbc.Row([
dbc.Col([
dbc.Label("Cross-Section Type:", className="fw-bold mb-2"),
dbc.RadioItems(
id='cut-type-radio',
options=[
{'label': [html.I(className="fas fa-arrows-alt-h me-2"), 'East-West Cut (Fixed Latitude)'], 'value': 'lat'},
{'label': [html.I(className="fas fa-arrows-alt-v me-2"), 'North-South Cut (Fixed Longitude)'], 'value': 'lon'}
],
value='lat',
className="mb-3"
)
], width=4),
dbc.Col([
dbc.Label("Cut Position:", className="fw-bold mb-2"),
dcc.Slider(
id='cut-value-slider',
min=min_lat,
max=max_lat,
step=0.01,
value=df['Latitude'].mean(),
marks={round(v, 2): {'label': str(round(v, 2)), 'style': {'fontSize': '12px'}}
for v in np.linspace(min_lat, max_lat, 5).round(2)},
tooltip={"placement": "bottom", "always_visible": True},
className="mb-3"
),
], width=8),
]),
dcc.Graph(
id='vertical-slice-plot',
config={'displayModeBar': True},
style={'height': '600px'}
),
dbc.Alert(id='vertical-slice-info', color="info", className="mt-3")
])
])
])
], className="mb-4"),
# Parameter Reference Cards Row
dbc.Row([
dbc.Col([
html.H3([
html.I(className="fas fa-book me-2", style={'color': '#2C3E50'}),
"Parameter Reference Guide"
], className="text-center mb-4")
])
]),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader([
html.H5([
html.I(className=info['icon'] + " me-2", style={'color': '#3498DB'}),
info['name']
], className="mb-0")
]),
dbc.CardBody([
dbc.Badge(f"Units: {info['unit']}", color="primary", className="mb-2"),
html.P(info['desc'], className="mb-2", style={'fontSize': '14px'}),
html.P([
html.I(className="fas fa-lightbulb me-1", style={'color': '#F39C12'}),
info['interpretation']
], className="mb-2", style={'fontSize': '13px', 'fontStyle': 'italic'}),
dbc.Card([
dbc.CardBody([
html.P("Quality Thresholds:", className="fw-bold mb-2", style={'fontSize': '12px'}),
html.Ul([
html.Li(f"{k.title()}: {v} {info['unit']}", style={'fontSize': '11px'})
for k, v in info['thresholds'].items()
], className="mb-0")
])
], color="light", className="mt-2")
])
], className="h-100")
], width=12//5) for key, info in param_info.items()
], className="mb-4"),
# Footer
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
html.P([
html.I(className="fas fa-flask me-2", style={'color': '#7F8C8D'}),
"Dasbooard Developed usin Plotly/Dash | ",
html.I(className="fas fa-target me-2", style={'color': '#7F8C8D'}),
"Thank you to USGS for the data Purpose: Exploratory analysis"
], className="text-center mb-0", style={'color': '#7F8C8D'})
])
], color="dark", className="text-white")
])
])
], fluid=True, className=“py-3”)
— 5. Enhanced Callbacks —
@app.callback(
Output(‘param-info-display’, ‘children’),
Input(‘main-param-dropdown’, ‘value’)
)
def update_param_info(selected_param):
if selected_param:
info = param_info[selected_param]
return html.Div([
html.P([
html.I(className=“fas fa-info-circle me-2”, style={‘color’: ‘#3498DB’}),
info[‘desc’]
], className=“mb-2”),
html.P([
html.I(className=“fas fa-lightbulb me-2”, style={‘color’: ‘#F39C12’}),
info[‘interpretation’]
], className=“mb-0”, style={‘fontStyle’: ‘italic’})
])
return “Select a parameter to see details”
@app.callback(
Output(‘depth-stats-table’, ‘children’),
Input(‘main-param-dropdown’, ‘value’),
Input(‘depth-slider’, ‘value’)
)
def update_depth_stats(selected_param, selected_depth):
if selected_param and selected_depth:
return create_summary_stats_table(selected_param, selected_depth)
return dbc.Alert(“Select parameters to see statistics”, color=“secondary”)
@app.callback(
Output(‘cut-value-slider’, ‘min’),
Output(‘cut-value-slider’, ‘max’),
Output(‘cut-value-slider’, ‘step’),
Output(‘cut-value-slider’, ‘value’),
Output(‘cut-value-slider’, ‘marks’),
Input(‘cut-type-radio’, ‘value’)
)
def update_cut_slider_ranges(cut_type):
if cut_type == ‘lat’:
min_val, max_val = df[‘Latitude’].min(), df[‘Latitude’].max()
step = 0.005
marks = {round(v, 3): {‘label’: str(round(v, 3)), ‘style’: {‘fontSize’: ‘12px’}}
for v in np.linspace(min_val, max_val, 7).round(3)}
value = df[‘Latitude’].mean()
else:
min_val, max_val = df[‘Longitude’].min(), df[‘Longitude’].max()
step = 0.005
marks = {round(v, 3): {‘label’: str(round(v, 3)), ‘style’: {‘fontSize’: ‘12px’}}
for v in np.linspace(min_val, max_val, 7).round(3)}
value = df[‘Longitude’].mean()
return min_val, max_val, step, value, marks
@app.callback(
Output(‘horizontal-slice-map’, ‘figure’),
Output(‘horizontal-slice-info’, ‘children’),
Input(‘depth-slider’, ‘value’),
Input(‘main-param-dropdown’, ‘value’)
)
def update_horizontal_slice(selected_depth, selected_prop):
filtered_df = df[df[‘zm_depth_rounded’] == selected_depth].copy()
fig = go.Figure()
if not filtered_df.empty:
info = param_info[selected_prop]
# Create interpolated surface
grid_lat = np.linspace(filtered_df['Latitude'].min(), filtered_df['Latitude'].max(), 80)
grid_lon = np.linspace(filtered_df['Longitude'].min(), filtered_df['Longitude'].max(), 80)
points = filtered_df[['Latitude', 'Longitude']].values
values = filtered_df[selected_prop].values
grid_data = griddata(points, values, (grid_lat[None,:], grid_lon[:,None]), method='cubic')
fig.add_trace(go.Heatmap(
x=grid_lon,
y=grid_lat,
z=grid_data,
colorscale=info['color_scale'],
colorbar=dict(
title=f"{info['short_name']}<br>({info['unit']})",
titleside='right',
thickness=15,
len=0.7
),
hovertemplate='<b>Latitude:</b> %{y:.4f}<br><b>Longitude:</b> %{x:.4f}<br><b>' +
info['short_name'] + ':</b> %{z:.2f} ' + info['unit'] + '<extra></extra>'
))
# Add sample points
fig.add_trace(go.Scatter(
x=filtered_df['Longitude'],
y=filtered_df['Latitude'],
mode='markers',
marker=dict(size=4, color='white', opacity=0.8, line=dict(width=1, color='black')),
name='Sample Points',
hovertemplate='<b>Sample Point</b><br>Lat: %{y:.4f}<br>Lon: %{x:.4f}<br>' +
info['short_name'] + ': %{text}<extra></extra>',
text=[f"{val:.2f} {info['unit']}" for val in filtered_df[selected_prop]]
))
fig.update_layout(
title=f"{info['name']} at {selected_depth}m Depth",
xaxis_title="Longitude",
yaxis_title="Latitude",
margin={"r":60,"t":60,"l":60,"b":60},
hovermode='closest',
showlegend=True,
height=500,
plot_bgcolor='white'
)
# Statistics info
mean_val = filtered_df[selected_prop].mean()
std_val = filtered_df[selected_prop].std()
count = len(filtered_df)
info_text = [
html.I(className="fas fa-chart-bar me-2"),
f"{count} data points | Mean: {mean_val:.2f} {info['unit']} | Std Dev: {std_val:.2f} {info['unit']}"
]
else:
fig.add_annotation(
text="No data available for this depth<br>Try selecting a different depth",
xref="paper", yref="paper", x=0.5, y=0.5,
showarrow=False, font=dict(size=16, color='gray')
)
fig.update_layout(
title="No Data Available",
xaxis_title="Longitude",
yaxis_title="Latitude",
margin={"r":60,"t":60,"l":60,"b":60},
plot_bgcolor='white'
)
info_text = [html.I(className="fas fa-exclamation-triangle me-2"), "No data available for the selected depth"]
return fig, info_text
@app.callback(
Output(‘vertical-slice-plot’, ‘figure’),
Output(‘vertical-slice-info’, ‘children’),
Input(‘main-param-dropdown’, ‘value’),
Input(‘cut-type-radio’, ‘value’),
Input(‘cut-value-slider’, ‘value’)
)
def update_vertical_slice(selected_prop, cut_type, cut_value):
fig = go.Figure()
tolerance = 0.01
if cut_type == 'lat':
filtered_df = df[(df['Latitude'] >= cut_value - tolerance) &
(df['Latitude'] <= cut_value + tolerance)].copy()
x_axis_col = 'Longitude'
xaxis_title = 'Longitude'
title_extra = f"Latitude = {cut_value:.3f}°"
cut_direction = "East-West"
else:
filtered_df = df[(df['Longitude'] >= cut_value - tolerance) &
(df['Longitude'] <= cut_value + tolerance)].copy()
x_axis_col = 'Latitude'
xaxis_title = 'Latitude'
title_extra = f"Longitude = {cut_value:.3f}°"
cut_direction = "North-South"
if not filtered_df.empty:
info = param_info[selected_prop]
# Create interpolated surface
grid_x = np.linspace(filtered_df[x_axis_col].min(), filtered_df[x_axis_col].max(), 60)
grid_y_depth = np.linspace(filtered_df['zm_depth'].min(), filtered_df['zm_depth'].max(), 60)
points = filtered_df[[x_axis_col, 'zm_depth']].values
values = filtered_df[selected_prop].values
grid_data = griddata(points, values, (grid_x[None,:], grid_y_depth[:,None]), method='cubic')
fig.add_trace(go.Heatmap(
x=grid_x,
y=grid_y_depth,
z=grid_data,
colorscale=info['color_scale'],
colorbar=dict(
title=f"{info['short_name']}<br>({info['unit']})",
titleside='right',
thickness=15,
len=0.7
),
hovertemplate=f'<b>{xaxis_title}:</b> %{{x:.4f}}<br><b>Depth:</b> %{{y:.1f}}m<br><b>' +
info['short_name'] + ':</b> %{z:.2f} ' + info['unit'] + '<extra></extra>'
))
# Add sample points
fig.add_trace(go.Scatter(
x=filtered_df[x_axis_col],
y=filtered_df['zm_depth'],
mode='markers',
marker=dict(size=4, color='white', opacity=0.8, line=dict(width=1, color='black')),
name='Sample Points',
hovertemplate=f'<b>Sample Point</b><br>{xaxis_title}: %{{x:.4f}}<br>Depth: %{{y:.1f}}m<br>' +
info['short_name'] + ': %{text}<extra></extra>',
text=[f"{val:.2f} {info['unit']}" for val in filtered_df[selected_prop]]
))
fig.update_layout(
title=f"{info['name']} - {cut_direction} Cross-Section ({title_extra})",
xaxis_title=xaxis_title,
yaxis_title='Depth (m)',
yaxis=dict(autorange='reversed'),
margin={"r":60,"t":60,"l":60,"b":60},
hovermode='closest',
showlegend=True,
height=500,
plot_bgcolor='white'
)
# Statistics info
mean_val = filtered_df[selected_prop].mean()
count = len(filtered_df)
depth_range = filtered_df['zm_depth'].max() - filtered_df['zm_depth'].min()
info_text = [
html.I(className="fas fa-chart-bar me-2"),
f"{count} data points | Mean: {mean_val:.2f} {info['unit']} | Depth Range: {depth_range:.1f}m"
]
else:
fig.add_annotation(
text="No data available for this cross-section<br>Try adjusting the cut position",
xref="paper", yref="paper", x=0.5, y=0.5,
showarrow=False, font=dict(size=16, color='gray')
)
fig.update_layout(
title="No Data Available",
xaxis_title=xaxis_title,
yaxis_title='Depth (m)',
yaxis=dict(autorange='reversed'),
margin={"r":60,"t":60,"l":60,"b":60},
plot_bgcolor='white'
)
info_text = [html.I(className="fas fa-exclamation-triangle me-2"), "No data available for the selected cross-section"]
return fig, info_text
— 6. Run the App —
if name == ‘main’:
app.run(debug=True, jupyter_mode=‘external’, port=8052)
If you prefer to collaborate with others on Discord, join the Plotly Discord channel.
I’ll definitely have to skip this one, job hunting takes precedence now. Hopefully next week I’ll be able to join in.
