preliminary work

earthrise-media · Aug 22, 2023 · a5ce701 · a5ce701
1 parent ca7c874
commit a5ce701
Show file tree

Hide file tree

Showing 7 changed files with 3,950 additions and 0 deletions.
diff --git a/cowpea_gridcell_summary.csv b/cowpea_gridcell_summary.csv
diff --git a/cowpea_gridcell_summary_poly.geojson b/cowpea_gridcell_summary_poly.geojson
diff --git a/data-exploration.ipynb b/data-exploration.ipynb
diff --git a/description_cowpea_gridcell_summary.txt b/description_cowpea_gridcell_summary.txt
@@ -0,0 +1,31 @@
+Data description 
+
+cowpea_gridcell_summary.csv
+
+Kevin Karl and Jose Guarin
+August 9th 2023
+
+Column description
+
+Exp = experiment number based on gridcell ID. Each experiment is run 20 times corresponding to 20 years between 2040 to 2059 for each gridcell. We take the mean for the experiments run at each gridcell to represent the “2050s”
+
+Lat/lon = self explanatory. This model (the “SIMPLE” model) stipulates a point for each 0.5 x 0.5 degree gridcell. 
+
+baseline_yield = average yield for the reference baseline period (2000 to 2019) used to calculate the percentage change in estimated yield for the different climate change scenarios. In kg/hectare.
+
+The rest of the columns are combinations of the following two climate change factors:
+
+SSPs = Shared Socioeconomic Pathways. Here we are using SSP1-2.6 (low emissions scenario) and SSP3-7.0 (high emissions scenario).
+
+GCMs = the Global Circulation Models we are using are GFDL-ESM4 and IPSL-CM6A-LR.
+
+So, applying the combinations, we have:
+
+ssp126_gfdl (low emissions)
+ssp370_gfdl (high emissions)
+ssp126_ipsl (low emissions)
+ssp370_ipsl (high emissions)
+
+The appended “_av” text to the above strings refers to absolute values (i.e., yield, in kg/ha) and the  appended“ _pc” text to the above strings refers to percentage change in the yield from baseline_yields.
+
+The main result that we hope communicate through this analysis is the mean percentage change, for each gridcell, under the four climate change scenarios, for each crop. Again, each gridcell being represented by the mean of each particular time series (whether baseline reference period or 2050s).
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Trace Raster Data</title>
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+    <script src='https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.1/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.1/mapbox-gl.css' rel='stylesheet' />
+    <link rel="stylesheet" href="https://bootswatch.com/5/flatly/bootstrap.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+    <!-- bootswatch -->
+
+    <link rel="stylesheet" href="styles.css" />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <div class="sidebar" style="overflow-y:scroll; max-height: 100%;">
+        <div class="card secondary mb-3 shadow-sm" style="max-width: 100%; opacity: 0.9">
+            <div class="card-header fw-bold">
+                <img src="./favicon.ico" style="height: 30px; right: 0px">
+                <div class="vr my-0 py-0 mx-2"></div>
+                Cowpea Demo
+            </div>
+            <div class="card-body">
+                <select class="form-select" id="data-select">
+                    <option value="max">Max</option>
+                    <option value="min">Min</option>
+                    <option value="average">Average</option>
+
+                </select>
+            </div>
+        </div>
+    </div>
+        </fieldset>
+        </form>
+        </form>
+        <script>
+
+            const selectElement = document.getElementById("data-select");
+            // add an event listener to the dropdown and assign the value to a variable name selectedColor
+            // let selectedColor = "inferno";
+            // console.log(selectedColor)
+            // selectElement.addEventListener("change", function() {
+            //     selectedColor = this.value;
+            //     console.log(selectedColor);
+            //     map.setPaintProperty("cog-layer", 'raster-color', [ "interpolate", ["linear"], ["raster-value"], -2000, palettes[selectedColor][0], 32658, palettes[selectedColor][1], 49972, palettes[selectedColor][2], 67286, palettes[selectedColor][3], 84600, palettes[selectedColor][4] ]);
+
+            // });
+
+            mapboxgl.accessToken = 'pk.eyJ1IjoicGxvdGxpbmUiLCJhIjoiY2xmOGo1NW4wMGVtNzNya2UyNnllZGcyciJ9.gUFn8Mj5HQbagkpQWaDqaw';
+            const map = new mapboxgl.Map({
+                container: 'map', 
+                style: 'mapbox://styles/plotline/cll735ypl00ao01rdbh4m4a99', 
+                center: [-74.5, 40], 
+                zoom: 6, 
+                hash: true,
+            });
+
+
+            map.on('load', () => {
+                map.addSource("cog", {
+                    "type": "raster",
+                    "tiles": ["./temp/{z}/{x}/{y}.png"],
+                    "tileSize": 256,
+                    "scheme": "tms"
+                }
+                )
+                map.addLayer({
+                    id: 'cog-layer',
+                    'type': 'raster',
+                    'source': 'cog',
+                    'paint': {
+                        "raster-color": [
+                            "interpolate",
+                            ["linear"],
+                            ["raster-value"],
+                            -2000, palettes[selectedColor][0],
+                            32658, palettes[selectedColor][1],
+                            49972, palettes[selectedColor][2],
+                            67286, palettes[selectedColor][3],
+                            84600, palettes[selectedColor][4]
+                        ],
+                        "raster-color-mix": [84600, 0, 0, 0],
+                        "raster-color-range": [-1968, 84600]
+                    }
+                });
+            })
+
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            crossorigin="anonymous"></script>
+
+
+</body>
+
+</html>
+
+<!-- [ 256 * 256 * 256 * 0.1, 256 * 256 * 0.1, 256 * 0.1, -10000] -->
diff --git a/styles.css b/styles.css
@@ -0,0 +1,101 @@
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    font-family: "Kumbh Sans", sans-serif;
+  }
+  .sidebar {
+    padding: 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 408px;
+    height: 100%;
+    /* background-color: pink; */
+    z-index: 1;
+  }
+  .menu {
+    float: top;
+    height: auto;
+    width: 100%;
+    box-shadow: 0px 0px 10px #0000006a;
+    z-index: 2;
+    background-color: rgba(255, 255, 255, 0.85);
+    /* center vertically on page */
+    top: 1%;
+    left: 1%;
+    /* rounded corners */
+    border-radius: 5px;
+    padding-top: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .legend {
+    float: top;
+    height: auto;
+    width: 408px;
+    box-shadow: 0px 0px 10px #0000006a;
+    /* z-index: 1; */
+    background-color: rgba(255, 255, 255, 0.85);
+    /* center vertically on page */
+    top: 1%;
+    left: 1%;
+    /* rounded corners */
+    border-radius: 5px;
+    padding-top: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .map {
+    position: fixed;
+    top: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  .live-data {
+    position: fixed;
+    left: 408px;
+    top: 0px;
+    padding-top: 10px;
+    z-index: 1;
+    width: 300px;
+    /* overflow-x: visible; */
+    /* font-family: 'Kumbh Sans', sans-serif; */
+  }
+  /* create a class called live-data-text that matches h1 styling */
+  .live-data-text {
+    font-family: 'Kanit', monospace;
+    font-size: 2em;
+    font-weight: 400;
+    color: #000;
+    margin: 0;
+    padding: 0;
+    /* add a drop shadow */
+    /* text-shadow: 5px 5px 8px #ffffffb8; */
+    text-shadow: 0 1rem 3rem rgba(0,0,0,.3);
+    white-space: nowrap;
+
+  }
+
+  .live-data-graphic {
+    margin: 0;
+    padding: 0;
+  }
+  .popup-custom{
+    font-family: 'Inconsolata', Courier, monospace;
+    font-size: 1em;
+    font-weight: 300;
+    line-height: 1.3em;
+    color: rgb(72, 72, 72);
+    margin: 0px !important;
+  }
+  /* font-family: 'B612 Mono', monospace;
+  font-family: 'Fira Sans', sans-serif;
+  font-family: 'Inconsolata', monospace;
+  font-family: 'Kanit', sans-serif;
+  font-family: 'Kumbh Sans', sans-serif;
+  font-family: 'Major Mono Display', monospace;
+  font-family: 'Montserrat', sans-serif;
+  font-family: 'Ubuntu Mono', monospace; */