bellingcat/RS4OSINT
1
0
Fork 0
mirror of https://github.com/bellingcat/RS4OSINT.git synced 2026-06-12 05:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed image paths

Browse Source
This commit is contained in:
Ollie Ballinger
2023-04-17 11:46:07 +01:00
parent 7ccf85e48e
commit 9eb020dab7
29 changed files with 1611 additions and 1734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
docs/C4_Ships.html
View File

@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Remote Sensing for OSINT - 11&nbsp; Ship Detection</title>
<title>Remote Sensing for OSINT - Ship Detection</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
@@ -199,20 +199,17 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 ">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./index.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Overview</span></span></a>
<a href="./index.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Overview</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./A2_Remote_Sensing.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">Remote Sensing</span></span></a>
<a href="./A2_Remote_Sensing.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Remote Sensing</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./A3_Data_Acquisition.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">3</span>&nbsp; <span class="chapter-title">Data Acquisition</span></span></a>
<a href="./A3_Data_Acquisition.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Data Acquisition</span></a>
</div>
</li>
</ul>
@@ -228,26 +225,22 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth1 ">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./B1_Getting_Started.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">4</span>&nbsp; <span class="chapter-title">Getting Started</span></span></a>
<a href="./B1_Getting_Started.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Getting Started</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./B2_Interpreting_Images.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">5</span>&nbsp; <span class="chapter-title">Interpreting Images</span></span></a>
<a href="./B2_Interpreting_Images.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Interpreting Images</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./B3_Image_Series.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">6</span>&nbsp; <span class="chapter-title">Image Series</span></span></a>
<a href="./B3_Image_Series.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Image Series</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./B4_Vectors_Tables.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">7</span>&nbsp; <span class="chapter-title">Vectors and Tables</span></span></a>
<a href="./B4_Vectors_Tables.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Vectors and Tables</span></a>
</div>
</li>
</ul>
@@ -263,32 +256,27 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<ul id="quarto-sidebar-section-3" class="collapse list-unstyled sidebar-section depth1 show">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./C1_Lights.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">8</span>&nbsp; <span class="chapter-title">War at Night</span></span></a>
<a href="./C1_Lights.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">War at Night</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./C2_Refineries.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">9</span>&nbsp; <span class="chapter-title">Refinery Identification</span></span></a>
<a href="./C2_Refineries.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Refinery Identification</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./C3_Blast.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">10</span>&nbsp; <span class="chapter-title">Blast Damage Assessment</span></span></a>
<a href="./C3_Blast.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Blast Damage Assessment</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./C4_Ships.html" class="sidebar-item-text sidebar-link active">
<span class="menu-text"><span class="chapter-number">11</span>&nbsp; <span class="chapter-title">Ship Detection</span></span></a>
<a href="./C4_Ships.html" class="sidebar-item-text sidebar-link active"><span class="chapter-title">Ship Detection</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./C5_Object_Detection.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">12</span>&nbsp; <span class="chapter-title">Object Detection</span></span></a>
<a href="./C5_Object_Detection.html" class="sidebar-item-text sidebar-link"><span class="chapter-title">Object Detection</span></a>
</div>
</li>
</ul>
@@ -303,23 +291,23 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<h2 id="toc-title">Table of contents</h2>
<ul>
<li><a href="#how-it-works" id="toc-how-it-works" class="nav-link active" data-scroll-target="#how-it-works"><span class="header-section-number">11.1</span> How it Works</a></li>
<li><a href="#building-the-application" id="toc-building-the-application" class="nav-link" data-scroll-target="#building-the-application"><span class="header-section-number">12</span> Building the Application</a>
<li><a href="#how-it-works" id="toc-how-it-works" class="nav-link active" data-scroll-target="#how-it-works">How it Works</a></li>
<li><a href="#building-the-application" id="toc-building-the-application" class="nav-link" data-scroll-target="#building-the-application">Building the Application</a>
<ul class="collapse">
<li><a href="#setup" id="toc-setup" class="nav-link" data-scroll-target="#setup"><span class="header-section-number">12.1</span> Setup</a></li>
<li><a href="#ship-detection" id="toc-ship-detection" class="nav-link" data-scroll-target="#ship-detection"><span class="header-section-number">12.2</span> Ship Detection</a></li>
<li><a href="#visualization" id="toc-visualization" class="nav-link" data-scroll-target="#visualization"><span class="header-section-number">12.3</span> Visualization</a></li>
<li><a href="#putting-it-all-together" id="toc-putting-it-all-together" class="nav-link" data-scroll-target="#putting-it-all-together"><span class="header-section-number">12.4</span> Putting it all together</a></li>
<li><a href="#building-a-user-interface" id="toc-building-a-user-interface" class="nav-link" data-scroll-target="#building-a-user-interface"><span class="header-section-number">12.5</span> Building a User Interface</a>
<li><a href="#setup" id="toc-setup" class="nav-link" data-scroll-target="#setup">Setup</a></li>
<li><a href="#ship-detection" id="toc-ship-detection" class="nav-link" data-scroll-target="#ship-detection">Ship Detection</a></li>
<li><a href="#visualization" id="toc-visualization" class="nav-link" data-scroll-target="#visualization">Visualization</a></li>
<li><a href="#putting-it-all-together" id="toc-putting-it-all-together" class="nav-link" data-scroll-target="#putting-it-all-together">Putting it all together</a></li>
<li><a href="#building-a-user-interface" id="toc-building-a-user-interface" class="nav-link" data-scroll-target="#building-a-user-interface">Building a User Interface</a>
<ul class="collapse">
<li><a href="#drawing-tools" id="toc-drawing-tools" class="nav-link" data-scroll-target="#drawing-tools"><span class="header-section-number">12.5.1</span> Drawing Tools</a></li>
<li><a href="#widgets" id="toc-widgets" class="nav-link" data-scroll-target="#widgets"><span class="header-section-number">12.5.2</span> Widgets</a></li>
<li><a href="#the-control-panel" id="toc-the-control-panel" class="nav-link" data-scroll-target="#the-control-panel"><span class="header-section-number">12.5.3</span> The Control Panel</a></li>
<li><a href="#drawing-tools" id="toc-drawing-tools" class="nav-link" data-scroll-target="#drawing-tools">Drawing Tools</a></li>
<li><a href="#widgets" id="toc-widgets" class="nav-link" data-scroll-target="#widgets">Widgets</a></li>
<li><a href="#the-control-panel" id="toc-the-control-panel" class="nav-link" data-scroll-target="#the-control-panel">The Control Panel</a></li>
</ul></li>
<li><a href="#taking-it-for-a-spin" id="toc-taking-it-for-a-spin" class="nav-link" data-scroll-target="#taking-it-for-a-spin"><span class="header-section-number">12.6</span> Taking it for a spin</a>
<li><a href="#taking-it-for-a-spin" id="toc-taking-it-for-a-spin" class="nav-link" data-scroll-target="#taking-it-for-a-spin">Taking it for a spin</a>
<ul class="collapse">
<li><a href="#north-korea" id="toc-north-korea" class="nav-link" data-scroll-target="#north-korea"><span class="header-section-number">12.6.1</span> North Korea</a></li>
<li><a href="#ukraine" id="toc-ukraine" class="nav-link" data-scroll-target="#ukraine"><span class="header-section-number">12.6.2</span> Ukraine</a></li>
<li><a href="#north-korea" id="toc-north-korea" class="nav-link" data-scroll-target="#north-korea">North Korea</a></li>
<li><a href="#ukraine" id="toc-ukraine" class="nav-link" data-scroll-target="#ukraine">Ukraine</a></li>
</ul></li>
</ul></li>
</ul>
@@ -330,7 +318,7 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<header id="title-block-header" class="quarto-title-block default">
<div class="quarto-title">
<h1 class="title"><span class="chapter-number">11</span>&nbsp; <span class="chapter-title">Ship Detection</span></h1>
<h1 class="title"><span class="chapter-title">Ship Detection</span></h1>
</div>
@@ -351,8 +339,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<iframe src="https://ollielballinger.users.earthengine.app/view/shipdetection" width="100%" height="700px">
</iframe>
</div>
<section id="how-it-works" class="level2" data-number="11.1">
<h2 data-number="11.1" class="anchored" data-anchor-id="how-it-works"><span class="header-section-number">11.1</span> How it Works</h2>
<section id="how-it-works" class="level2">
<h2 class="anchored" data-anchor-id="how-it-works">How it Works</h2>
<p>The app has two main panels:</p>
<ol type="1">
<li>A control panel on the left that allows the user to interact with the application</li>
@@ -365,10 +353,10 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<p>If you’re closely zoomed in to the map and load imagery from different days by clicking on the graph, you can compare the bright spots on the Sentinel image and the green dots. The ship detection process is pretty accurate, and we typically see one green dot per ship. However, you may notice that we occasionally miss a ship. This is because the ship detection process is based on a threshold, and if the ship is too small it may not generate a high enough return signal to be detected. You can increase the sensitivity of the ship detection process by moving the slider below the graph. This will increase the number of ships detected, but it may also increase the number of false positives.</p>
<p>The next section focuses on building this application. After that, we’ll have a look at a few different use cases for this sort of maritime surveillance.</p>
</section>
<section id="building-the-application" class="level1" data-number="12">
<h1 data-number="12"><span class="header-section-number">12</span> Building the Application</h1>
<section id="setup" class="level2" data-number="12.1">
<h2 data-number="12.1" class="anchored" data-anchor-id="setup"><span class="header-section-number">12.1</span> Setup</h2>
<section id="building-the-application" class="level1">
<h1>Building the Application</h1>
<section id="setup" class="level2">
<h2 class="anchored" data-anchor-id="setup">Setup</h2>
<p>The first step is to configure the map and import the necessary datasets. By default, we want the app to be centered on the Suez Canal. Then, we want to import the Digital Surface Model (DSM) from the ALOS World 3D-30 dataset. This dataset provides a 30m resolution elevation model of the Earth which we will use to mask out the land. Finally, we want to import the Sentinel 1 dataset. We will use the VV polarization and the Interferometric Wide (IW) mode. We will also sort the images by date.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co">// Center the map on the Suez Canal and set map options</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="bu">Map</span><span class="op">.</span><span class="fu">setCenter</span>(<span class="fl">32.327</span><span class="op">,</span> <span class="fl">31.4532</span><span class="op">,</span> <span class="dv">10</span>)<span class="op">;</span></span>
@@ -399,8 +387,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<span id="cb1-27"><a href="#cb1-27" aria-hidden="true" tabindex="-1"></a>])<span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>Now that we’ve gotten that out of the way, we can move on to the actual detection of ships.</p>
</section>
<section id="ship-detection" class="level2" data-number="12.2">
<h2 data-number="12.2" class="anchored" data-anchor-id="ship-detection"><span class="header-section-number">12.2</span> Ship Detection</h2>
<section id="ship-detection" class="level2">
<h2 class="anchored" data-anchor-id="ship-detection">Ship Detection</h2>
<p>You might expect the automatic identification of ships based on synthetic aperture radar satellite imagery to involve a complex machine learning algorithm or artificial intelligence. In fact, it can be done in one line of code which sets a cutoff. If the return signal is greater than 0, then we have a ship. If it’s less than 0, then we don’t. Simple as that.</p>
<p>The main analytical function responsible for ship identification is the <code>getVectors</code> function shown below. It takes an image as an input and returns a FeatureCollection of points, each corresponding to a ship. The function clips the image to the area of interest, selects the VV polarization, and finally filters out areas where the VV value is smaller than 0. This results in a raster image where the sea is black and the ships are white. We then use the <code>reduceToVectors</code> function to convert the raster image to a FeatureCollection of points. The function returns this FeatureCollection, and sets a property called <code>count</code> which is the number of ships detected in the image.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">getVectors</span>(img) {</span>
@@ -432,8 +420,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<span id="cb2-27"><a href="#cb2-27" aria-hidden="true" tabindex="-1"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>The <code>count</code> and <code>system:time_start</code> properties are used to create the graph of daily ship counts and allow the resulting vector (point) data to interact with the date slider widget. An important detail here is that the “scale” parameter of the <code>reduceToVectors</code> function is set to the value of the scale slider widget. This allows the user to adjust the resolution of the ship detection process; a smaller value will allow us to detect smaller ships.</p>
</section>
<section id="visualization" class="level2" data-number="12.3">
<h2 data-number="12.3" class="anchored" data-anchor-id="visualization"><span class="header-section-number">12.3</span> Visualization</h2>
<section id="visualization" class="level2">
<h2 class="anchored" data-anchor-id="visualization">Visualization</h2>
<p>The <code>viz</code> function is responsible for displaying the results of the ship detection process. It takes the area of interest, the vector data, and the Sentinel 1 image as inputs. Nothing super complicated here; we’re just creating three layers and adding them to the map in order: the underlying Sentinel-1 image raster, the ship vector data in green, and the area of interest outline in red. We’re using the <code>Map.layers().set()</code> function to replace the existing layers with the new ones, rather than adding new ones each time.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">viz</span>(aoi<span class="op">,</span> vectors<span class="op">,</span> s1Filtered) {</span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="co">// Create an empty image into which to paint the features, cast to byte.</span></span>
@@ -475,8 +463,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<span id="cb3-38"><a href="#cb3-38" aria-hidden="true" tabindex="-1"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>We want a function to handle the visualization because there are two different situations in which we’re going to visualize results, and we don’t want to repeat our code. The first situation is when the user draws a new area of interest, moves the date slider or alters the scale. In this case, we want to visualize the results of the ship detection process for the entire year’s worth of Sentinel-1 imagery. The second situation is when the user clicks on the chart to analyze a particular day. In this case, we obviously only want to visualize the results of the ship detection process on that day. With this function, we can simply pass the appropriately filtered versions of the Sentinel-1 image and vector data to the function, and it will visualize the results, rather than having to write the same code twice.</p>
</section>
<section id="putting-it-all-together" class="level2" data-number="12.4">
<h2 data-number="12.4" class="anchored" data-anchor-id="putting-it-all-together"><span class="header-section-number">12.4</span> Putting it all together</h2>
<section id="putting-it-all-together" class="level2">
<h2 class="anchored" data-anchor-id="putting-it-all-together">Putting it all together</h2>
<p>Having defined a few helper functions to handle the visualization and ship detection process, we can now move on to the main function that will perform the analysis. This will be performed by the <code>daterangeVectors</code> function. In a nutshell, it reads the user specified date range from the date slider widget, and filters the Sentinel 1 dataset to only include images within that period. Then, it will loop through each Sentinel-1 image from that year and apply the <code>getVectors</code> function to count the number of ships that fall within the area of interest and generate a dataset of points corresponding to detected ships. We’ll then use the <code>viz</code> function we just defined to visualize all of the ship detections and Sentinel-1 images in the AOI during that year stacked on top of each other. Finally, we’ll create a chart based on the number of ships detected per day, and allow the user to click on the chart to visualize the results for a particular day.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> daterangeVectors <span class="op">=</span> <span class="kw">function</span> () {</span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> </span>
@@ -549,15 +537,15 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<span id="cb5-17"><a href="#cb5-17" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>The analytical portion of the application is now complete. Now we have to build a user interface that lets us interact with the application.</p>
</section>
<section id="building-a-user-interface" class="level2" data-number="12.5">
<h2 data-number="12.5" class="anchored" data-anchor-id="building-a-user-interface"><span class="header-section-number">12.5</span> Building a User Interface</h2>
<section id="building-a-user-interface" class="level2">
<h2 class="anchored" data-anchor-id="building-a-user-interface">Building a User Interface</h2>
<p>There are four main steps in the process of creating the User Interface (UI):</p>
<ol type="1">
<li>Configure the drawing tools that allow the user to draw a polygon on the map.</li>
<li>Create some widgets</li>
</ol>
<section id="drawing-tools" class="level3" data-number="12.5.1">
<h3 data-number="12.5.1" class="anchored" data-anchor-id="drawing-tools"><span class="header-section-number">12.5.1</span> Drawing Tools</h3>
<section id="drawing-tools" class="level3">
<h3 class="anchored" data-anchor-id="drawing-tools">Drawing Tools</h3>
<p>We eventually want to allow the user to draw a polygon on the map, and count the number of ships that fall within it. In order to do so, we need to set up a few functions related to the drawing tools that allow the user to do this. Among other things, we want to make sure that we’re clearing the old geometries so that we’re only ever conducting analysis inside the most recent user-drawn polygon, so we’ll need to clear the old ones. We also want to specify the type of polygon the user can draw, which for ease will be a rectangle (you could change this to the actual “polygon” type if you wanted to draw more complex geometries).</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> drawingTools <span class="op">=</span> <span class="bu">Map</span><span class="op">.</span><span class="fu">drawingTools</span>()<span class="op">;</span></span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a></span>
@@ -591,8 +579,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<span id="cb6-30"><a href="#cb6-30" aria-hidden="true" tabindex="-1"></a> drawingTools<span class="op">.</span><span class="fu">draw</span>()<span class="op">;</span></span>
<span id="cb6-31"><a href="#cb6-31" aria-hidden="true" tabindex="-1"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</section>
<section id="widgets" class="level3" data-number="12.5.2">
<h3 data-number="12.5.2" class="anchored" data-anchor-id="widgets"><span class="header-section-number">12.5.2</span> Widgets</h3>
<section id="widgets" class="level3">
<h3 class="anchored" data-anchor-id="widgets">Widgets</h3>
<p>The control panel will eventually contain a few different widgets that allow the user to interact with the application. We’ll start by creating a button that allows the user to draw a polygon on the map. We’ll also create a slider that allows the user to adjust the size of the ships that are detected (remember, this manipulates the “scale” parameter in the <code>reduceToVectors</code> function used in the detection process). The slider will have an accompanying label that tells the user what it does.</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="co">// Create a button that allows the user to draw a polygon on the map</span></span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> drawButton <span class="op">=</span> ui<span class="op">.</span><span class="fu">Button</span>({</span>
@@ -639,8 +627,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<span id="cb8-13"><a href="#cb8-13" aria-hidden="true" tabindex="-1"></a> <span class="dt">style</span><span class="op">:</span> { <span class="dt">width</span><span class="op">:</span> <span class="st">"95%"</span> }<span class="op">,</span></span>
<span id="cb8-14"><a href="#cb8-14" aria-hidden="true" tabindex="-1"></a>})<span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</section>
<section id="the-control-panel" class="level3" data-number="12.5.3">
<h3 data-number="12.5.3" class="anchored" data-anchor-id="the-control-panel"><span class="header-section-number">12.5.3</span> The Control Panel</h3>
<section id="the-control-panel" class="level3">
<h3 class="anchored" data-anchor-id="the-control-panel">The Control Panel</h3>
<p>Now we’re going to assemble all of the widgets we’ve just defined into one panel, alongside some explanatory text. I’m adding a blank label to the panel as a placeholder for the chart, since it will be re-added to the panel every time the user changes the date on the date slider, the AOI, or the scale.</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="kw">var</span> controlPanel <span class="op">=</span> ui<span class="op">.</span><span class="fu">Panel</span>({</span>
<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">widgets</span><span class="op">:</span> [</span>
@@ -677,10 +665,10 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<p>And there we have it. A fully functional, all weather, daytime/nighttime ship detection tool that doesn’t rely on AIS data. Let’s play around with it.</p>
</section>
</section>
<section id="taking-it-for-a-spin" class="level2" data-number="12.6">
<h2 data-number="12.6" class="anchored" data-anchor-id="taking-it-for-a-spin"><span class="header-section-number">12.6</span> Taking it for a spin</h2>
<section id="north-korea" class="level3" data-number="12.6.1">
<h3 data-number="12.6.1" class="anchored" data-anchor-id="north-korea"><span class="header-section-number">12.6.1</span> North Korea</h3>
<section id="taking-it-for-a-spin" class="level2">
<h2 class="anchored" data-anchor-id="taking-it-for-a-spin">Taking it for a spin</h2>
<section id="north-korea" class="level3">
<h3 class="anchored" data-anchor-id="north-korea">North Korea</h3>
<p>In 2020, North Korea implemented one of the most severe COVID-19 lockdowns in the world including a near-total ban on <a href="https://thediplomat.com/2023/01/north-korea-likely-to-lift-pandemic-border-restrictions-in-2023/">“all cross-border exchanges, including trade, traffic, and tourism”.</a>. Measures have been so severe that the country appears to have experienced a significant <a href="https://foreignpolicy.com/2022/05/16/kim-north-korea-covid-outbreak-pandemic/">famine</a>. Though there were signs that things have gradually returned to normal, information on North Korea’s economy is pretty hard to come by. Ship traffic in and out of the country’s largest port, Nampo, is probably a pretty good indicator of the country’s economic activity.</p>
<p>But we can’t just head on down to Marine Tracker or other services that use AIS data to track ship movements. According to the <a href="https://home.treasury.gov/system/files/126/dprk_vessel_advisory_02232018.pdf">U.S. Treasury</a>, “North Korean-flagged merchant vessels have been known to intentionally disable their AIS transponders to mask their movements. This tactic, whether employed by North Korean-flagged vessels or other vessels involved in trade with North Korea, could conceal the origin or destination of cargo destined for, or originating in, North Korea.” They should know – they’re the ones imposing the sanctions that make it illegal to trade with North Korea.</p>
<p>A New York Times <a href="https://www.nytimes.com/2019/07/16/world/asia/north-korea-luxury-goods-sanctions.html">investigation</a> tracked the maritime voyage of luxury Mercedes cars from Germany to North Korea via the Netherlands, China, Japan, South Korea, and Russia. AIS transponders were turned off at several points throughout this journey, and the investigation had to rely on satellite imagery to fill in the gaps.</p>
@@ -688,8 +676,8 @@ gtag('config', 'G-RK9ZLZQ6GL', { 'anonymize_ip': true});
<p><img src="./images/ships_north_korea.jpg" class="img-fluid"></p>
<p>Looking at imagery from 2021, we can see ship traffic increasing from nearly zero to around 40 ships per day.</p>
</section>
<section id="ukraine" class="level3" data-number="12.6.2">
<h3 data-number="12.6.2" class="anchored" data-anchor-id="ukraine"><span class="header-section-number">12.6.2</span> Ukraine</h3>
<section id="ukraine" class="level3">
<h3 class="anchored" data-anchor-id="ukraine">Ukraine</h3>
<p>Odessa is Ukraine’s largest port. Following its invasion of Ukraine in February 2022, Russia instituted a naval blockade against Ukrainian ports. The impact of this blockade is clearly visible using the tool we’ve just built:</p>
<p><img src="./images/ships_ukraine.jpg" class="img-fluid"></p>
<p>The daily number of ships detected in the port of Odessa dropped from 40 to 50 to 0 to 5 following the invasion, and remained near zero until the blockade was lifted in September 2022.</p>
@@ -1051,12 +1039,12 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
<nav class="page-navigation">
<div class="nav-page nav-page-previous">
<a href="./C3_Blast.html" class="pagination-link">
<i class="bi bi-arrow-left-short"></i> <span class="nav-page-text"><span class="chapter-number">10</span>&nbsp; <span class="chapter-title">Blast Damage Assessment</span></span>
<i class="bi bi-arrow-left-short"></i> <span class="nav-page-text"><span class="chapter-title">Blast Damage Assessment</span></span>
</a>
</div>
<div class="nav-page nav-page-next">
<a href="./C5_Object_Detection.html" class="pagination-link">
<span class="nav-page-text"><span class="chapter-number">12</span>&nbsp; <span class="chapter-title">Object Detection</span></span> <i class="bi bi-arrow-right-short"></i>
<span class="nav-page-text"><span class="chapter-title">Object Detection</span></span> <i class="bi bi-arrow-right-short"></i>
</a>
</div>
</nav>