d

pages/course/scales/other-scale-types.tsx

@@ -12,6 +12,7 @@ import {
 import { scaleBand } from 'd3';
 import { Caption } from '@/component/UI/Caption';
 import { Sidenote } from '@/component/SideNote';
+import { Graph12 } from '@/viz/exercise/ScaleFourBarsSolution/Graph';
 
 const previousURL = '/course/scales/linear-scale';
 const currentURL = '/course/scales/other-scale-types';
@@ -226,24 +227,25 @@ colorScale("b") // --> green
         exercises={[
           {
             title: <span>First barplot!</span>,
-            content: <ExerciseDoubleSandbox exercise={exercices[0]} />,
+            content: 'todo',
           },
           {
             title: <span>Tiny bars?</span>,
-            content: <ExerciseDoubleSandbox exercise={exercices[1]} />,
+            content: 'todo',
           },
           {
             title: <span>Use colors for groups</span>,
             content: <ExerciseDoubleSandbox exercise={exercices[2]} />,
           },
           {
             title: <span>Switch to vertical version</span>,
-            content: <ExerciseDoubleSandbox exercise={exercices[3]} />,
+            content: 'todo',
           },
         ]}
       />
 
       <blockquote>TODOOOOOOOOO</blockquote>
+      <Graph12 />
       {/* -
 -
 -
@@ -271,19 +273,12 @@ const exercices: Exercise[] = [
   {
     whyItMatters: (
       <>
-        <p>
-          Now that you know what a scale is, time to write your first scale!
-        </p>
+        <p>todo</p>
       </>
     ),
     toDo: (
       <ul>
-        <li>Create a barplot with 1 bar only.</li>
-        <li>The SVG area is 500px wide. Your dataset goes from 0 to 100.</li>
-        <li>
-          Draw a horizontal bar that goes from the very left, and has a length
-          that represents a value of 82 in the dataset.
-        </li>
+        <li>todo</li>
       </ul>
     ),
     practiceSandbox: 'exercise/linearScaleBarSizePractice',
@@ -292,26 +287,12 @@ const exercices: Exercise[] = [
   {
     whyItMatters: (
       <>
-        <p>
-          Once a scale is available, everything you draw on your screen will go
-          through it to determine positions!
-        </p>
-        <p>
-          Also, see how convenient scales are when it comes to adding margins!
-        </p>
+        <p>todo</p>
       </>
     ),
     toDo: (
       <ul>
-        <li>Now create 3 bars.</li>
-        <li>Vertical positions are written manually</li>
-        <li>
-          Widths must represent the value <code>34</code>, <code>53</code> and{' '}
-          <code>82</code>
-        </li>
-        <li>
-          ⚠️ You must leave a <b>margin</b> of 20px on the left hand side.
-        </li>
+        <li>todo</li>
       </ul>
     ),
     practiceSandbox: 'exercise/linearScaleThreeBarsPractice',
@@ -321,22 +302,25 @@ const exercices: Exercise[] = [
   {
     whyItMatters: (
       <>
-        <p>Scales are very useful to reverse the direction of drawing</p>
+        <p>
+          Lear how to use <code>scaleOrdinal</code> to create a color scale!
+        </p>
       </>
     ),
     toDo: (
       <ul>
         <li>
-          Let's draw one single bar that represents the value <code>82</code>
+          There is now a <code>group</code> property in the dataset
         </li>
-        <li>But this time, the bar must go from the right to the left.</li>
         <li>
-          Hint: reverse the <code>range</code> array!
+          Create a scaleOrdinal that uses blue the for A group, and orange for
+          the B group
         </li>
+        <li>Use this scale to color the bars</li>
       </ul>
     ),
-    practiceSandbox: 'exercise/linearScaleReversePractice',
-    solutionSandbox: 'exercise/linearScaleReverseSolution',
+    practiceSandbox: 'exercise/scaleFourBarsPractice',
+    solutionSandbox: 'exercise/scaleFourBarsSolution',
   },
 
   {

viz/exercise/ScaleFourBarsPractice/Graph.tsx

@@ -0,0 +1,43 @@
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3';
+
+const width = 500;
+const height = 300;
+
+const data = [
+  {
+    name: 'kevin',
+    group: 'A',
+    value: 25,
+  },
+  {
+    name: 'alan',
+    group: 'A',
+    value: 15,
+  },
+  {
+    name: 'camille',
+    group: 'B',
+    value: 8,
+  },
+  {
+    name: 'toto',
+    group: 'B',
+    value: 6,
+  },
+];
+
+export const Graph12 = () => {
+  const xScale = '';
+
+  const yScale = '';
+
+  const colorScale = '';
+
+  return (
+    <svg width={500} height={300}>
+      {data.map((d, i) => {
+        return null; // TODO
+      })}
+    </svg>
+  );
+};

viz/exercise/ScaleFourBarsPractice/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/ScaleFourBarsPractice/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/ScaleFourBarsSolution/Graph.tsx

@@ -0,0 +1,57 @@
+import { scaleBand, scaleLinear, scaleOrdinal } from 'd3';
+
+const width = 500;
+const height = 300;
+
+const data = [
+  {
+    name: 'kevin',
+    group: 'A',
+    value: 25,
+  },
+  {
+    name: 'alan',
+    group: 'A',
+    value: 15,
+  },
+  {
+    name: 'camille',
+    group: 'B',
+    value: 8,
+  },
+  {
+    name: 'toto',
+    group: 'B',
+    value: 6,
+  },
+];
+
+export const Graph12 = () => {
+  const xScale = scaleLinear().domain([0, 100]).range([0, width]);
+
+  const yScale = scaleBand()
+    .domain(['kevin', 'alan', 'camille', 'toto'])
+    .range([0, height])
+    .padding(0.1);
+
+  const colorScale = scaleOrdinal()
+    .domain(['A', 'B'])
+    .range(['orange', 'blue']);
+
+  return (
+    <svg width={500} height={300}>
+      {data.map((d, i) => {
+        return (
+          <rect
+            key={i}
+            x={xScale(0)}
+            y={yScale(d.name)}
+            height={yScale.bandwidth()}
+            width={xScale(d.value)}
+            fill={colorScale(d.group)}
+          />
+        );
+      })}
+    </svg>
+  );
+};

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