remove nivo

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.2",
-    "@nivo/bar": "^0.87.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-menubar": "^1.1.1",

pages/course/introduction/js-dataviz-libraries.tsx

@@ -3,11 +3,9 @@ import TitleAndDescription from '@/component/TitleAndDescription';
 import { LayoutCourse } from '@/component/LayoutCourse';
 import { lessonList } from '@/util/lessonList';
 
-// import { ResponsiveBar } from '@nivo/bar';
 import { CodeBlock } from '@/component/UI/CodeBlock';
 import { Caption } from '@/component/UI/Caption';
 import { Sidenote } from '@/component/SideNote';
-import { ResponsiveBar } from '@nivo/bar';
 import {
   Table,
   TableBody,
@@ -18,14 +16,6 @@ import {
   TableRow,
 } from '@/component/UI/table';
 
-const data = [
-  { country: 'USA', value: 100 },
-  { country: 'UK', value: 80 },
-  { country: 'Canada', value: 60 },
-  { country: 'Germany', value: 50 },
-  { country: 'Japan', value: 70 },
-];
-
 const previousURL = '/course/introduction/introduction-to-react';
 const currentURL = '/course/introduction/js-dataviz-libraries';
 const nextURL = '/course/introduction/introduction-to-d3';
@@ -132,30 +122,11 @@ import { ResponsiveBar } from '@nivo/bar';
         Time to celebrate 🎉.
       </p>
       <div className="full-bleed bg-muted/50">
-        <div className="wrapper" style={{ height: 400 }}>
-          <ResponsiveBar
-            data={data}
-            keys={['value']}
-            indexBy="country"
-            margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
-            padding={0.3}
-            colors={'#69b3a2'}
-            axisBottom={{
-              tickSize: 5,
-              tickPadding: 5,
-              tickRotation: 0,
-              legend: 'Country',
-              legendPosition: 'middle',
-              legendOffset: 32,
-            }}
-            axisLeft={{
-              tickSize: 5,
-              tickPadding: 5,
-              tickRotation: 0,
-              legend: 'Value',
-              legendPosition: 'middle',
-              legendOffset: -40,
-            }}
+        <div className="wrapper flex justify-center" style={{ height: 400 }}>
+          <img
+            src="/img/nivo-barchart.png"
+            alt="overview of a barchart made with Nivo"
+            width={800}
           />
         </div>
       </div>

pages/course/svg/d3-shape.tsx

@@ -401,21 +401,31 @@ const exercices: Exercise[] = [
   {
     whyItMatters: (
       <>
-        <p>Accessor functions are a fundamental concept in d3.js.</p>
         <p>
-          They’re incredibly useful because they allow d3 to work with any
-          structure of input data, giving you the flexibility to handle
-          different data formats.
+          Using the <code>area()</code> function is almost the same as the{' '}
+          <code>line()</code> function.
+        </p>
+        <p>
+          That's the magic of the <code>d3-shape</code> module, you switch from
+          one shape to the other easily!
         </p>
       </>
     ),
     toDo: (
       <ul>
         <li>
-          This time, the data format is slightly different, with the x position
-          stored in a <code>xAxisPosition</code> property.
+          Let's switch to an area chart, thanks to the <code>d3.area()</code>{' '}
+          function. Three methods must be chained to <code>area()</code>:
+        </li>
+        <li>
+          <code>x()</code> is the same as for the line chart.
+        </li>
+        <li>
+          <code>y0()</code>: Y coordinate of the bottom of the area
+        </li>
+        <li>
+          <code>y1()</code> Y coordinate of the top.
         </li>
-        <li>Update the accessor function to create the line chart again.</li>
       </ul>
     ),
     practiceSandbox: 'exercise/d3AreaFunctionPractice',

viz/exercise/d3AreaFunctionPractice/Graph.tsx

@@ -1,4 +1,4 @@
-import { line } from 'd3';
+import { area } from 'd3';
 
 // Positions in pixels
 const data = [
@@ -10,16 +10,14 @@ const data = [
 ];
 
 export const Graph = () => {
-  // Use the line() function of d3 to create a path generator that expects data as input
-  const lineGenerator = '';
+  // use the d3.area() function here
+  const areaGenerator = '';
 
-  // Use the lineGenerator function above to build the path string
   const path = '';
 
   return (
     <svg width={500} height={300} style={{ overflow: 'visible' }}>
-      {/* The path built above is used here for the d argument */}
-      <path d={path} fill="none" stroke="#69b3a2" />
+      <path d={path} fill="grey" stroke="#69b3a2" />
     </svg>
   );
 };