Skip to content
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

Clarifying Water Observations classifications and colour map #397

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open

Clarifying Water Observations classifications and colour map #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
7665a8f
Added colour map
benji-glitsos-ga Feb 12, 2025
7dc1df1
Moved some content to changelog
benji-glitsos-ga Feb 13, 2025
f5a347f
Rewording and moving content to changelog
benji-glitsos-ga Feb 13, 2025
b30ce9f
Editing
benji-glitsos-ga Feb 13, 2025
6caaa80
Removed the combination bit flags from table
benji-glitsos-ga Feb 13, 2025
1d7a867
Edits
benji-glitsos-ga Feb 13, 2025
b99f06d
Edits
benji-glitsos-ga Feb 13, 2025
51d52f9
Edits
benji-glitsos-ga Feb 13, 2025
468290a
High slope terminology
benji-glitsos-ga Feb 28, 2025
8b75cd9
Edits to WO
benji-glitsos-ga Feb 28, 2025
98a00c1
Clarifying bit flags vs decimals vs classifications
benji-glitsos-ga Feb 28, 2025
8a0e567
Editing description further
benji-glitsos-ga Feb 28, 2025
56aff86
Minor edit
benji-glitsos-ga Feb 28, 2025
31f790d
Converted the Classifications table to HTML
benji-glitsos-ga Mar 5, 2025
690078c
Fix table HTML
benji-glitsos-ga Mar 5, 2025
9afb5b6
Added colours to table
benji-glitsos-ga Mar 5, 2025
e39d1bc
Working on the table
benji-glitsos-ga Mar 5, 2025
0bebd78
Added combinations to table
benji-glitsos-ga Mar 5, 2025
c7175f6
Fix CSS selector
benji-glitsos-ga Mar 5, 2025
d56bc3b
Changed colour to a circle
benji-glitsos-ga Mar 5, 2025
7a95eb0
Wording
benji-glitsos-ga Mar 5, 2025
f76ee2c
Updated image to remove legend
benji-glitsos-ga Mar 5, 2025
5b6ac20
Reordering content
benji-glitsos-ga Mar 5, 2025
489acbc
Formatting
benji-glitsos-ga Mar 5, 2025
4800b0d
Fix image
benji-glitsos-ga Mar 5, 2025
67808ce
Editing content
benji-glitsos-ga Mar 5, 2025
44ed253
Captions
benji-glitsos-ga Mar 5, 2025
a2ac060
Using empty rows to divide table
benji-glitsos-ga Mar 5, 2025
685b4c2
Editing text
benji-glitsos-ga Mar 5, 2025
33e972b
Name aliases
benji-glitsos-ga Mar 5, 2025
6626746
Minor edits
benji-glitsos-ga Mar 5, 2025
42ff2ae
Minor edits
benji-glitsos-ga Mar 5, 2025
c91b3c6
Minor edits
benji-glitsos-ga Mar 5, 2025
a3972e9
Added Dry to table
benji-glitsos-ga Mar 5, 2025
599bf1c
Captions
benji-glitsos-ga Mar 5, 2025
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
107 changes: 107 additions & 0 deletions docs/_components/water-observations-classifications-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<div class="scroll-horizontally">
<table class="colour-coded-table water-observations-classifications-theme">
<caption>Table 1. Classifications and their map colours.</caption>
<thead>
<tr>
<th>Classification</th>
<th>Bit flag</th>
<th>Decimal</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><span class="colour dry"></span><strong>Dry</strong></td>
<td>-</td>
<td>0</td>
<td>No water was observed at this location.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><span class="colour no-data"></span><strong>No Data</strong></td>
<td>0</td>
<td>1</td>
<td>Missing or invalid data. Pixel masked out due to NO_DATA in NBART source, 0 = valid data in NBART.</td>
</tr>
<tr>
<td><span class="colour non-contiguous"></span><strong>Non-Contiguous</strong></td>
<td>1</td>
<td>2</td>
<td>Some data is missing in the original image (usually missing bands). Pixel masked out due to lack of data contiguity. (This has the same colour as No Data.)</td>
</tr>
<tr>
<td><span class="colour low-solar-angle"></span><strong>Low Solar Angle</strong></td>
<td>2</td>
<td>4</td>
<td>The angle of the sun can cast a large shadow which can be misclassified as water. Pixel masked out due to solar incidence of less than 10 degrees. Also known as Solar Incidence. (This has the same colour as No Data.)</td>
</tr>
<tr>
<td><span class="colour terrain-shadow"></span><strong>Terrain Shadow</strong></td>
<td>3</td>
<td>8</td>
<td>Topographic features can cast shadows which can be misclassified as water. Pixel masked out due to terrain shadow.</td>
</tr>
<tr>
<td><span class="colour high-slope"></span><strong>High Slope</strong></td>
<td>4</td>
<td>16</td>
<td>A highly sloped terrain is less likely to contain water, so therefore, a detection of water on this surface is often incorrect. Pixel masked out due to high slope. Also known as Steep Terrain.</td>
</tr>
<tr>
<td><span class="colour cloud-shadow"></span><strong>Cloud Shadow</strong></td>
<td>5</td>
<td>32</td>
<td>Shadows are likely to be misclassified as water. Pixel masked out due to cloud shadow.</td>
</tr>
<tr>
<td><span class="colour cloud"></span><strong>Cloud</strong></td>
<td>6</td>
<td>64</td>
<td>Cloud is affecting the output data. Pixel masked out due to cloud.</td>
</tr>
<tr>
<td><span class="colour water"></span><strong>Water</strong></td>
<td>7</td>
<td>128</td>
<td>This pixel is classified as water.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><span class="colour cloudy-water"></span><strong>Cloudy Water</strong></td>
<td>-</td>
<td>192</td>
<td>A combination of classifications: Water and Cloud (128 + 64).</td>
</tr>
<tr>
<td><span class="colour shaded-water"></span><strong>Shaded Water</strong></td>
<td>-</td>
<td>160</td>
<td>A combination of classifications: Water and Cloud Shadow (128 + 32).</td>
</tr>
<tr>
<td><span class="colour cloudy-steep-terrain"></span><strong>Cloudy Steep Terrain</strong></td>
<td>-</td>
<td>48</td>
<td>A combination of classifications: High Slope and Cloud Shadow (16 + 32).</td>
</tr>
</tbody>
</table>
</div>

<br />
81 changes: 3 additions & 78 deletions ...bservations-combination-decimals-table.md → ...ervations-combination-decimals-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
<div class="scroll-horizontally">
<table class="colour-coded-table water-observations-combination-decimals-theme">
<caption>Combination decimal values</caption>
<caption>Table 2. Decimal values for combinations of two classifications.</caption>
<thead>
<tr>
<th></th>
<th></th>
<th class="classification">No Data</th>
<th class="classification">Contiguity</th>
<th class="classification">Non-Contiguous</th>
<th class="classification">Low Solar Angle</th>
<th class="classification">Terrain Shadow</th>
<th class="classification">High Slope</th>
<th class="classification">Cloud Shadow</th>
<th class="classification">Cloud</th>
<th class="classification">High Slope + Cloud</th>
<th class="classification">Water</th>
<th class="classification">Cloud Shadow + Water</th>
<th class="classification">Cloud + Water</th>
</tr>
</thead>
<tbody>
Expand All @@ -29,10 +26,7 @@
<td class="classification">16</td>
<td class="classification">32</td>
<td class="classification">64</td>
<td class="classification">80</td>
<td class="classification">128</td>
<td class="classification">160</td>
<td class="classification">192</td>
</tr>
<tr>
<td class="classification"><strong>No Data</strong></td>
Expand All @@ -44,13 +38,10 @@
<td class="impossible">17</td>
<td class="impossible">33</td>
<td class="impossible">65</td>
<td class="impossible">81</td>
<td class="impossible">129</td>
<td class="impossible">161</td>
<td class="impossible">193</td>
</tr>
<tr>
<td class="classification"><strong>Contiguity</strong></td>
<td class="classification"><strong>Non-Contiguous</strong></td>
<td class="classification">2</td>
<td class="impossible">3</td>
<td class="impossible">4</td>
Expand All @@ -59,10 +50,7 @@
<td class="impossible">18</td>
<td class="impossible">34</td>
<td class="impossible">66</td>
<td class="impossible">82</td>
<td class="impossible">130</td>
<td class="impossible">162</td>
<td class="impossible">194</td>
</tr>
<tr>
<td class="classification"><strong>Low Solar Angle</strong></td>
Expand All @@ -74,10 +62,7 @@
<td>20</td>
<td>36</td>
<td>68</td>
<td>84</td>
<td>132</td>
<td>164</td>
<td>196</td>
</tr>
<tr>
<td class="classification"><strong>Terrain Shadow</strong></td>
Expand All @@ -89,10 +74,7 @@
<td>24</td>
<td>40</td>
<td>72</td>
<td>88</td>
<td>136</td>
<td>168</td>
<td>200</td>
</tr>
<tr>
<td class="classification"><strong>High Slope</strong></td>
Expand All @@ -104,10 +86,7 @@
<td class="impossible">32</td>
<td>48</td>
<td>80</td>
<td class="impossible">96</td>
<td>144</td>
<td>176</td>
<td>208</td>
</tr>
<tr>
<td class="classification"><strong>Cloud Shadow</strong></td>
Expand All @@ -119,10 +98,7 @@
<td>48</td>
<td class="impossible">64</td>
<td>96</td>
<td>112</td>
<td>160</td>
<td class="impossible">192</td>
<td>224</td>
</tr>
<tr>
<td class="classification"><strong>Cloud</strong></td>
Expand All @@ -134,25 +110,7 @@
<td>80</td>
<td>96</td>
<td class="impossible">128</td>
<td class="impossible">144</td>
<td>192</td>
<td>224</td>
<td class="impossible">256</td>
</tr>
<tr>
<td class="classification"><strong>High Slope + Cloud</strong></td>
<td class="classification">80</td>
<td class="impossible">81</td>
<td class="impossible">82</td>
<td>84</td>
<td>88</td>
<td class="impossible">96</td>
<td>112</td>
<td class="impossible">144</td>
<td class="impossible">160</td>
<td>208</td>
<td>240</td>
<td class="impossible">272</td>
</tr>
<tr>
<td class="classification"><strong>Water</strong></td>
Expand All @@ -164,40 +122,7 @@
<td>144</td>
<td>160</td>
<td>192</td>
<td>208</td>
<td class="impossible">256</td>
<td class="impossible">288</td>
<td class="impossible">320</td>
</tr>
<tr>
<td class="classification"><strong>Cloud Shadow + Water</strong></td>
<td class="classification">160</td>
<td class="impossible">161</td>
<td class="impossible">162</td>
<td>164</td>
<td>168</td>
<td>176</td>
<td class="impossible">192</td>
<td>224</td>
<td>240</td>
<td class="impossible">288</td>
<td class="impossible">320</td>
<td class="impossible">352</td>
</tr>
<tr>
<td class="classification"><strong>Cloud + Water</strong></td>
<td class="classification">192</td>
<td class="impossible">193</td>
<td class="impossible">194</td>
<td>196</td>
<td>200</td>
<td>208</td>
<td>224</td>
<td class="impossible">256</td>
<td class="impossible">272</td>
<td class="impossible">320</td>
<td class="impossible">352</td>
<td class="impossible">384</td>
</tr>
</tbody>
</table>
Expand Down
Binary file added docs/_files/water-observations/colour-map-water-observations.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/_files/water-observations/water-observations-colours-example.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/_static/styles/components/_caption.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
figure figcaption, table caption {
text-align: center;
color: var(--pst-color-text-base) !important;
}
60 changes: 60 additions & 0 deletions docs/_static/styles/components/_colour_coded_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,66 @@ table.colour-coded-table {
}
}

&.water-observations-classifications-theme {
.colour {
display: inline-block;
height: 1.2em;
width: 1.2em;
border-radius: 50%;
margin-right: 0.5em;
position: relative;
top: 0.2em;

&.no-data {
background-color: #707070;
}

&.non-contiguous {
background-color: #707070;
}

&.low-solar-angle {
background-color: #707070;
}

&.dry {
background-color: #96966e;
}

&.water {
background-color: #4F81BD;
}

&.high-slope {
background-color: #776857;
}

&.terrain-shadow {
background-color: #2f2922;
}

&.cloud-shadow {
background-color: #4b4b37;
}

&.cloud {
background-color: #c2c1c0;
}

&.cloudy-water {
background-color: #bad4f2;
}

&.shaded-water {
background-color: #335277;
}

&.cloudy-steep-terrain {
background-color: #f2dcb4;
}
}
}

&.water-observations-combination-decimals-theme {
th, td {
&.classification {
Expand Down
Loading