Contents

How to Manage SVGs in D3.js?

Hello! Welcome to this new post on D3. Today, we’ll talk about SVG, What are they? How to use them? We will see that they are useful tools for your D3 projects.

1. Understanding what are SVGs

SVG means Scalable Vector Graphics. It allows you to draw shapes in a browser window. All you need to do is to pass simple information like where you want to position your shape or how big is should be.

The reason why D3 uses SVGs instead of simple images is because they don’t lose quality when they are resized and they don’t take much space. This means that we can have thousand of SVGs in one window without causing lags. For the same reasons, you will often find companies using SVGs for their logo.

For instance, Google use simple shapes together to draw their logo instead of using JPEG or PNG formats.

The first logo is a JPEG image that take ten of thousands of bytes instead of the SVG format below that take just a few hundred bytes.

2. Use SVGs in an HTML file

You can include SVGs directly in your HTML file, or you can add them to your JavaScript file. First take a look on how we define an SVG:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
   <title>How to manage SVGs in D3?</title>
</head>

<body>
   <!-- Define SVG -->
   <svg width="300" height="100"></svg>

   <!-- Import D3 -->
   <script src="https://d3js.org/d3.v6.min.js"></script>

   <!-- Custom JS -->
   <script src="main.js"></script>
</body>
</html>

Here we define an SVG with a width of 300 pixels and a height of 100 pixels. Note that D3 will set a starting point to the draw at the upper left corner. This information is very important when you need to display several shapes on one SVG. For instance, we can add a rectangle to our SVG adding a rect marker.

1
2
3
<svg width="300" height="100">
   <rect x="0" y="0" width="80" height="80" fill="blue"></rect>
</svg>

As you can see, we set the x and y position of the rectangle at 0 and it displays on the top left corner. His width and height are defined from this position too.

Be aware that if the position of the shapes into the SVG exceeds the size of the SVG, they will not be displayed correctly. So if you not see the rectangle or you see it cut it probably because his position is out of the SVG.

You can of course use circle instead of rectangle. Note that the position of a circle is define by his center.

1
2
3
<svg width="300" height="100">
    <circle cx="0" cy="0" r="40" fill="green"></circle>
</svg>

Instead of “x” and “y” variable we precise “c” because this is the x and y position of the center of the circle. The “r” variable correspond to the radius of the circle.

I will not expose to you in this post all the possible SVG shapes that you can display in D3. This will be the topic of a next post. I want to show you how to display simple rectangle using the JavaScript file. Then you could display all the shapes you want with this technique.

3. Use SVGs in a JavaScript file

To use SVGs in a JavaScript file, I need to introduce you some D3 functions. First is D3 select. It allows you to grab hold of elements on the screen.

To add SVGs into your selection you can use the D3 append function. This function allows you to append any shapes into a set of SVG. Finally, the D3 attr function allows to set attributes of SVGs.

Let’s apply the select and append function over a simple example. First we define a constant named “svg” that will contain all our shapes. Here we use the select function to select the whole canvas. We append to this canvas an SVG object specifying his attributes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const svg = d3.select("#canvas")
.append("svg").attr("width", 300).attr("height", 100);
Then we append to this SVG object a rectangle.
const rect = svg.append("rect");
So we can add some attributes to the rectangle.
rect.attr("x", 0)
.attr("y", 0)
.attr("width", 80)
.attr("height", 80)
.attr("fill", "blue");

As you can see, we can chain the function together for more readability.

Now that we have defined our shapes into the JavaScript, we shouldn’t forget to precised the position of the canvas into the HTML file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
   <title>How to manage SVGs in D3?</title>
</head>

<body>
   <!-- Insert chart area-->
   <div id="canvas"></div>

   <!-- Import D3 -->
   <script src="https://d3js.org/d3.v6.min.js"></script>
   
   <!-- Custom JS -->
   <script src="main.js"></script>
</body>
</html>

When you launch your http-server (see) you can find the rectangle that we draw above.

That’s it for this post! I hope you enjoyed it and we will meet again for another one!