feat: basic plotting example

This adds a basic plot to tabs in a naive, hardcoded way. This will be
updated to be more customizable.

frontend/app/block/plotblock.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+function PlotWindow() {
+    return <div className="plot-window"></div>;
+}
+
+function PlotConfig() {
+    return <input type="text" className="plot-config" />;
+}
+
+function PlotBlock() {
+    const containerRef = React.useRef<HTMLInputElement>();
+    const [data, setData] = React.useState();
+
+    React.useEffect(() => {
+        d3.csv("/plotdata/congress.csv", d3.autoType).then(setData);
+    }, []);
+
+    React.useEffect(() => {
+        if (data === undefined) {
+            return;
+        }
+        // replace start
+        const plot = Plot.plot({
+            aspectRatio: 1,
+            x: { label: "Age (years)" },
+            y: {
+                grid: true,
+                label: "← Women · Men →",
+                labelAnchor: "center",
+                tickFormat: Math.abs,
+            },
+            marks: [
+                Plot.dot(
+                    data,
+                    Plot.stackY2({
+                        x: (d) => 2023 - d.birthday.getUTCFullYear(),
+                        y: (d) => (d.gender === "M" ? 1 : -1),
+                        fill: "gender",
+                        title: "full_name",
+                    })
+                ),
+                Plot.ruleY([0]),
+            ],
+        });
+        // replace end
+        containerRef.current.append(plot);
+
+        return () => {
+            plot.remove();
+        };
+    }, [data]);
+
+    return (
+        <div className="plot-block">
+            <div className="plot-window" ref={containerRef} />
+            <PlotConfig />
+        </div>
+    );
+}
+
+export { PlotBlock };

frontend/app/tab/tab.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import * as jotai from "jotai";
 import { Block } from "@/app/block/block";
 import { atoms } from "@/store/global";
+import { PlotBlock } from "@/app/block/plotblock";
 
 import "./tab.less";
 
@@ -23,6 +24,7 @@ const TabContent = ({ tabId }: { tabId: string }) => {
                     </div>
                 );
             })}
+            <PlotBlock />
         </div>
     );
 };