push

pages/course/svg/main-svg-elements.tsx

@@ -211,6 +211,31 @@ export default function Home() {
             practiceSandbox: 'exercise/SvgMultipleCirclesPractice',
             solutionSandbox: 'exercise/SvgMultipleCirclesSolution',
           },
+
+          {
+            title: <span>Understand stacking order</span>,
+            whyItMatters: (
+              <>
+                <p>What you draw first will be below what you draw second.</p>
+                <p>
+                  Like in HTML, stacking order matters. Keep this in mind for
+                  when you will start drawing more complex graphs.
+                </p>
+              </>
+            ),
+            toDo: (
+              <ul>
+                <li>
+                  Create one big grey rectangle that takes the full width and
+                  height of the SVG area
+                </li>
+                <li>Add one big yellow circle in it</li>
+                <li>Add some text in the circle</li>
+              </ul>
+            ),
+            practiceSandbox: 'exercise/SvgMultipleCirclesPractice',
+            solutionSandbox: 'exercise/SvgMultipleCirclesSolution',
+          },
         ]}
       />
     </LayoutCourse>

viz/exercise/SvgStackingOrderPractice/Graph.tsx

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

viz/exercise/SvgStackingOrderPractice/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/SvgStackingOrderPractice/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "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"
+  ]
+}

viz/exercise/SvgStackingOrderSolution/Graph.tsx

@@ -0,0 +1,18 @@
+export const Graph = () => {
+  return (
+    <svg width={500} height={300}>
+      <rect width="100%" height="100%" fill="grey" />
+      <circle cx="250" cy="150" r="100" fill="yellow" />
+      <text
+        x="250"
+        y="150"
+        textAnchor="middle"
+        dy=".3em"
+        fontSize="20"
+        fill="black"
+      >
+        Hello
+      </text>
+    </svg>
+  );
+};

viz/exercise/SvgStackingOrderSolution/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/SvgStackingOrderSolution/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "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"
+  ]
+}

viz/exercise/SvgTwoCirclesPractice/SvgTwoCircles.tsx

@@ -1,8 +1,7 @@
 export const SvgTwoCircles = () => {
   return (
     <svg width={500} height={300}>
-      <circle cx={50} cy={150} r={5} fill="blue" />;{' '}
-      <circle cx={50} cy={150} r={40} fill="#69b3a2" fillOpacity={0.3} />;
+      {/* circles goes here */}
     </svg>
   );
 };

viz/exercise/SvgTwoCirclesSolution/SvgTwoCircles.tsx

@@ -1,7 +1,8 @@
 export const SvgTwoCircles = () => {
   return (
     <svg width={500} height={300}>
-      {/* circles goes here */}
+      <circle cx={50} cy={150} r={5} fill="blue" />
+      <circle cx={250} cy={150} r={40} fill="#69b3a2" fillOpacity={0.3} />
     </svg>
   );
 };