small

holtzy · Jun 19, 2023 · e8c4277 · e8c4277
1 parent b536ba4
commit e8c4277
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/pages/circular-packing.tsx b/pages/circular-packing.tsx
@@ -11,6 +11,7 @@ import { CircularPackingDatasetTransitionDemo } from "../viz/CircularPackingData
 import Link from "next/link";
 import { LinkAsButton } from "component/LinkAsButton";
 import { CircularPacking2LevelsDemo } from "viz/CircularPacking2Levels/CircularPacking2LevelsDemo";
+import { ToDoSection } from "component/UI/ToDoSection";
 
 const graphDescription = (
   <>
@@ -208,7 +209,7 @@ export default function Home() {
         <code>circle</code> or <code>text</code>
         svg element, it is passed to an animated component that looks like this:
       </p>
-      <CodeBlock code={snippet2} />
+      <CodeBlock code={snippetAnimation} />
       <p>
         This component uses the <code>useSpring</code> hook of react spring to
         interpolate the <code>cx</code>, <code>cy</code> and <code>r</code>{" "}
@@ -234,6 +235,12 @@ export default function Home() {
       <p>
         <br /> <br />
       </p>
+      <ToDoSection text="Zoom on next level of hierarchy" />
+      <ToDoSection text="Write label along circle with curve" />
+      <ToDoSection text="Better dataset transition where circle keep position" />
+      <p>
+        <br /> <br />
+      </p>
       <div className="full-bleed border-t h-0 bg-gray-100 my-3" />
       <ChartFamilySection chartFamily="partOfAWhole" />
       <div className="mt-20" />
@@ -293,7 +300,7 @@ const packGenerator = d3.pack()
 const root = packGenerator(hierarchy);
 `.trim();
 
-const snippet2 = `
+const snippetAnimation = `
 const AnimatedCircle = ({cx,cy,r,...props}) => {
   const animatedProps = useSpring({
     cx,