Drawing shapes in D3.js Version 5

This post goes over the various D3.js symbols typically used for scatter plots.

D3.js built-in symbols

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 blog post will be using the current latest version of D3.js, version 5.

Creating the SVG and selecting it

To start with I create the SVG using HTML  and assign it the id mainSvg.

<svg id="mainSvg" height="250" width="120"></svg>

Then in the start of the JavaScript block I select the SVG and save it to the variable s to be used later.

var s = d3.select("#mainSvg");

Dataset used to create the shapes

The following dataset is being used to create the different 7 shapes. Here I store the name of the shape and the d3 reference to the shape in each element of the array.

var data = [
    {"title": "Circle", "shape": d3.symbolCircle},
    {"title": "Cross", "shape": d3.symbolCross},
    {"title": "Diamond", "shape": d3.symbolDiamond},
    {"title": "Square", "shape": d3.symbolSquare},
    {"title": "Star", "shape": d3.symbolStar},
    {"title": "Triangle", "shape": d3.symbolTriangle},
    {"title": "Wye", "shape": d3.symbolWye}
];

I will use this to display the seven different symbols on the page with their name next to them.

Displaying the Symbols on the page

To start with I bind the data and select all elements on the page with the shapes css class.

var shapesSelection = s.selectAll(".shapes")
    .data(data);

Once this is done I use the enter method on the shape selection and create a g element for each data row. I apply the CSS class to the group and transform the position for each grouping. This transform is to ensure that each symbol is offset from each other.

var shapesGrouping = shapesSelection
    .enter()
    .append("g")
    .attr("class", "shapes")
    .attr("transform", function(d, index) {
        return "translate(20, " + (20 + (index * 30)) + ")";
    })
;

Using the group I have just created I then append a path element to this. This will be the shape to display. The d attribute represents the path for the element. Here I am using d3.symbol() to generate the path for me.

I call .type() on this function to define what type of shape it should generate and then .size() to set the size of the shape. One of the important recent changes is that type accepts an object rather than the string it used to take.

shapesGrouping
    .append("path")
    .attr("d", function(d) { return d3.symbol().type(d.shape).size("200")(); })
;

The final piece of code adds the text on the page to detail which symbol it should use.

shapesGrouping
    .append("text")
    .text(function(d) { return d.title; })
    .attr("x", 20)
    .attr("y", 8)
;

Summary

Here I explained how you can use the D3.js built-in symbols for your own use and explained some of the differences in the newer versions of the library.

In a future tutorial, I will explain how you can use these symbols in a D3.js version 5 scatter plot.

The full code for this is available on my website which includes a live example.

If you have any questions feel free to comment on the following blog post.