diff --git a/pages/course/svg/d3-shape.tsx b/pages/course/svg/d3-shape.tsx
new file mode 100644
index 00000000..55948c1d
--- /dev/null
+++ b/pages/course/svg/d3-shape.tsx
@@ -0,0 +1,252 @@
+import React from 'react';
+import TitleAndDescription from '@/component/TitleAndDescription';
+import { LayoutCourse } from '@/component/LayoutCourse';
+import { lessonList } from '@/util/lessonList';
+import Link from 'next/link';
+import { CodeBlock } from '@/component/UI/CodeBlock';
+import { Sidenote } from '@/component/SideNote';
+import { CodeSandbox } from '@/component/CodeSandbox';
+import { ExerciseAccordion } from '@/component/ExerciseAccordion';
+import {
+ Exercise,
+ ExerciseDoubleSandbox,
+} from '@/component/ExerciseDoubleSandbox';
+
+const previousURL = '/course/svg/path-element';
+const currentURL = '/course/svg/d3-shape';
+const nextURL = '/course/svg/tips-and-tricks';
+const seoDescription = '';
+
+export default function Home() {
+ const currentLesson = lessonList.find((l) => l.link === currentURL);
+
+ if (!currentLesson) {
+ return null;
+ }
+
+ return (
+ l.link === nextURL)}
+ previousTocItem={lessonList.find((l) => l.link === previousURL)}
+ >
+
+
+ Some shapes can be quite complex—like rings, slices, paths,
+ polygons, and curves. Manually creating the `d` attribute for
+ these shapes would be a nightmare!
+
+
+ Fortunately, D3 provides a module specifically for handling all
+ these shapes. Let’s explore how it can simplify our work.
+
+
+ }
+ />
+
Most basic example
+
+ The <path> element allows to draw literally any shape
+ in the SVG area.
+
+
+ You provide it with a series of drawing commands that will make
+ straight or curved lines, resulting in your final shape.
+
+
Let's check a basic example:
+
+
+
+`.trim()}
+ />
+
This will result in the following shape:
+
+
Nice! This almost look like a line chart already!
+
+ As you can see the <path> element expect a required{' '}
+ d attribute. This attribute defines the shape of the path.
+ Let's discover its syntax.
+
+
+ Understanding the d Attribute
+
+
+ The d attribute defines the shape and outline of the path
+ by specifying a series of drawing commands.
+
+
+ Each command consists of a letter that represents the type of
+ drawing action (such as M for Move To) followed by
+ one or more numbers that define the coordinates or control
+ points.
+
+
Here is a breakdown of the svg path above:
+
+
+ Remember that the coordinate system starts from the top left in
+ svg!
+
+ }
+ />
+
+
+
+ M0 105: moves the starting point of the path to
+ coordinates 0, 105. (M stands for{' '}
+ move to)
+
+
+ L100 200: draws a straight line from the current point (
+ 0, 105) to the point (100, 200). (
+ L stands for line to)
+
+
+ 200 200: draws a new straight line from the current point
+ to the point (200, 200).
+
+
+
+ Now, experiment with some changes in the sandbox below to get a better
+ understanding of how it works:
+
+
+
+
+
The good news 🎁
+
+ You won’t need to manually write the d attribute yourself.
+ Understanding its role is helpful, but in practice, you'll rely on a
+ d3.js helper function to generate paths for you.
+
+
+ This helper function is called line(). It takes your data
+ and automatically convert it into the appropriate path{' '}
+ d string. It looks like this:
+
The <path> element allows to draw literally any shape
@@ -78,14 +91,21 @@ export default function Home() {
stroke="#69b3a2"
/>
-
Nice! This almost look like a line chart already!
As you can see the <path> element expect a required{' '}
d attribute. This attribute defines the shape of the path.
Let's discover its syntax.
-
+ {/* -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ */}
Understanding the d Attribute
@@ -130,59 +150,119 @@ export default function Home() {
Now, experiment with some changes in the sandbox below to get a better
understanding of how it works:
-
-
+ {/* -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ */}
+
Not only lines!
+
+ The path element can create a wide variety of shapes,
+ including the most complex ones.
+
+
+ Two particularly useful features are the Bézier curve (C)
+ and the arc curve (A). Check how they work with those 2
+ diagrams:
+
+
+
+
+ Curve
+ Arc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ok, that's definitely not easy to grasp.
+
+
+ In the sandbox below, try to play with the numbers, and see what
+ happens.
+
+
+
+
+ {/* -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ */}
The good news 🎁
You won’t need to manually write the d attribute yourself.
- Understanding its role is helpful, but in practice, you'll rely on d3.js
- helper functions to generate paths for you.
+ Understanding its role is helpful, but in practice, you'll rely on a
+ d3.js helper function to generate paths for you.
- These functions take your data and automatically convert it into
- the appropriate path data.
+ This helper function is called line(). It takes your data
+ and automatically convert it into the appropriate path{' '}
+ d string. It looks like this:
+ 
+