d

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

@@ -175,6 +175,10 @@ export default function Home() {
             title: <span>A first barplot!</span>,
             content: <ExerciseDoubleSandbox exercise={exercices[3]} />,
           },
+          {
+            title: <span>Vertical barplot 🤕</span>,
+            content: <ExerciseDoubleSandbox exercise={exercices[4]} />,
+          },
         ]}
       />
     </LayoutCourse>
@@ -280,7 +284,32 @@ const exercices: Exercise[] = [
       </ul>
     ),
 
-    practiceSandbox: 'exercise/SvgOverflowPractice',
-    solutionSandbox: 'exercise/SvgOverflowSolution',
+    practiceSandbox: 'exercise/SvgFourRectsPractice',
+    solutionSandbox: 'exercise/SvgFourRectsSolution',
+  },
+
+  {
+    whyItMatters: (
+      <>
+        <p>Rectangles are drawn from top to bottom in SVG.</p>
+        <p>
+          As a result, there is always a bit of thinking overhead to perform
+          each time. Annoying but necessary!
+        </p>
+      </>
+    ),
+    toDo: (
+      <ul>
+        <li>Create 4 bars using 4 rectangles.</li>
+        <li>The bars should be 400, 300, 200, and 100px high, respectively.</li>
+        <li>
+          Distribute them along the X axis to create your first vertical bar
+          chart!
+        </li>
+      </ul>
+    ),
+
+    practiceSandbox: 'exercise/SvgFourRectsVerticalPractice',
+    solutionSandbox: 'exercise/SvgFourRectsVerticalSolution',
   },
 ];

viz/exercise/SvgFourRectsVerticalPractice/Graph.tsx

@@ -0,0 +1,9 @@
+// margin of 30 above and below
+
+export const Graph = () => {
+  return (
+    <svg width={500} height={300}>
+      <rect x={10} y={30} height={300 - 30 - 30} width={50} fill="red" />
+    </svg>
+  );
+};

viz/exercise/SvgFourRectsVerticalPractice/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/SvgFourRectsVerticalPractice/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/SvgFourRectsVerticalSolution/Graph.tsx

@@ -0,0 +1,34 @@
+export const Graph = () => {
+  return (
+    <svg width={500} height={300}>
+      <rect
+        x={10 + 0 * (50 + 10)}
+        y={30}
+        height={300 - 30 - 30}
+        width={50}
+        fill="red"
+      />
+      <rect
+        x={10 + 1 * (50 + 10)}
+        y={130}
+        height={200 - 30 - 30}
+        width={50}
+        fill="red"
+      />
+      <rect
+        x={10 + 2 * (50 + 10)}
+        y={230}
+        height={100 - 30 - 30}
+        width={50}
+        fill="red"
+      />
+      <rect
+        x={10 + 3 * (50 + 10)}
+        y={330}
+        height={100 - 30 - 30}
+        width={50}
+        fill="red"
+      />
+    </svg>
+  );
+};

viz/exercise/SvgFourRectsVerticalSolution/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/SvgFourRectsVerticalSolution/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"
+  ]
+}