Use new Figure component

package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@carbonplan/charts": "^2.7.0",
     "@carbonplan/colormaps": "^3.0.1",
-    "@carbonplan/components": "^11.2.3",
+    "@carbonplan/components": "^11.5.0",
     "@carbonplan/icons": "^1.0.0",
     "@carbonplan/layouts": "^1.1.3",
     "@carbonplan/maps": "^1.2.0",

posts/climate-trace-release.md

@@ -1,5 +1,5 @@
-import { Link, FigureCaption } from '@carbonplan/components'
-import Figure from './climate-trace-release/figure'
+import { Link, Figure, FigureCaption } from '@carbonplan/components'
+import Map from './climate-trace-release/figure'
 
 export const meta = {
   version: '1.0.0',
@@ -17,24 +17,27 @@ In early 2020, CarbonPlan joined the [Climate TRACE](https://www.climatetrace.or
 
 For the initial release of the Climate TRACE platform we used established methods to estimate gross emissions from stand-replacing forest disturbances. Our work closely followed the approach of [Zarin et al. (2016)](https://doi.org/10.1111/gcb.13153) and is similar to that of the recent [Harris et al. (2021)](https://doi.org/10.1038/s41558-020-00976-6) paper, the results of which are hosted by the [Global Forest Watch](https://www.globalforestwatch.org/) platform. Our analysis created a data product of annual emissions for each 30 m x 30 m forest pixel across the globe from 2001 through 2020. The primary differences between our implementation for the Climate TRACE platform and the original data from Zarin et al. (2016) are an extension through 2020 and the complete coverage of all global forested areas.
 
-<Figure />
-<FigureCaption>
-  Cumulative emissions from forests (2001 - 2020). Pixels are 1º x 1º. Open the{' '}
-  <Link
-    sx={{
-      color: 'secondary',
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover': {
-          color: 'primary',
+<Figure>
+  <Map />
+  <FigureCaption>
+    Cumulative emissions from forests (2001 - 2020). Pixels are 1º x 1º. Open
+    the{' '}
+    <Link
+      sx={{
+        color: 'secondary',
+        '@media (hover: hover) and (pointer: fine)': {
+          '&:hover': {
+            color: 'primary',
+          },
         },
-      },
-    }}
-    href='/research/forest-carbon'
-  >
-    interactive
-  </Link>{' '}
-  version to explore more.
-</FigureCaption>
+      }}
+      href='/research/forest-carbon'
+    >
+      interactive
+    </Link>{' '}
+    version to explore more.
+  </FigureCaption>
+</Figure>
 
 Our complete methods are documented in detail [here](https://docs.google.com/document/d/e/2PACX-1vSVPWE8BOOqu_G9_bdioMquhoIOTnJ4UOYeJeCpEr9RMBrazStaIxQIJtrt8DzVBMZb4waxA9fLyyqr/pub) and all of our source code is available on [GitHub](https://github.com/carbonplan/trace). The full data product is visible via an interactive [webmap](https://carbonplan.org/research/forest-carbon). Interested users can also check out a sample [jupyter notebook](https://aws-uswest2-binder.pangeo.io/v2/gh/carbonplan/trace/HEAD?urlpath=lab/tree/notebooks%2Fblogpost_sample_notebook.ipynb) to inspect the resulting publicly-available, cloud-based emissions archive at the 30 m scale and visualize the data like the map above.
 

posts/climate-trace-release/figure.js

@@ -89,10 +89,7 @@ const Figure = () => {
 
   return (
     <Box
-      as='figure'
       sx={{
-        mt: [6, 6, 6, 7],
-        mb: [4, 4, 4, 5],
         border: 'solid',
         borderColor: 'muted',
         borderWidth: '1px',

posts/open-lidar-biomass.md

@@ -1,5 +1,5 @@
-import { FigureCaption } from '@carbonplan/components'
-import Figure from './open-lidar-biomass/figure'
+import { Figure, FigureCaption } from '@carbonplan/components'
+import Chart from './open-lidar-biomass/figure'
 
 export const meta = {
   version: '1.0.0',
@@ -22,25 +22,27 @@ Estimating forest carbon begins with understanding a single tree. A ground truth
 To generate global-scale datasets of AGB in a more cost-effective manner, researchers have turned to remotely-sensed data. For instance, space-mounted LiDAR has been used to measure elevation globally. This data can be processed to derive canopy metrics (e.g. vegetation height) that are predictive of biomass. Researchers can then develop empirical allometric equations that translate LiDAR-based canopy metrics to AGB using collocated ground measurements. These equations have been published for different geographical, bioclimatic, and ecological zones.
 Recently, [Harris et al. (2021)](https://doi.org/10.1038/s41558-020-00976-6) synthesized these equations to generate biomass estimates across the globe, and helpfully included in their methods a comprehensive [spreadsheet](https://static-content.springer.com/esm/art%3A10.1038%2Fs41558-020-00976-6/MediaObjects/41558_2020_976_MOESM3_ESM.xlsx) of allometric equations and height metric definitions. Others have combined LiDAR and other remote-sensing products for biomass estimation with broader spatial or more frequent temporal coverage ([Baccini et al., 2017](https://doi.org/10.1126/science.aam5962); [Wang et al., 2021](https://doi.org/10.1038/s41558-021-01027-4), [Duncanson et al, 2022](https://doi.org/10.1016/j.rse.2021.112845)).
 
-<Figure />
-<FigureCaption number={1}>
-  Example LiDAR return signal, which could result in two different tree heights
-  depending on the choice of methods. The y-axis represents distance from the
-  satellite where the LiDAR instrument is located. A higher value (lower
-  position) on the y-axis indicates a distance farther from the satellite, and
-  thus closer to the center of earth. (Note that for simplicity we show the top
-  of the y-axis as 0. The actual distance from the satellite can be calculated
-  by adding ~600,000 meters). A higher value on the x-axis indicates a larger
-  return signal strength at that distance, implying high reflection and more
-  tree surface area at that height. The raw LiDAR return data are plotted in
-  dark gray dots and a fitted smooth curve is plotted in white. In this example,
-  using either of the two definitions of ground peak lead to different
-  calculated magnitudes of <i>Max Vegetation Height</i> (25% less when using
-  alternative ground peak in this example). In general, allometric equations
-  relying on <i>Max Vegetation Height</i> as an input would estimate higher
-  biomass (if using the yellow ground peak) or lower biomass (if using the pink
-  alternative ground peak).{' '}
-</FigureCaption>
+<Figure>
+  <Chart />
+  <FigureCaption number={1}>
+    Example LiDAR return signal, which could result in two different tree
+    heights depending on the choice of methods. The y-axis represents distance
+    from the satellite where the LiDAR instrument is located. A higher value
+    (lower position) on the y-axis indicates a distance farther from the
+    satellite, and thus closer to the center of earth. (Note that for simplicity
+    we show the top of the y-axis as 0. The actual distance from the satellite
+    can be calculated by adding ~600,000 meters). A higher value on the x-axis
+    indicates a larger return signal strength at that distance, implying high
+    reflection and more tree surface area at that height. The raw LiDAR return
+    data are plotted in dark gray dots and a fitted smooth curve is plotted in
+    white. In this example, using either of the two definitions of ground peak
+    lead to different calculated magnitudes of <i>Max Vegetation Height</i> (25%
+    less when using alternative ground peak in this example). In general,
+    allometric equations relying on <i>Max Vegetation Height</i> as an input
+    would estimate higher biomass (if using the yellow ground peak) or lower
+    biomass (if using the pink alternative ground peak).{' '}
+  </FigureCaption>
+</Figure>
 
 ## Why the details matter