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
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 graphics1. 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
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
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!
You will see one or many of these containers in each section. For clarity and structure, they will be outlined with a dotted border.
Don't forget - the containers will show the finished output of the entire section, even if it appears earlier on!
This one will look empty because all we're outputting is an empty
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
<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
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
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>
The IDs in our source will look more like
#local_2fdcfdce_container, instead of
#container, as we have some automatic renaming in place to support notebook conversion. All of these articles have been written in interactive notebooks!
W3C. Scalable Vector Graphics (SVG), https://www.w3.org/Graphics/SVG/. ↩