k

pages/course/svg/d3-shape.tsx

@@ -397,4 +397,28 @@ const exercices: Exercise[] = [
     practiceSandbox: 'exercise/d3LineFunctionChangeAccessorPractice',
     solutionSandbox: 'exercise/d3LineFunctionChangeAccessorSolution',
   },
+
+  {
+    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.
+        </p>
+      </>
+    ),
+    toDo: (
+      <ul>
+        <li>
+          This time, the data format is slightly different, with the x position
+          stored in a <code>xAxisPosition</code> property.
+        </li>
+        <li>Update the accessor function to create the line chart again.</li>
+      </ul>
+    ),
+    practiceSandbox: 'exercise/d3AreaFunctionPractice',
+    solutionSandbox: 'exercise/d3AreaFunctionSolution',
+  },
 ];

viz/exercise/d3AreaFunctionPractice/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/d3AreaFunctionPractice/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/d3AreaFunctionPractice/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/d3AreaFunctionPractice/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/d3AreaFunctionPractice/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/d3AreaFunctionPractice/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/d3AreaFunctionSolution/Graph.tsx

@@ -0,0 +1,25 @@
+import { area } 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 areaGenerator = area()
+    .x((d) => d.x)
+    .y0((d) => 300) // y0 is the Y coordinate of the BOTTOM of the area. 300 is the very bottom!
+    .y1((d) => d.y); // y1 is the top
+
+  const path = areaGenerator(data);
+
+  return (
+    <svg width={500} height={300} style={{ overflow: 'visible' }}>
+      <path d={path} fill="grey" stroke="#69b3a2" />
+    </svg>
+  );
+};

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