fix

pages/course/scales/linear-scale.tsx

@@ -267,27 +267,33 @@ const exercices: Exercise[] = [
     whyItMatters: (
       <>
         <p>
-          The logic behind each functions of the <code>d3-shape</code> module is
-          the same.
+          There is no way you can build this kind of chart with a charting
+          library like <code>plotly</code> or <code>highCharts</code>.
         </p>
         <p>
-          If you have a good understanding of d3.line(), you're on the right way
-          to build any other chart type!
+          Thanks to <code>d3</code>, we can build literally anything. It's just
+          a bit of mental gymnastic!
         </p>
       </>
     ),
     toDo: (
       <>
         <p>
-          Let's create a mirror histogram!! The mirror histogram looks like
-          this:
+          Let's create a mirror histogram! Check the <code>solution</code> tab
+          to see how it must look like.
         </p>
         <ul>
-          <li>Create 2 scales!</li>
           <li>
-            Values are <code>23</code>, <code>55</code>, <code>87</code> on the
-            left, and <code>12</code>, <code>43</code>, <code>98</code> on the
-            right
+            There are 3 bars on the left, and 3 and on the right. All starting
+            from the center.
+          </li>
+          <li>
+            A bit of <code>padding</code> is added in the center.
+          </li>
+          <li>
+            Bar values are <code>23</code>, <code>55</code>, <code>87</code> on
+            the left, and <code>12</code>, <code>43</code>, <code>98</code> on
+            the right. Axes go from 0 to 100.
           </li>
         </ul>
       </>

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

@@ -25,17 +25,6 @@ export default function Home() {
     return null;
   }
 
-  const yScale = scaleBand()
-    .domain(['A', 'B', 'C'])
-    .range([0, 240])
-    .paddingInner(0.33)
-    .paddingOuter(0);
-
-  // console.log(yScale('A'));
-  // console.log(yScale('B'));
-  // console.log(yScale('C'));
-  // console.log(yScale.bandwidth());
-
   return (
     <LayoutCourse
       title={currentLesson.name}
@@ -253,6 +242,8 @@ colorScale("b") // --> green
           },
         ]}
       />
+
+      <blockquote>TODOOOOOOOOO</blockquote>
       {/* -
 -
 -

viz/exercise/linearScaleMirrorSolution/Graph.tsx

@@ -43,24 +43,24 @@ export const Graph = () => {
 
       {/* Right Bars */}
       <rect
-        x={WIDTH / 2 + PADDING_CENTER / 2}
+        x={scaleRight(0)}
         y={50}
         height={30}
-        width={scaleRight(12)}
+        width={scaleRight(12) - scaleRight(0)}
         fill="#69b3a2"
       />
       <rect
-        x={WIDTH / 2 + PADDING_CENTER / 2}
+        x={scaleRight(0)}
         y={100}
         height={30}
-        width={scaleRight(43)}
+        width={scaleRight(43) - scaleRight(0)}
         fill="#69b3a2"
       />
       <rect
-        x={WIDTH / 2 + PADDING_CENTER / 2}
+        x={scaleRight(0)}
         y={150}
         height={30}
-        width={scaleRight(98)}
+        width={scaleRight(98) - scaleRight(0)}
         fill="#69b3a2"
       />
 
@@ -69,21 +69,21 @@ export const Graph = () => {
         x={scaleLeft(23)}
         y={50}
         height={30}
-        width={WIDTH / 2 - PADDING_CENTER / 2 - scaleLeft(23)}
+        width={scaleLeft(0) - scaleLeft(23)}
         fill="#69b3a2"
       />
       <rect
         x={scaleLeft(55)}
         y={100}
         height={30}
-        width={WIDTH / 2 - PADDING_CENTER / 2 - scaleLeft(55)}
+        width={scaleLeft(0) - scaleLeft(55)}
         fill="#69b3a2"
       />
       <rect
         x={scaleLeft(87)}
         y={150}
         height={30}
-        width={WIDTH / 2 - PADDING_CENTER / 2 - scaleLeft(87)}
+        width={scaleLeft(0) - scaleLeft(87)}
         fill="#69b3a2"
       />
     </svg>