Add excess hydropower credits post (#337)

Author: badgley

commentary/excess-hydropower-credits/components/issuances.js

@@ -0,0 +1,132 @@
+import { Box } from 'theme-ui'
+import { format } from 'd3-format'
+import {
+  Chart,
+  Ticks,
+  TickLabels,
+  Axis,
+  AxisLabel,
+  Bar,
+  Plot,
+  Line,
+  Label,
+  Grid,
+} from '@carbonplan/charts'
+
+const data = {
+  2009: 2605227,
+  2010: 4991786,
+  2011: 7670460,
+  2012: 11857529,
+  2013: 8307486,
+  2014: 5508923,
+  2015: 5264806,
+  2016: 3310261,
+  2017: 3071090,
+  2018: 5971540,
+  2019: 9604842,
+  2020: 19355331,
+  2021: 43046942,
+  2022: 33783221,
+  2023: 37728043,
+  2024: 15870432,
+  2025: 6077005,
+}
+
+const counts = Object.keys(data).map((k) => [parseInt(k), data[k]])
+
+const Issuances = () => {
+  const formatter = format('~s')
+
+  return (
+    <Box sx={{ width: '100%', height: ['275px', '350px', '350px', '350px'] }}>
+      <Chart x={[2008, 2026]} y={[0, 40000000]} padding={{ left: 60 }}>
+        <Ticks left />
+        <Ticks
+          bottom
+          count={10}
+          sx={{ display: ['none', 'inherit', 'inherit', 'inherit'] }}
+        />
+        <Ticks
+          bottom
+          count={5}
+          sx={{ display: ['inherit', 'none', 'none', 'none'] }}
+        />
+        <TickLabels left format={formatter} />
+        <TickLabels
+          bottom
+          count={10}
+          sx={{ display: ['none', 'inherit', 'inherit', 'inherit'] }}
+        />
+        <TickLabels
+          bottom
+          count={5}
+          sx={{ display: ['inherit', 'none', 'none', 'none'] }}
+        />
+        <Axis left bottom />
+        <Grid
+          vertical
+          count={10}
+          sx={{ display: ['none', 'inherit', 'inherit', 'inherit'] }}
+        />
+        <Grid
+          vertical
+          count={5}
+          sx={{ display: ['inherit', 'none', 'none', 'none'] }}
+        />
+        <AxisLabel left align='left'>
+          Credits
+        </AxisLabel>
+        <AxisLabel bottom>Issuance year</AxisLabel>
+        <Plot>
+          <defs>
+            <pattern
+              id={`hatch-pattern`}
+              patternUnits='userSpaceOnUse'
+              width={1}
+              height={1}
+              patternTransform={'rotate(35)'}
+            >
+              <Box
+                as='line'
+                x1='0'
+                y1='0'
+                x2='0'
+                y2='1'
+                sx={{
+                  stroke: 'blue',
+                  strokeWidth: 1,
+                }}
+              />
+            </pattern>
+          </defs>
+          <Bar
+            width={0.7}
+            data={counts}
+            color={counts.map((c, i) =>
+              i === counts.length - 1 ? 'url(#hatch-pattern)' : 'blue'
+            )}
+          />
+          <Line
+            data={[
+              [2019.5, 10],
+              [2019.5, 40000000],
+            ]}
+            color={'secondary'}
+            sx={{ strokeWidth: 1, strokeDasharray: 4 }}
+          />
+        </Plot>
+        <Label
+          x={2019.5}
+          y={40000000}
+          sx={{ color: 'secondary', mr: 2 }}
+          align='right'
+        >
+          Hydropower Ban
+        </Label>
+      </Chart>
+    </Box>
+  )
+}
+
+export default Issuances

commentary/excess-hydropower-credits/components/project.js

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import { Rect } from '@carbonplan/charts'
+
+import data from './projects-data.json'
+
+const Timeline = ({ activeYears, color, y, years }) => {
+  const yearData = useMemo(() => {
+    let hasInactivated
+    const result = years.reduce((rects, year) => {
+      const currentRect = rects[rects.length - 1]
+      const active = activeYears.includes(year)
+      let status = 'active'
+      let fill = color
+      if (!active) {
+        fill = 'muted'
+        status = 'inactive'
+      } else if (hasInactivated) {
+        fill = 'blue'
+        status = 'reactivated'
+      }
+
+      if (!currentRect || currentRect.end || currentRect.status !== status) {
+        rects.push({
+          start: year,
+          status,
+          fill,
+        })
+        if (currentRect && currentRect.status !== status) {
+          currentRect.end = year - 1
+        }
+      }
+      hasInactivated ||= !active
+      return rects
+    }, [])
+    result[result.length - 1].end ||= years[years.length - 1]
+    return result
+  }, [activeYears, color, years])
+
+  return (
+    <g>
+      {yearData.map(({ start, end, fill }) => (
+        <Rect key={start} x={[start, end + 1]} y={[y, y + 1.25]} color={fill} />
+      ))}
+    </g>
+  )
+}
+
+const Project = ({ project, y, years }) => {
+  return (
+    <>
+      <Timeline
+        years={years}
+        color='blue'
+        activeYears={data[project].credit_data}
+        y={y}
+      />
+    </>
+  )
+}
+
+export default Project

commentary/excess-hydropower-credits/components/projects-data.json

@@ -0,0 +1,14 @@
+{
+  "VCS753": {
+    "credit_data": [2012, 2021, 2023, 2024]
+  },
+  "VCS766": {
+    "credit_data": [2012, 2021, 2022]
+  },
+  "VCS883": {
+    "credit_data": [2012, 2022, 2023, 2024]
+  },
+  "VCS884": {
+    "credit_data": [2012, 2023]
+  }
+}

commentary/excess-hydropower-credits/components/summary.js

@@ -0,0 +1,74 @@
+import { Box } from 'theme-ui'
+import {
+  Axis,
+  Chart,
+  Grid,
+  Plot,
+  TickLabels,
+  Ticks,
+  Label,
+  AxisLabel,
+} from '@carbonplan/charts'
+
+import Project from './project'
+import data from './projects-data.json'
+const YEARS = [
+  2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,
+]
+const TICKS = YEARS.filter((d, i) => i % 2 === 0).map((d) => d + 0.5)
+
+const Summary = () => {
+  return (
+    <Box sx={{ height: 300 }}>
+      <Chart x={[2012, 2025]} y={[16, -1]} padding={{ left: 0 }}>
+        <Axis bottom />
+        <AxisLabel bottom>Issuance years</AxisLabel>
+        <Ticks bottom values={TICKS} />
+        <TickLabels bottom values={TICKS} format={Math.floor} />
+        <Grid vertical values={YEARS} />
+        <Plot>
+          {Object.keys(data).map((project, i) => (
+            <g key={project}>
+              <Project
+                years={YEARS}
+                key={project}
+                project={project}
+                y={(i + 0.25) * 4}
+              />
+            </g>
+          ))}
+        </Plot>
+        {Object.keys(data).map((project, i) => (
+          <Label
+            key={project}
+            x={0}
+            y={(i + 0.25) * 4 - 1}
+            sx={{
+              mr: [4, 5, 5, 6],
+              color: 'primary',
+              mt: '-5px',
+            }}
+          >
+            {project}
+          </Label>
+        ))}
+
+        {/* {Object.keys(data).map((project, i) => (
+          <Label
+            key={project}
+            x={2013}
+            y={(i + 0.25) * 4}
+            sx={{
+              color: 'secondary',
+              ml: 2,
+              mt: '2px',
+            }}
+          >
+            Issuance gap
+          </Label>
+        ))} */}
+      </Chart>
+    </Box>
+  )
+}
+export default Summary