k

pages/course/animation/react-spring-for-dataviz.tsx

@@ -471,8 +471,9 @@ const exercises: Exercise[] = [
         </ul>
       </>
     ),
-    practiceSandbox: 'exercise/CanvasBasicCirclePractice',
-    solutionSandbox: 'exercise/CanvasBasicCircleSolution',
+    practiceSandbox: 'exercise/AnimationDefaultPractice',
+    solutionSandbox: 'exercise/AnimationSimpleCircleSolution',
+    fileToOpen: 'Graph.tsx',
   },
   {
     whyItMatters: (

viz/exercise/AnimationDefaultPractice/Graph.tsx

@@ -0,0 +1,6 @@
+const width = 500;
+const height = 300;
+
+export const Graph = () => {
+  return <svg width={width} height={height}></svg>;
+};

viz/exercise/AnimationDefaultPractice/index.js

@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);

viz/exercise/AnimationDefaultPractice/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "d3": "7.1.1",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0",
+    "@react-spring/web": "^9.3.1",
+    "react-spring": "9.3.2"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}