The code works but the linter doesn't.

app/api/actions/option-blocks.ts

@@ -11,3 +11,10 @@ export async function getOptionBlocks(): ActionResponsePromise<
 
   return getWithoutBody(fullUrl);
 }
+
+export async function getCoAppearanceMatrix(
+  yearGroupCohort: number
+): ActionResponsePromise<number[][]> {
+  const fullUrl = `${API_ACADEMIC_URL}/electives/coAppearanceMatrix?yearGroupCohort=${yearGroupCohort}`;
+  return getWithoutBody(fullUrl);
+}

app/playground/arcChart.tsx

@@ -0,0 +1,83 @@
+'use client';
+import * as d3 from 'd3';
+import {
+  BASE_HSL,
+  HUE_OPTIONS
+} from '../generic/components/color/color-context';
+import { Ribbon } from 'd3';
+
+export default function ArcChart({ data }: { data: number[][] }) {
+  const width = 640;
+  const height = width;
+  const outerRadius = Math.min(width, height) * 0.5 - 30;
+  const innerRadius = outerRadius - 20;
+  const sum = d3.sum(data.flat());
+  const tickStep = d3.tickStep(0, sum, 100);
+  const tickStepMajor = d3.tickStep(0, sum, 20);
+  const formatValue = d3.formatPrefix(',.0', tickStep);
+
+  const chord = d3
+    .chord()
+    .padAngle(20 / innerRadius)
+    .sortGroups(d3.descending)
+    .sortSubgroups(d3.ascending);
+
+  const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
+
+  const ribbon = d3.ribbon().radius(innerRadius);
+
+  const color = d3.scaleOrdinal(d3.schemeCategory10);
+
+  const chords = chord(data);
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`${-width / 2}, ${-height / 2} ${width} ${height}`}
+      style={{ maxWidth: '100%', height: 'auto', font: '10px sans-serif' }}
+    >
+      <defs>
+        {chords.map((chord, index) => {
+          const id = `gradient-${index}`;
+          const startColor =
+            BASE_HSL[HUE_OPTIONS[chord.target.index % HUE_OPTIONS.length].id]
+              .cssHSLA;
+          const endColor =
+            BASE_HSL[HUE_OPTIONS[chord.source.index % HUE_OPTIONS.length].id]
+              .cssHSLA;
+          return (
+            <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="0%" key={id}>
+              <stop offset="0%" style={{ stopColor: startColor }} />
+              <stop offset="100%" style={{ stopColor: endColor }} />
+            </linearGradient>
+          );
+        })}
+      </defs>
+      {/* Render the arcs */}
+      {chords.groups.map((group, index) => (
+        <path
+          key={index}
+          d={arc(group)}
+          fill={BASE_HSL[HUE_OPTIONS[index % HUE_OPTIONS.length].id].cssHSLA} // Modify this line to use HUE_OPTIONS if needed
+          stroke={BASE_HSL[HUE_OPTIONS[index % HUE_OPTIONS.length].id].cssHSLA}
+        />
+      ))}
+
+      {/* Render the ribbons */}
+      {chords.map((d, index) => {
+        const gradientId = `url(#gradient-${index})`;
+        return (
+          <path
+            key={index}
+            d={ribbon(d)}
+            fill={gradientId}
+            stroke={
+              BASE_HSL[HUE_OPTIONS[d.target.index % HUE_OPTIONS.length].id]
+                .cssHSLA
+            }
+          />
+        );
+      })}
+    </svg>
+  );
+}

app/playground/page.tsx

@@ -1,17 +1,20 @@
-import SomeComponent from './some-component';
 import { Card } from '@nextui-org/card';
 import SelectiveContextManagerGlobal from '../selective-context/components/global/selective-context-manager-global';
-import SomeButtonToControlGary from './some-button-to-control-gary';
-import SomeComponentInterestedInGary from './some-component-interested-in-gary';
+import { getCoAppearanceMatrix } from '../api/actions/option-blocks';
+import { isNotUndefined } from '../api/main';
+import { DataNotFoundCard } from '../timetables/students/[schedule]/data-not-found-card';
+import ArcChart from './arcChart';
 
 export default async function PlaygroundPage({}: {}) {
+  const { data } = await getCoAppearanceMatrix(12);
+  if (!isNotUndefined(data))
+    return <DataNotFoundCard>No matrix.</DataNotFoundCard>;
+
   return (
     <SelectiveContextManagerGlobal>
       <Card className={'flex gap-4'}>
-        <SomeComponent />
-        <SomeButtonToControlGary />
+        <ArcChart data={data} />
       </Card>
-      <SomeComponentInterestedInGary></SomeComponentInterestedInGary>
     </SelectiveContextManagerGlobal>
   );
 }

package.json

@@ -16,7 +16,6 @@
     "@hookform/resolvers": "^3.3.4",
     "@nextui-org/react": "^2.2.10",
     "@tremor/react": "^3.12.0",
-    "@types/d3": "^7.4.3",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "20.5.6",
     "@types/react": "18.2.21",
@@ -54,6 +53,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.0"
   }
 }