Checkpoint for histogram

It takes a lot of render time to get a usable result, and it's not that interesting. Committing so I can save the work if I want to revisit it, but abandoning the idea for now.

blog/2024-11-15-playing-with-fire/3-log-density/FlameHistogram.tsx

@@ -1,5 +1,30 @@
-import {VictoryArea} from "victory";
+import {VictoryChart, VictoryLine, VictoryScatter, VictoryTheme} from "victory";
+import {useContext, useEffect, useState} from "react";
+import {PainterContext} from "../src/Canvas";
+import {chaosGameHistogram} from "./chaosGameHistogram";
+import {PlotData, plotHistogram} from "./plotHistogram";
 
-function F() {
-    return <VictoryArea data={}
+function* plotChaosGame(width: number, height: number, setPdf: (data: PlotData) => void, setCdf: (data: PlotData) => void) {
+    const emptyImage = new ImageData(width, height);
+    for (let histogram of chaosGameHistogram(width, height)) {
+        const plotData = plotHistogram(histogram);
+        setPdf(plotData);
+        yield emptyImage;
+    }
+}
+
+export default function FlameHistogram() {
+    const {width, height, setPainter} = useContext(PainterContext);
+    const [pdfData, setPdfData] = useState<{ x: number, y: number }[]>(null);
+
+    useEffect(() => setPainter(plotChaosGame(width, height, setPdfData, null)), []);
+
+    return (
+        <VictoryChart theme={VictoryTheme.clean}>
+            <VictoryLine
+                data={pdfData}
+                interpolation='natural'
+            />
+        </VictoryChart>
+    )
 }