u

pages/course/svg/d3-shape.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/component/ExerciseDoubleSandbox';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs';
 import { Caption } from '@/component/UI/Caption';
+import { GraphTOTO } from '@/viz/exercise/d3LineMultipleLineChartSolution/Graph';
 
 const previousURL = '/course/svg/path-element';
 const currentURL = '/course/svg/d3-shape';
@@ -341,8 +342,16 @@ multiply(4, 6))
             ),
             content: <ExerciseDoubleSandbox exercise={exercices[2]} />,
           },
+          {
+            title: <span>Multiple lines!</span>,
+            content: <ExerciseDoubleSandbox exercise={exercices[3]} />,
+          },
+          {
+            title: <span>Line chart with filled area</span>,
+            content: <ExerciseDoubleSandbox exercise={exercices[4]} />,
+          },
         ]}
-      />{' '}
+      />
     </LayoutCourse>
   );
 }
@@ -431,4 +440,84 @@ const exercices: Exercise[] = [
     practiceSandbox: 'exercise/d3AreaFunctionPractice',
     solutionSandbox: 'exercise/d3AreaFunctionSolution',
   },
+
+  {
+    whyItMatters: (
+      <>
+        <p>
+          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>
+          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>
+      </ul>
+    ),
+    practiceSandbox: 'exercise/d3LineMultipleLineChartPractice',
+    solutionSandbox: 'exercise/d3LineMultipleLineChartSolution',
+  },
+
+  {
+    whyItMatters: (
+      <>
+        <p>
+          Once the path generator is available, it can be used to create as many
+          elements as you wish!
+        </p>
+      </>
+    ),
+    toDo: (
+      <ul>
+        <li>This time, 2 datasets are available. We want to draw 2 lines.</li>
+        <li>Create a line path generator.</li>
+        <li>
+          Use the path generator twice, once per dataset, to create 2 paths and
+          draw them!
+        </li>
+      </ul>
+    ),
+    practiceSandbox: 'exercise/d3LineMultipleLineChartPractice',
+    solutionSandbox: 'exercise/d3LineMultipleLineChartSolution',
+  },
+
+  {
+    whyItMatters: (
+      <>
+        <p>
+          A chart is essentially a combination of shapes! Once you know how to
+          build them individually, it's just a matter of drawing them together!
+        </p>
+      </>
+    ),
+    toDo: (
+      <ul>
+        <li>Create both a line generator and an area generator</li>
+        <li>Add 2 paths to the SVG: the area first, the line second.</li>
+        <li>
+          Use low opacity for the area and a stroke width of 2 for the line.
+        </li>
+      </ul>
+    ),
+
+    practiceSandbox: 'exercise/d3LineFilledAreaPractice',
+    solutionSandbox: 'exercise/d3LineFilledAreaSolution',
+  },
 ];

viz/exercise/d3LineFilledAreaPractice/Graph.tsx

@@ -0,0 +1,25 @@
+import { line } from 'd3';
+
+// Positions in pixels
+const data = [
+  { x: 0, y: 40 },
+  { x: 50, y: 70 },
+  { x: 100, y: 150 },
+  { x: 200, y: 50 },
+  { x: 300, y: 250 },
+];
+
+export const Graph = () => {
+  // Use the line() function of d3 to create a path generator that expects data as input
+  const lineGenerator = '';
+
+  // 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" />
+    </svg>
+  );
+};

viz/exercise/d3LineFilledAreaPractice/d3LineFunctionBasicSolution/Graph.tsx

@@ -0,0 +1,24 @@
+import { line } from 'd3';
+
+// Positions in pixels
+const data = [
+  { x: 0, y: 40 },
+  { x: 50, y: 70 },
+  { x: 100, y: 150 },
+  { x: 200, y: 50 },
+  { x: 300, y: 250 },
+];
+
+export const Graph = () => {
+  const lineGenerator = line()
+    .x((d) => d.x)
+    .y((d) => d.y);
+
+  const path = lineGenerator(data);
+
+  return (
+    <svg width={500} height={300} style={{ overflow: 'visible' }}>
+      <path d={path} fill="none" stroke="#69b3a2" />
+    </svg>
+  );
+};

viz/exercise/d3LineFilledAreaPractice/d3LineFunctionBasicSolution/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/d3LineFilledAreaPractice/d3LineFunctionBasicSolution/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "d3": "7.1.1",
+    "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/d3LineFilledAreaPractice/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/d3LineFilledAreaPractice/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "d3": "7.1.1",
+    "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/d3LineFilledAreaSolution/Graph.tsx

@@ -0,0 +1,38 @@
+import { area, line } from 'd3';
+
+// Positions in pixels
+const data = [
+  { x: 0, y: 40 },
+  { x: 50, y: 70 },
+  { x: 100, y: 150 },
+  { x: 200, y: 50 },
+  { x: 300, y: 250 },
+];
+
+export const Graph = () => {
+  const lineGenerator = line()
+    .x((d) => d.x)
+    .y((d) => d.y);
+
+  const areaGenerator = area()
+    .x((d) => d.x)
+    .y0((d) => 300)
+    .y1((d) => d.y);
+
+  return (
+    <svg width={500} height={300} style={{ overflow: 'visible' }}>
+      <path
+        d={areaGenerator(data)}
+        fill="#69b3a2"
+        stroke="none"
+        opacity={0.3}
+      />
+      <path
+        d={lineGenerator(data)}
+        fill="none"
+        stroke="#69b3a2"
+        strokeWidth={3}
+      />
+    </svg>
+  );
+};

viz/exercise/d3LineFilledAreaSolution/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/d3LineFilledAreaSolution/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "d3": "7.1.1",
+    "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/d3LineMultipleLineChartPractice/Graph.tsx

@@ -0,0 +1,30 @@
+import { line } from 'd3';
+
+// Positions in pixels
+const data = [
+  { x: 0, y: 40 },
+  { x: 50, y: 70 },
+  { x: 100, y: 150 },
+  { x: 200, y: 50 },
+  { x: 300, y: 250 },
+];
+
+const data2 = [
+  { x: 0, y: 140 },
+  { x: 50, y: 20 },
+  { x: 100, y: 110 },
+  { x: 200, y: 150 },
+  { x: 300, y: 50 },
+];
+
+export const Graph = () => {
+  const lineGenerator = line()
+    .x((d) => d.x)
+    .y((d) => d.y);
+
+  return (
+    <svg width={500} height={300} style={{ overflow: 'visible' }}>
+      {/* Write 2 paths here, one for each dataset! */}
+    </svg>
+  );
+};

viz/exercise/d3LineMultipleLineChartPractice/d3LineFunctionBasicSolution/Graph.tsx

@@ -0,0 +1,24 @@
+import { line } from 'd3';
+
+// Positions in pixels
+const data = [
+  { x: 0, y: 40 },
+  { x: 50, y: 70 },
+  { x: 100, y: 150 },
+  { x: 200, y: 50 },
+  { x: 300, y: 250 },
+];
+
+export const Graph = () => {
+  const lineGenerator = line()
+    .x((d) => d.x)
+    .y((d) => d.y);
+
+  const path = lineGenerator(data);
+
+  return (
+    <svg width={500} height={300} style={{ overflow: 'visible' }}>
+      <path d={path} fill="none" stroke="#69b3a2" />
+    </svg>
+  );
+};

viz/exercise/d3LineMultipleLineChartPractice/d3LineFunctionBasicSolution/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);