Add article

carbonplan · Jul 15, 2024 · e5fb069 · e5fb069
1 parent 832dbb1
commit e5fb069
Show file tree

Hide file tree

Showing 17 changed files with 3,138 additions and 0 deletions.
diff --git a/articles/oae-efficiency-explainer/components/alk-chem-diagram.js b/articles/oae-efficiency-explainer/components/alk-chem-diagram.js
diff --git a/articles/oae-efficiency-explainer/components/carb-chem-diagram.js b/articles/oae-efficiency-explainer/components/carb-chem-diagram.js
diff --git a/articles/oae-efficiency-explainer/components/carbonate-slider.js b/articles/oae-efficiency-explainer/components/carbonate-slider.js
@@ -0,0 +1,173 @@
+import React from 'react'
+import { Box, Flex, Label, Checkbox, Slider } from 'theme-ui'
+
+const CarbonateSlider = ({
+  data,
+  slidableVariable,
+  varIndex,
+  setVarIndex,
+  equilibrated,
+  setEquilibrated,
+}) => {
+  return (
+    <Box
+      sx={{
+        fontFamily: 'mono',
+        width: 275,
+      }}
+    >
+      {data.dic && (
+        <>
+          <Flex
+            sx={{
+              justifyContent: 'space-between',
+              gap: 4,
+              mb: 3,
+            }}
+          >
+            <Flex
+              sx={{
+                flexDirection: 'column',
+                flex: 1,
+              }}
+            >
+              <Box sx={{ fontSize: 5 }}>
+                {data.dic[varIndex] > 0
+                  ? `+${data.dic[varIndex].toFixed()}`
+                  : data.dic[varIndex].toFixed()}
+              </Box>
+              <Box
+                sx={{
+                  color: 'secondary',
+                  fontSize: 1,
+                }}
+              >
+                Ocean carbon (DIC)
+              </Box>
+            </Flex>
+            <Flex
+              sx={{
+                flexDirection: 'column',
+                flex: 1,
+              }}
+            >
+              <Box sx={{ fontSize: 5 }}>
+                {data.ph[varIndex] > 0
+                  ? `+${data.ph[varIndex].toFixed(2)}`
+                  : data.ph[varIndex].toFixed(2)}
+              </Box>
+              <Box
+                sx={{
+                  color: 'secondary',
+                  fontSize: 1,
+                }}
+              >
+                pH
+              </Box>
+            </Flex>
+          </Flex>
+          <Flex sx={{ mb: 3 }}>
+            <Box sx={{ flex: 1 }}>
+              <Box sx={{ fontSize: 4 }}>
+                {data.co2[varIndex] > 0
+                  ? `+${data.co2[varIndex].toFixed()}`
+                  : data.co2[varIndex].toFixed()}
+              </Box>
+              <Box
+                sx={{
+                  color: 'secondary',
+                  fontSize: 1,
+                }}
+              >
+                CO₂
+              </Box>
+            </Box>
+            <Box sx={{ flex: 1 }}>
+              <Box sx={{ fontSize: 4 }}>
+                {data.hco3[varIndex] > 0
+                  ? `+${data.hco3[varIndex].toFixed()}`
+                  : data.hco3[varIndex].toFixed()}
+              </Box>
+              <Box
+                sx={{
+                  color: 'secondary',
+                  fontSize: 1,
+                }}
+              >
+                HCO₃
+              </Box>
+            </Box>
+            <Box sx={{ flex: 1 }}>
+              <Box sx={{ fontSize: 4 }}>
+                {data.co3[varIndex] > 0
+                  ? `+${data.co3[varIndex].toFixed()}`
+                  : data.co3[varIndex].toFixed()}
+              </Box>
+              <Box
+                sx={{
+                  color: 'secondary',
+                  fontSize: 1,
+                }}
+              >
+                CO₃
+              </Box>
+            </Box>
+          </Flex>
+        </>
+      )}
+      <Box
+        sx={{
+          fontSize: 1,
+          mb: 3,
+          color: 'secondary',
+        }}
+      >
+        (∆µmol / kg seawater)
+      </Box>
+      <Box sx={{ textAlign: 'center' }}>
+        <Slider
+          value={varIndex}
+          onChange={(e) => setVarIndex(parseFloat(e.target.value))}
+          min={0}
+          max={
+            data && slidableVariable.key in data
+              ? Object.keys(data[slidableVariable.key]).length - 1
+              : 0
+          }
+          step={1}
+        />
+      </Box>
+      <Flex
+        sx={{
+          alignItems: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <Box sx={{ fontSize: 4 }}>
+          +
+          {data[slidableVariable.key] &&
+            data[slidableVariable.key][varIndex].toFixed(0)}
+        </Box>
+        <Box sx={{ color: 'secondary' }}>{slidableVariable.name}</Box>
+        {equilibrated !== undefined && (
+          <Label
+            sx={{
+              cursor: 'pointer',
+              pt: 2,
+              color: 'secondary',
+              justifyContent: 'center',
+            }}
+          >
+            <Checkbox
+              checked={equilibrated}
+              onChange={(e) => setEquilibrated(e.target.checked)}
+            />
+            Equilibrated
+          </Label>
+        )}
+      </Flex>
+    </Box>
+  )
+}
+
+export default CarbonateSlider
diff --git a/articles/oae-efficiency-explainer/components/chemistry.js b/articles/oae-efficiency-explainer/components/chemistry.js
@@ -0,0 +1,23 @@
+import { Box } from 'theme-ui'
+
+export const HCO3 = () => {
+  return (
+    <>
+      HCO₃
+      <Box as='span' sx={{ ml: '-5px' }}>
+        ⁻
+      </Box>
+    </>
+  )
+}
+
+export const CO3 = () => {
+  return (
+    <>
+      CO₃
+      <Box as='span' sx={{ ml: '-6px' }}>
+        ²⁻
+      </Box>
+    </>
+  )
+}
diff --git a/articles/oae-efficiency-explainer/components/data.js b/articles/oae-efficiency-explainer/components/data.js
@@ -0,0 +1,70 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { feature } from 'topojson-client'
+import zarr from 'zarr-js'
+
+const DataContext = createContext({})
+
+export const DataWrapper = ({ children }) => {
+  const [efficiencies, setEfficiencies] = useState({})
+  const [regions, setRegions] = useState()
+  const [loader, setLoader] = useState(null)
+
+  useEffect(() => {
+    zarr().open(
+      'https://carbonplan-oae-efficiency.s3.us-west-2.amazonaws.com/store1b.zarr/OAE_efficiency',
+      (err, get) => {
+        setLoader(() => get)
+      }
+    )
+  }, [])
+
+  return (
+    <DataContext.Provider
+      value={{ efficiencies, setEfficiencies, regions, setRegions, loader }}
+    >
+      {children}
+    </DataContext.Provider>
+  )
+}
+
+export const useEfficiency = (injectionMonth) => {
+  const { efficiencies, loader, setEfficiencies } = useContext(DataContext)
+
+  useEffect(() => {
+    if (!efficiencies[injectionMonth] && loader) {
+      setEfficiencies((prev) => ({ ...prev, [injectionMonth]: 'loading' }))
+      loader([0, 0, injectionMonth], (innerErr, array) => {
+        setEfficiencies((prev) => ({ ...prev, [injectionMonth]: array }))
+      })
+    }
+  }, [efficiencies, setEfficiencies, injectionMonth, loader])
+
+  return {
+    efficiency:
+      efficiencies[injectionMonth] === 'loading'
+        ? null
+        : efficiencies[injectionMonth],
+  }
+}
+
+export const useRegions = () => {
+  const { regions, setRegions } = useContext(DataContext)
+
+  useEffect(() => {
+    if (!regions) {
+      fetch(
+        'https://carbonplan-oae-efficiency.s3.us-west-2.amazonaws.com/regions.topojson'
+      )
+        .then((response) => response.json())
+        .then((topojsonData) => {
+          const geojsonData = feature(
+            topojsonData,
+            topojsonData.objects.regions
+          )
+          setRegions(geojsonData)
+        })
+    }
+  }, [regions, setRegions])
+
+  return { regions: regions === 'loading' ? null : regions }
+}