visualisation with d3 Grouping Elements

Preamble

Let's get access to the D3.js library so that we can begin. In this case, we'll be including the library using the HTML <script> tag.

<script src="https://d3js.org/d3.v7.js"></script>

Introduction

We may often find ourselves needing to group elements together, allowing us to apply transformations or set attributes that are inherited by all child elements of that group. One way to achieve this is to use the container SVG element, <g>, allowing us to arrange our elements into groups which can also be nested¹. We can create these group elements using SVG directly, for example with the following.

<svg>
  <g fill="#40F99B">
    <circle cx="85" cy="75" r="50"></circle>
    <circle cx="215" cy="75" r="50"></circle>
  </g>
</svg>

Here we can see that we've changed the colour of both circles by setting the fill attribute on their parent group element, <g>.

But we can also do this with D3.js. In this section, we'll use D3.js to create a group containing two circle elements, and change their fill colour to #40F99B using the group element.

A Container for the Output

This is where you will see the output of the code cells that follow it, provided they are referencing the corresponding id.

<div id="container"></div>

Creating an Empty SVG

We'll create a new detached <svg> element and use the returned selection throughout the rest of this section.

svg = d3.create("svg");

Creating a Group Element

The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. We can create a group element with D3.js by appending a g element using any selection.

var shapeGroup = svg.append("g");

Now our shapeGroup variable refers to our selection of the new <g> element.

Creating Elements within a Group

Let's create our circles! This time we're appending these <circle> elements to our new shapeGroup selection of our new group, rather than directly to the <svg> element.

shapeGroup
    .append("circle")
    .attr("cx", 85)
    .attr("cy", 75)
    .attr("r", 50);

shapeGroup
    .append("circle")
    .attr("cx", 215)
    .attr("cy", 75)
    .attr("r", 50);

Setting Group Attributes

Previously, we would set the fill attribute of both <circle> elements to change their colour. With groups, we can instead set the fill attribute of our parent group element, the selection of which is stored in our shapeGroup variable.

shapeGroup
    .attr("fill", "#40F99B");

That's all it takes to change the fill colour of any elements within our group.

Appending to the Container

Finally, let's append everything to our container.

d3
    .select("#container")
    .append(() => svg.node());

We can see the output by checking on our container with the corresponding id, which in this case is where id=container.

Conclusion

If we inspect the HTML, we will see the <svg>, <g>, and <circle> elements have been added to the <div> where the id=container. We can also see that the <g> element's fill colour has been set to #40F99B, which has been inherited by both circles in the output.

<div id="container">
  <svg>
    <g fill="#40F99B">
      <circle cx="85" cy="75" r="50"></circle>
      <circle cx="215" cy="75" r="50"></circle>
    </g>
  </svg>
</div>