D3.js version 5 Drawing Shapes

D3.js has a number of built-in symbols which can be used for any data visualisation needs. The most common use of these are for points on scatter plots and similar graphs.

It is important to check what symbols are available in the version of D3.js you are using. In D3.js version 4, two shapes were added (Wye and Star) and one was removed (Triangle down). Triangle-up was renamed to triangle in this version as there was only one triangle in the symbol list.

If you wish to use triangle-down in the later versions of D3.js you can rotate the triangle by 180 degrees. Similarly if you wish to have a multiplication like cross (X) you can rotate the cross by 45 degrees.

In addition to these changes, in D3.js version 5 the way to access the symbols has changed. This page will be using the current latest version of D3.js, version 5.

Example code and full tutorial

The full code is available by viewing the source of the below frame. If you want more detailed instructions there is my blog post I talk through the code step by step.