Merge pull request #286 from carbonplan/katamartin/offsets-db

Add OffsetsDB

articles/offsets-db-explainer/components/summary-table.js

@@ -0,0 +1,98 @@
+import { Box } from 'theme-ui'
+import { format } from 'd3-format'
+import { Row, Column } from '@carbonplan/components'
+
+const sx = {
+  label: {
+    fontFamily: 'heading',
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase',
+    fontSize: [2, 2, 2, 3],
+    pt: [2, 2, 2, 3],
+    mt: [1],
+    pb: [0],
+  },
+  twoColumn: {
+    // Force line break on smaller screens
+    '@media (width < 1251px)': {
+      wordSpacing: 100,
+    },
+  },
+  valueBig: {
+    fontFamily: 'faux',
+    letterSpacing: 'faux',
+    textTransform: 'uppercase',
+    fontSize: [6, 7, 7, 8],
+  },
+  valueSmall: {
+    fontFamily: 'mono',
+    letterSpacing: 'mono',
+    textTransform: 'uppercase',
+    fontSize: [3, 3, 3, 4],
+    mt: [2],
+  },
+  group: {
+    borderStyle: 'solid',
+    borderWidth: '0px',
+    borderTopWidth: '1px',
+    borderColor: 'muted',
+    mb: [0, 0, 0, 3],
+  },
+}
+
+const DATA = {
+  registries: 5,
+  projects: 9037,
+  issued: 2113300877,
+  retired: 1134048388,
+  size: 39,
+}
+
+const SummaryTable = () => {
+  return (
+    <Box>
+      <Row columns={[6, 6]}>
+        <Column start={[1, 1]} width={[3, 3]}>
+          <Box sx={sx.group}>
+            <Box sx={sx.label}>Offset projects</Box>
+            <Box sx={{ ...sx.valueBig, color: 'purple' }}>
+              {format(',.4r')(DATA.projects)}
+            </Box>
+          </Box>
+        </Column>
+        <Column start={[4, 4]} width={[3, 3]}>
+          <Box sx={sx.group}>
+            <Box sx={sx.label}>Offset credits</Box>
+            <Box sx={{ ...sx.valueBig, color: 'purple' }}>
+              {format('.3~s')(DATA.issued).replace('G', 'B')}
+            </Box>
+          </Box>
+        </Column>
+      </Row>
+      <Row columns={[6, 6]} sx={{ mt: [4] }}>
+        <Column start={[1, 1]} width={[2, 2]}>
+          <Box sx={sx.group}>
+            <Box sx={{ ...sx.label, ...sx.twoColumn }}>Offset registries</Box>
+            <Box sx={{ ...sx.valueSmall, color: 'pink' }}>
+              {DATA.registries}
+            </Box>
+          </Box>
+        </Column>
+        <Column start={[3, 3]} width={[2, 2]}>
+          <Box sx={sx.group}>
+            <Box sx={{ ...sx.label, ...sx.twoColumn }}>Database size</Box>
+            <Box sx={{ ...sx.valueSmall, color: 'pink' }}>{DATA.size} MB</Box>
+          </Box>
+        </Column>
+        <Column start={[5, 5]} width={[2, 2]}>
+          <Box sx={sx.group}>
+            <Box sx={{ ...sx.label, ...sx.twoColumn }}>Update frequency</Box>
+            <Box sx={{ ...sx.valueSmall, color: 'pink' }}>Daily</Box>
+          </Box>
+        </Column>
+      </Row>
+    </Box>
+  )
+}
+
+export default SummaryTable

articles/offsets-db-explainer/components/table-categories.js

@@ -0,0 +1,76 @@
+import { Box } from 'theme-ui'
+import { Table } from '@carbonplan/components'
+
+const table = [
+  [
+    <Box key='Forest' sx={{ color: 'green' }}>
+      Forest
+    </Box>,
+    <>
+      Offset credits generated by changes in the management of forested
+      ecosystems, including efforts to plant, conserve, and expand forests.
+    </>,
+  ],
+  [
+    <Box key='Renewable energy' sx={{ color: 'purple' }}>
+      Renewable energy
+    </Box>,
+    <>
+      Offset credits generated by the development of renewable energy projects.
+    </>,
+  ],
+  [
+    <Box key='GHG management' sx={{ color: 'blue' }}>
+      GHG management
+    </Box>,
+    <>
+      Offset credits generated by changes in the management of greenhouse
+      gasses, such that they contribute less to climate change. Projects often
+      destroy greenhouse gasses or introduce substitute gasses in industrial
+      processes.
+    </>,
+  ],
+
+  [
+    <Box key='Energy efficiency' sx={{ color: 'yellow' }}>
+      Energy efficiency
+    </Box>,
+    <>
+      Offset credits generated through technological changes that lower the
+      emissions required to complete a task.
+    </>,
+  ],
+  [
+    <Box key='Fuel switching' sx={{ color: 'pink' }}>
+      Fuel switching
+    </Box>,
+    <>
+      Offset credits generated by using a lower polluting fuel to complete a
+      task.
+    </>,
+  ],
+  [
+    <Box key='Agriculture' sx={{ color: 'orange' }}>
+      Agriculture
+    </Box>,
+    <>
+      Offset credits generated by changes in the management of agricultural
+      crops or livestock. Changes in livestock waste management fall under GHG
+      management.
+    </>,
+  ],
+]
+
+const TableCategories = () => {
+  return (
+    <Table
+      columns={6}
+      header={'Protocol Categories'}
+      start={[1, 3]}
+      width={[2, 4]}
+      data={table}
+    />
+  )
+}
+
+export default TableCategories

articles/offsets-db-explainer/components/time-series.js

@@ -0,0 +1,63 @@
+import { Box } from 'theme-ui'
+import {
+  Axis,
+  AxisLabel,
+  Chart,
+  TickLabels,
+  Ticks,
+  Line,
+  Plot,
+  Grid,
+  Label,
+} from '@carbonplan/charts'
+import data from './data.json'
+
+const getLineData = (protocol) =>
+  data[protocol]
+    .filter((d) => typeof d[1] === 'number')
+    .map(([dateString, value]) => {
+      const date = new Date(dateString)
+      return [date.getFullYear() + (date.getMonth() + 1) / 12, value]
+    })
+
+const LINES = [
+  { protocol: 'car-livestock', color: 'orange' },
+  { protocol: 'car-landfill', color: 'blue' },
+  { protocol: 'car-forest-mx', color: 'green' },
+].map((l) => ({ ...l, data: getLineData(l.protocol) }))
+
+const TimeSeries = () => {
+  return (
+    <Box sx={{ height: [200, 300] }}>
+      <Chart x={[2008.75, 2024]} y={[0, 250]}>
+        <Axis left bottom />
+        <AxisLabel left>Cumulative projects</AxisLabel>
+        <AxisLabel bottom>Listing date</AxisLabel>
+        <Ticks left bottom />
+        <TickLabels left bottom />
+        <Grid vertical />
+        <Label
+          x={2023}
+          y={222}
+          align='right'
+          sx={{ color: 'green', whiteSpace: 'nowrap' }}
+        >
+          car-forest-mx
+        </Label>
+        <Label x={2011} y={135} sx={{ color: 'blue', whiteSpace: 'nowrap' }}>
+          car-landfill
+        </Label>
+        <Label x={2013} y={40} sx={{ color: 'orange', whiteSpace: 'nowrap' }}>
+          car-livestock
+        </Label>
+        <Plot>
+          {LINES.map(({ protocol, color, data }) => (
+            <Line key={protocol} data={data} color={color} width={2} />
+          ))}
+        </Plot>
+      </Chart>
+    </Box>
+  )
+}
+
+export default TimeSeries