e

pages/course/svg/introduction.tsx

@@ -10,6 +10,7 @@ import { ExerciseAccordion } from '@/component/ExerciseAccordion';
 import { ExerciseDoubleSandbox } from '@/component/ExerciseDoubleSandbox';
 import { Caption } from '@/component/UI/Caption';
 import { Sidenote } from '@/component/SideNote';
+import { ScatterplotBasicDemo } from '@/viz/ScatterplotBasic/ScatterplotBasicDemo';
 
 const previousURL = '/course/introduction/initial-setup';
 const currentURL = '/course/svg/introduction';
@@ -238,17 +239,22 @@ export default function Home() {
             title: <span>Developer console</span>,
             content: (
               <div>
-                <p>Some random content mate!</p>
+                <p>
+                  Open your developer console and inspect the scatterplot below.
+                </p>
+                <p>
+                  Take some time to understand how the SVG structure is
+                  organized.
+                </p>
+                <center>
+                  <ScatterplotBasicDemo width={500} height={500} />
+                </center>
               </div>
             ),
           },
           {
             title: <span>Background Color</span>,
-            content: (
-              <div>
-                <p>Some random content mate!</p>
-              </div>
-            ),
+            content: <ExerciseDoubleSandbox exercise={exercices[2]} />,
           },
           {
             title: <span>Overflow</span>,
@@ -323,4 +329,26 @@ const exercices = [
     practiceSandbox: 'exercise/SvgThreeCirclesPractice',
     solutionSandbox: 'exercise/SvgThreeCirclesSolution',
   },
+  {
+    title: <span>Background Color</span>,
+    whyItMatters: (
+      <>
+        <p>
+          Many CSS features either don't work or behave differently with SVG.
+        </p>
+        <p>We'll uncover them all as we go through the course!</p>
+      </>
+    ),
+    toDo: (
+      <>
+        <p>
+          Add some <b>inline style</b> to the svg area below. Use the{' '}
+          <code>backgroundColor</code>
+          property to change the background to <code>yellow</code>.
+        </p>
+      </>
+    ),
+    practiceSandbox: 'exercise/SvgBackgroundColorPractice',
+    solutionSandbox: 'exercise/SvgBackgroundColorSolution',
+  },
 ];

viz/exercise/SvgBackgroundColorPractice/SvgDrawing.tsx

@@ -0,0 +1,7 @@
+export const SvgDrawing = () => {
+  return (
+    <svg width={500} height={300}>
+      <circle cx={500 / 2} cy={500 / 2} r={45} fill="blue" />
+    </svg>
+  );
+};

viz/exercise/SvgBackgroundColorPractice/index.js

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

viz/exercise/SvgBackgroundColorPractice/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/SvgBackgroundColorSolution/SvgDrawing.tsx

@@ -0,0 +1,8 @@
+export const SvgDrawing = () => {
+  return (
+    <svg width={500} height={300}>
+      <rect x={0} y={0} width={500} height={300} fill="grey" />
+      <circle cx={500 / 2} cy={500 / 2} r={45} fill="blue" />
+    </svg>
+  );
+};

viz/exercise/SvgBackgroundColorSolution/index.js

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

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