When creating maps with D3, the path SVG tag is used most often. Using the definition from W3C, you can think of the path tag as a series of commands that explain how to draw any shape by moving a pen on a piece of paper. The path commands start with the location to place the pen on and then contain a series of follow-up commands that tell the pen how to connect additional points with lines. The path shapes can also be filled or have their outline styled.

Let's look at a very simple example to replicate the triangle we created as a polygon.

Open your browser, go to http://localhost:8080/chapter-2/path.html, and you will see the following output on your screen:

Right-click anywhere in the triangle and select Inspect element.

The path command for this shape is as follows:

<path d="M 120 120 L 220 220, 420 120 Z" stroke="steelblue" fill="lightyellow" stroke-width="2"></path>

The attribute that contains the path drawing commands is d. The commands adhere to the following structure...