website demo

This commit is contained in:
Ollie Ballinger
2022-11-17 17:32:49 +00:00
parent f15030785c
commit 3589114277
8 changed files with 1029 additions and 752 deletions

View File

@@ -147,12 +147,12 @@ ul.task-list li input[type="checkbox"] {
<ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 show">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./ch1.html" class="sidebar-item-text sidebar-link"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Data Acquisition</span></a>
<a href="./ch1.html" class="sidebar-item-text sidebar-link"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Remote Sensing</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./ch2.html" class="sidebar-item-text sidebar-link"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">Remote Sensing</span></a>
<a href="./ch2.html" class="sidebar-item-text sidebar-link"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">Data Acquisition</span></a>
</div>
</li>
<li class="sidebar-item">
@@ -196,12 +196,7 @@ ul.task-list li input[type="checkbox"] {
<h2 id="toc-title">Table of contents</h2>
<ul>
<li><a href="#remote_sensing" id="toc-remote_sensing" class="nav-link active" data-scroll-target="#remote_sensing"><span class="toc-section-number">3.1</span> Multispectral Remote Sensing</a>
<ul class="collapse">
<li><a href="#spatial-resolution" id="toc-spatial-resolution" class="nav-link" data-scroll-target="#spatial-resolution"><span class="toc-section-number">3.1.1</span> Spatial Resolution</a></li>
<li><a href="#spectral-resolution" id="toc-spectral-resolution" class="nav-link" data-scroll-target="#spectral-resolution"><span class="toc-section-number">3.1.2</span> Spectral Resolution</a></li>
<li><a href="#temporal-resolution" id="toc-temporal-resolution" class="nav-link" data-scroll-target="#temporal-resolution"><span class="toc-section-number">3.1.3</span> Temporal Resolution</a></li>
</ul></li>
<li><a href="#getting-started" id="toc-getting-started" class="nav-link active" data-scroll-target="#getting-started"><span class="toc-section-number">3.1</span> Getting Started</a></li>
</ul>
<div class="toc-actions"><div><i class="bi bi-github"></i></div><div class="action-links"><p><a href="https://github.com/oballinger/GEE_OSINT/edit/main/ch3.qmd" class="toc-action">Edit this page</a></p></div></div></nav>
</div>
@@ -225,47 +220,10 @@ ul.task-list li input[type="checkbox"] {
</header>
<section id="remote_sensing" class="level2" data-number="3.1">
<h2 data-number="3.1" class="anchored" data-anchor-id="remote_sensing"><span class="header-section-number">3.1</span> Multispectral Remote Sensing</h2>
<p>There are three spatial, spectral, and temporal.</p>
<section id="spatial-resolution" class="level3" data-number="3.1.1">
<h3 data-number="3.1.1" class="anchored" data-anchor-id="spatial-resolution"><span class="header-section-number">3.1.1</span> Spatial Resolution</h3>
<p>Spatial resolution governs how “sharp” an image looks. The Google Maps satellite basemap, for example, is really sharp Most of the optical imagery that is freely available has relatively low spatial resolution (it looks more grainy than, for example, the Google satellite basemap),</p>
<p><img src="./images/Landsat.png" class="img-fluid"> <img src="./images/Sentinel2.png" class="img-fluid"> <img src="./images/Maxar.png" class="img-fluid"></p>
<p><img src="./images/kh11.png" class="img-fluid"></p>
</section>
<section id="spectral-resolution" class="level3" data-number="3.1.2">
<h3 data-number="3.1.2" class="anchored" data-anchor-id="spectral-resolution"><span class="header-section-number">3.1.2</span> Spectral Resolution</h3>
<p>What open source imagery lacks in spatial resolution it often makes up for with <em>spectral</em> resolution. Really sharp imagery from MAXAR, for example, collects</p>
<p>Different materials reflect light differently. An apple absorbs shorter wavelengths (e.g.&nbsp;blue and green), and reflects longer wavelengths (red). Our eyes use that information the color to distinguish between different objects. But our eyes can only see a relatively small sliver of the electromagnetic spectrum covering blue, yellow, and red; we cant see UV or infrared wavelengths, for example, though the extent to which different materials reflect or absorb these wavelengths is just as useful for distinguishing between them. For example, Astroturf (fake plastic grass) and real grass will both look green to us, espeically from a satellite image. But living plants absorb radiation from the sun in a part of the light spectrum that we cant see. Theres a spectral index called the Normalized Difference Vegetation Index (NDVI) which exploits this fact to isolate vegetation in multispectral satellite imagery. So if we look at <a href="https://en.wikipedia.org/wiki/Gillette_Stadium">Gilette Stadium</a> near Boston, we can tell that the three training fields south of the stadium are real grass (they generate high NDVI values, showing up red), while the pitch in the stadium itself is astroturf (generating low NDVI values, showing up blue).</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="images/NDVI.jpg" class="img-fluid figure-img"></p>
<p></p><figcaption class="figure-caption">VHR image of Gilette Stadium with Sentinel-2 derived NDVI overlay</figcaption><p></p>
</figure>
</div>
<p>In other words, even though these fields are all green and indistinguishable to the human eye, their <em>spectral profiles</em> beyond the visible light spectrum differ, and we can use this information to distinguish between them. Below is a plot of the spectral profiles of different materials, including oil.</p>
<iframe title="Spectral Profiles of Different Materials" aria-label="Interactive line chart" id="datawrapper-chart-b1kcX" src="https://datawrapper.dwcdn.net/b1kcX/3/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="400">
</iframe>
<script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
</script>
<p>The European Space Agencys Sentinel-2 satellite collects spectral information well beyond the visible light spectrum, enabling this sort of analysis. It chops the electromagnetic spectrum up into “bands”, and measures how strongly wavelengths in each of those bands is reflected:</p>
<p><img src="images/S2_bands.png" class="img-fluid"></p>
<p>Well be using this satellite to distinguish between oil and other materials, similar to the way we were able to distinguish between real and fake grass at Gilette Stadium. First, well have to do a bit of pre-processing on the Sentinel-2 imagery after which well train a machine learning model to identify oil.</p>
</section>
<section id="temporal-resolution" class="level3" data-number="3.1.3">
<h3 data-number="3.1.3" class="anchored" data-anchor-id="temporal-resolution"><span class="header-section-number">3.1.3</span> Temporal Resolution</h3>
<p>Finally, time There is often a tradeoff between spatial and temporal resolution.</p>
<p>The Google Maps basemap is very high resolution, available globally, and is freely available. But it has no <em>temporal</em> dimension: its a snapshot from one particular point in time. If the thing were interested in involves <em>changes</em> over time, this basemap will be of limited use.</p>
<p>The <strong>“revisit rate”</strong> is the time it takes a satellite to image the same point on earth</p>
<ul>
<li><a href="https://sentinel.esa.int/web/sentinel/missions/sentinel-2">Sentinel 2</a>: 5 days</li>
<li><a href="https://landsat.gsfc.nasa.gov/satellites/landsat-9/#:~:text=Landsat%209%20replaces%20Landsat%207,for%20Landsat%208%20%2B%20Landsat%207.">Landsat 9</a>: 8 days</li>
<li><a href="https://www.planet.com/pulse/12x-rapid-revisit-announcement/">Planet SkySat</a>: 2-3 hours</li>
</ul>
<section id="getting-started" class="level2" data-number="3.1">
<h2 data-number="3.1" class="anchored" data-anchor-id="getting-started"><span class="header-section-number">3.1</span> Getting Started</h2>
</section>
</section>
</main> <!-- /main -->
@@ -520,7 +478,7 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
<nav class="page-navigation">
<div class="nav-page nav-page-previous">
<a href="./ch2.html" class="pagination-link">
<i class="bi bi-arrow-left-short"></i> <span class="nav-page-text"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">Remote Sensing</span></span>
<i class="bi bi-arrow-left-short"></i> <span class="nav-page-text"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">Data Acquisition</span></span>
</a>
</div>
<div class="nav-page nav-page-next">