visualisation with d3 Creating an Empty SVG

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

Now that we have access to the D3.js library, the very first thing we want to do is create our <svg> element. Typically we'd expect a "hello world" example as the first section, but this will be more similar to what I remember of my first OpenGL lesson which was focussed on creating a black window with nothing in it, shortly followed by a section on how to display a cube!

Scalable Vector Graphics

Let's quickly remind ourselves of what a Scalable Vector Graphic (SVG) is. It's an XML-based graphics markup language for describing two-dimensional graphics¹. It targets the web and is generally supported by all modern web browsers, and it's right at home amongst within the DOM amongst HTML within the <svg> element.

Because SVG is a vector format, graphics can be resized without any loss in quality, unlikely raster graphics (e.g. JPEG, PNG, and GIF). This also means that file size remains identical whether you want to display your SVG at 200px or 2000px. It also supports interactivity, transparency, and animation.

Whilst we can create SVG visualisations for the browser by writing the markup directly, we're instead going to be using D3.js to manipulate the markup for us.

A Container for the Output

Throughout this book, we'll be creating many visualisations, and we need somewhere in the DOM to output them. In the cell below, we've created the container element where we plan to append our SVG element. This is where you will see the output of the code cells that follow it, provided they are referencing the corresponding id. This means that what you see below is a spoiler - it's this section's finished visualisation!

This one will look empty because all we're outputting is an empty <svg> element.

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

Creating an Empty SVG

To create an element with D3.js we invoke the create(name) function and pass in the name of the element, in this case, we're passing in svg as our argument for the name parameter.

Our new <svg> element is currently detached from the DOM, meaning it hasn't been added to our HTML yet. We can still manipulate it as the create() function returns what's referred to as a selection, and we're storing that in our svg variable. We'll discuss selections in the next Section.

const svg = d3.create("svg");

Appending to the Container

We don't want to do anything fancy just yet, so let's just get our <svg> element into the DOM. We'll do this using the append() function.

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

Here we can see that we've selected our container from earlier with id=container. This returns a selection, which we've then used to invoke append() where we're passing in our svg element.

Conclusion

If we inspect the HTML, we'll see the <svg> element has been added to the <div> where the id=container. With this, we're ready to do more interesting things with D3.js and SVG!

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