Add Open Climate Risk content

articles/climate-risk-explainer/components/factors-table.js

@@ -0,0 +1,168 @@
+import { Box, Flex } from 'theme-ui'
+import { Button, Figure, Table } from '@carbonplan/components'
+import { RotatingArrow } from '@carbonplan/icons'
+
+const FACTORS = [
+  {
+    name: 'Building attributes like fire-resistant construction and defensible space',
+    explanation:
+      'Interventions like metal roofs, clean gutters, resistant siding, and defensible space can dramatically reduce the risk of home ignition. We do not account for any of these attributes.',
+    resources: [
+      {
+        label: 'Home hardening',
+        url: 'https://readyforwildfire.org/prepare-for-wildfire/hardening-your-home',
+      },
+      {
+        label: 'Home ignition zone',
+        url: 'https://www.nfpa.org/education-and-research/wildfire/preparing-homes-for-wildfire',
+      },
+      {
+        label: 'Exterior home protection',
+        url: 'https://cpaw.headwaterseconomics.org/wp-content/uploads/2022/08/2022HE-OwnYourZoneHouse-R3_CPAW.pdf',
+      },
+    ],
+  },
+  {
+    name: 'Building-to-building spread',
+    explanation:
+      'Our estimates do not account for how, during an urban conflagration, buildings can become fuel, and fire can spread amongst communities. This is an area of research in urgent need of innovation.',
+    resources: [
+      {
+        label: 'Wildland-urban fire',
+        url: 'https://doi.org/10.1073/pnas.2315797120',
+      },
+      {
+        label: 'Research opportunities',
+        url: 'https://headwaterseconomics.org/natural-hazards/wildfire/wildfire-risk-models-built-environment/',
+      },
+    ],
+  },
+  {
+    name: 'Changes in vegetation, including wildfires after 2020',
+    explanation:
+      'Our estimates are based on a combination of vegetation maps from the ends of 2020 and 2022. Changes in vegetation in the interim, particularly wildfires, would have removed fuel and temporarily reduced our BP and cRPS values, thereby decreasing the final risk estimate. In these cases our risk estimates are likely anomalously high-biased. Similarly, prescribed fire is an effective technique for reducing fire risk, but if it occurred after 2020, our estimates would not capture it.',
+    resources: [
+      {
+        label: 'Prescribed fire',
+        url: 'https://www.fs.usda.gov/managing-land/prescribed-fire',
+      },
+      {
+        label: 'Wildfires',
+        url: 'https://cires.colorado.edu/news/fewer-forest-fires-burn-north-america-today-past-and-thats-bad-thing',
+      },
+    ],
+  },
+  {
+    name: 'Community mitigation planning',
+    explanation:
+      'Our estimates do not account for community-scale actions like wildfire protection plans and land-use planning. These actions can reduce the risk of wildfire entering a community.',
+    resources: [
+      {
+        label: 'Firewise communities',
+        url: 'https://www.nfpa.org/education-and-research/wildfire/firewise-usa',
+      },
+      {
+        label: 'Community wildfire protection plan',
+        url: 'https://www.iafc.org/docs/default-source/pdf/wild_cwppleadrsguide.pdf',
+      },
+      {
+        label: 'Fire adapted communities tool',
+        url: 'https://fireadaptednetwork.org/resources/fac-assessment-tool/',
+      },
+      {
+        label: 'Land-use planning',
+        url: 'https://wildfirerisk.org/reduce-risk/land-use-planning',
+      },
+    ],
+  },
+  {
+    name: 'Community emergency planning',
+    explanation:
+      'Community-level emergency planning can support the development of strong evacuation plans and ensure adequate access, which could reduce wildfire risk.',
+    resources: [
+      {
+        label: 'Evacuation readiness',
+        url: 'https://www.nist.gov/publications/wui-fire-evacuation-and-sheltering-considerations-assessment-planning-and-execution-0',
+      },
+      {
+        label: 'Fire apparatus access roads',
+        url: 'https://www.nfpa.org/news-blogs-and-articles/blogs/2021/01/08/fire-apparatus-access-roads',
+      },
+      {
+        label: 'Wildfire risk to roads',
+        url: 'https://www.climatecentral.org/climate-matters/wildfire-risk-to-homes',
+      },
+    ],
+  },
+  {
+    name: 'Changes to ignition patterns',
+    explanation:
+      'Our model is based on simulations which used a fixed map of ignition probabilities. Changes in ignition patterns could either increase or decrease the estimated risk in a given location.',
+    resources: [
+      {
+        label: 'Preventing ignitions',
+        url: 'https://wildfirerisk.org/reduce-risk/prevent-ignitions',
+      },
+      {
+        label: 'Wildfire prevention',
+        url: 'https://dnr.wa.gov/wildfire-resources/wildfire-prevention',
+      },
+    ],
+  },
+]
+
+const FactorsTable = () => {
+  return (
+    <Figure>
+      <Table
+        columns={6}
+        start={[1, 1, 1]}
+        width={[6, 6, 6]}
+        data={[
+          ...FACTORS.map(({ name, explanation, resources }) => [
+            <Box key='name' sx={{ color: 'red' }}>
+              {name}
+            </Box>,
+            <Box
+              key='explanation'
+              sx={{
+                mt: [2, 3, 3, 3],
+                fontFamily: 'body',
+                letterSpacing: 'body',
+                textTransform: 'none',
+              }}
+            >
+              {explanation}
+            </Box>,
+
+            <Flex
+              key='links'
+              sx={{
+                mt: [2, 3, 3, 3],
+                columnGap: 4,
+                rowGap: 2,
+                flexWrap: 'wrap',
+              }}
+            >
+              {resources.map(({ label, url }) => (
+                <Button
+                  key={url}
+                  href={url}
+                  suffix={<RotatingArrow sx={{ display: 'inline' }} />}
+                  size='xs'
+                  inverted
+                >
+                  <Box as='span' sx={{}}>
+                    {label}
+                  </Box>
+                </Button>
+              ))}
+            </Flex>,
+          ]),
+        ]}
+      />
+    </Figure>
+  )
+}
+
+export default FactorsTable

articles/climate-risk-explainer/components/geoAlbers.js

@@ -0,0 +1,62 @@
+import { geoAlbers as geoAlbersBase } from 'd3-geo'
+
+const glsl = {
+  geoAlbersInvert: `
+  float sgn(float x) { return (x > 0.0) ? 1.0 : ((x < 0.0) ? -1.0 : 0.0); }
+  vec2 sphRotateInverse(vec2 lonlat, float yawDeg, float pitchDeg) {
+  // Inverse of sphRotate
+  float lon = radians(lonlat.x), lat = radians(lonlat.y);
+  float yaw = radians(yawDeg);
+  float pitch = radians(pitchDeg);
+
+  float slat = sin(lat), clat = cos(lat);
+  float sp = sin(pitch), cp = cos(pitch);
+
+  float lon1 = atan(clat * sin(lon), clat * cp * cos(lon) + slat * sp) - yaw;
+
+  float slat1 = clamp(slat * cp + clat * sp * cos(lon), -1.0, 1.0);
+  float lat1 = asin(slat1);
+  return vec2(degrees(lon1), degrees(lat1));
+}
+  vec2 geoAlbersInvert(float x, float y)
+{
+  float phi1     = radians(29.5);
+  float phi2     = radians(45.5);
+  float phi0     = radians(38.7);
+  float lambda0  = radians(-0.6);
+
+  float n = 0.5 * (sin(phi1) + sin(phi2));
+  float C = pow(cos(phi1), 2.0) + 2.0 * n * sin(phi1);
+  float rho0 = sqrt(max(0.0, C - 2.0 * n * sin(phi0))) / n;
+
+  float xr   = x;
+  float yr   = rho0 - y;
+  float rho  = sgn(n) * sqrt(xr * xr + yr * yr);
+  float theta = atan(xr, yr); 
+
+
+  float lon = lambda0 + theta / n;
+  // guard for tiny numeric drift
+  float s = (C - pow(rho * n, 2.0)) / (2.0 * n);
+  float lat = asin(clamp(s, -1.0, 1.0));
+
+  vec2 lonlat = vec2(degrees(lon), degrees(lat));
+  return sphRotateInverse(lonlat, 96.0, 0.0);
+}
+
+  `,
+}
+
+const geoAlbers = () => {
+  const projection = geoAlbersBase().precision(0.1)
+  projection.glsl = {
+    name: 'geoAlbersInvert',
+    func: glsl.geoAlbersInvert,
+    nameForward: 'geoAlbers',
+    funcForward: glsl.geoAlbers,
+  }
+  projection.id = 'geoAlbers'
+  return projection
+}
+
+export default geoAlbers

articles/climate-risk-explainer/components/methods/blurring.js

@@ -0,0 +1,88 @@
+import { Box } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import zarr from 'zarr-js'
+import { Colorbar, Column, Row } from '@carbonplan/components'
+import { useThemedColormap } from '@carbonplan/colormaps'
+import Grid from './grid'
+
+const SOURCE =
+  'https://carbonplan-ocr.s3.us-west-2.amazonaws.com/output/fire-risk/tensor/web-figures/v1.1.0/methods-step04-gaussian-blur-30m-5070.zarr/burn_probability'
+
+const CLIM = [0, 0.01]
+
+const Blurring = () => {
+  const [data, setData] = useState(null)
+  const colormap = useThemedColormap('reds', { format: 'hex' })
+
+  useEffect(() => {
+    const loadArray = async () => {
+      try {
+        zarr().load(SOURCE, (err, array) => {
+          if (err) {
+            console.error('Error opening array:', err)
+            return
+          }
+
+          setData(array)
+        })
+      } catch (error) {
+        console.error('Error fetching group:', error)
+      }
+    }
+    loadArray()
+  }, [])
+
+  return (
+    <Box>
+      <Row columns={6}>
+        <Column start={1} width={3}>
+          <Box
+            sx={{
+              textAlign: 'center',
+              fontFamily: 'mono',
+              letterSpacing: 'mono',
+              textTransform: 'uppercase',
+              mb: 1,
+            }}
+          >
+            Before
+          </Box>
+
+          <Grid
+            clim={CLIM}
+            colormap={colormap}
+            data={data?.pick(0, null, null)}
+          />
+        </Column>
+        <Column start={4} width={3}>
+          <Box
+            sx={{
+              textAlign: 'center',
+              fontFamily: 'mono',
+              letterSpacing: 'mono',
+              textTransform: 'uppercase',
+              mb: 1,
+            }}
+          >
+            After
+          </Box>
+
+          <Grid
+            clim={CLIM}
+            colormap={colormap}
+            data={data?.pick(1, null, null)}
+          />
+        </Column>
+      </Row>
+      <Colorbar
+        horizontal
+        label='Burn probability'
+        clim={CLIM}
+        colormap={colormap}
+        sx={{ mt: 3 }}
+      />
+    </Box>
+  )
+}
+
+export default Blurring