Skip to content

Visualize stats in simple html document #1089

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guillaumevernieres merged 4 commits into from
May 1, 2024
Merged

Visualize stats in simple html document #1089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c7031ea
wip
guillaumevernieres May 1, 2024
7bd4da1
adjust sizes
guillaumevernieres May 1, 2024
3b30e66
removed tabs
guillaumevernieres May 1, 2024
81556fa
Merge branch 'develop' into feature/figure-vis
guillaumevernieres May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ush/soca/gdassoca_obsstats.py → utils/soca/fig_gallery/gdassoca_obsstats.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,7 @@ def plot_timeseries(self, ocean, variable, inst="", dirout=""):

# Improve layout and show plot
plt.tight_layout(rect=[0, 0.03, 1, 0.95])
plt.savefig(f'{dirout}/{inst}_{variable}_{ocean}_test.png')

plt.savefig(f'{dirout}/{inst}_{variable}_{ocean}.png')

if __name__ == "__main__":
epilog = ["Usage examples: ./gdassoca_obsstats.py --exps cp1/COMROOT/cp1 cp2/COMROOT/cp2 --inst sst_abi_g16_l3c --dirout cp1vscp2"]
Expand Down
120 changes: 120 additions & 0 deletions utils/soca/fig_gallery/time_series_omb.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.gallery {
display: none; /* Initially hide the gallery */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 16px;
padding: 16px;
}
img {
width: 90%;
height: auto;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px #888888;
}
.button {
margin: 5px;
padding: 3px 10px;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
font-size: 0.6em; /* Smaller font size */
}
.button:hover, .active {
background-color: #0056b3;
}
select {
padding: 3px 10px; /* Reduced padding */
font-size: 0.4em; /* Smaller font size */
border-radius: 5px;
cursor: pointer;
border: 1px solid #ccc;
}
input[type="text"] {
width: 70%; /* Increased width */
display: inline-block;
vertical-align: middle; /* Aligns label with input */
}
label {
display: inline-block;
vertical-align: bottom; /* Aligns label with input */
padding-top: 12px; /* Aligns text vertically with input */
margin-right: 5px; /* Adds some space between label and input */
}
</style>
</head>
<body>
<div>
<!-- Label and input for base path -->
<label for="basePathInput">Path to figures: </label>
<input type="text" id="basePathInput" placeholder="Enter base path for images" value="/path/to/figures/">
</div>
<div>
<!-- Buttons for selecting oceans -->
<button class="button" id="Arctic" onclick="showImages(currentType, 'Arctic')">Arctic</button>
<button class="button" id="Atlantic" onclick="showImages(currentType, 'Atlantic')">Atlantic</button>
<button class="button" id="Indian" onclick="showImages(currentType, 'Indian')">Indian</button>
<button class="button" id="Pacific" onclick="showImages(currentType, 'Pacific')">Pacific</button>
<button class="button" id="Southern" onclick="showImages(currentType, 'Southern')">Southern</button>
</div>
<div>
<!-- Dropdown for selecting type of observation -->
<select id="typeSelect" onchange="setType(this.value)">
<option value="adt_rads_all">ADT RADS All</option>
<option value="sst_abi_g16_l3c">SST ABI G16 L3C</option>
<option value="sst_abi_g17_l3c">SST ABI G17 L3C</option>
<option value="sst_ahi_h08_l3c">SST AHI H08 L3C</option>
<option value="sst_avhrr_ma_l3u">SST AVHRR MA L3C</option>
<option value="sst_avhrr_mb_l3u">SST AVHRR MB L3C</option>
<option value="sst_avhrr_mc_l3u">SST AVHRR MC L3C</option>
<option value="sst_viirs_n20_l3u">SST VIIRS N20 L3C</option>
<option value="sst_viirs_npp_l3u">SST VIIRS NPP L3C</option>
<option value="icec_amsr2_north">ICEC AMSR2 NORTH</option>
<option value="icec_amsr2_south">ICEC AMSR2 SOUTH</option>

</select>
</div>

<div id="imageContainer"></div>

<script>
var currentType = 'adt_rads_all'; // Default observation type
var currentOcean = ''; // Default ocean, empty at start

function setType(type) {
currentType = type;
if (currentOcean) { // Only update if an ocean is already selected
showImages(currentType, currentOcean);
}
}

function showImages(type, ocean) {
currentOcean = ocean;
var basePath = document.getElementById('basePathInput').value;
updateActiveButton(ocean, 'button'); // Update active state for ocean buttons
var container = document.getElementById('imageContainer');
container.innerHTML = `<div class="gallery" style="display: grid;">
<img src="${basePath}${type}_ombg_noqc_${ocean}.png" alt="${ocean} No QC">
<img src="${basePath}${type}_ombg_qc_${ocean}.png" alt="${ocean} QC">
</div>`;
}

function updateActiveButton(selectedId, buttonClass) {
var buttons = document.querySelectorAll('.' + buttonClass);
buttons.forEach(button => {
if (button.id === selectedId) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
}
</script>
</body>
</html>