Drawing Scalable Vector Graphics With D3 JavaScript

Drawing Scalable Vector Graphics With D3 JavaScript

In the last tutorial, we learned about Scalable Vector Graphics. As we say, SVG is a markup language based on XML that is able to create mathematical based vectors to create beautiful graphics with no loss of quality no matter the size of the image. As we learned as well, you can can use a program like Adobe Illustrator to create graphics, and then simply save them in an SVG format to use in your web pages. Now let’s take a look at how we can use the D3 JavaScript Library when Drawing Scalable Vector Graphics.

Using D3 To Draw Basic Shapes

First off, we’ll set up a snippet of HTML that we can use to grab hold of with D3, to append and manipulate. Just like when using a database or file in programming, we need a handle to “grab on” to the resource so to speak. We’ll do that same thing here. A div element will be what we append our graphics to. Here is our starting point.

Now we can use some scripting to recreate our SVG area.

Drawing SVG Shapes With D3

Pretty straight forward syntax here. We grab hold of the DOM element with the id of svghandle, append an SVG element to it, set some attributes, and style it.

Let’s see if we can recreate the rectangle we drew in the prior tutorial using nothing but D3.

Drawing a Rectangle with D3 JS

Yes Indeed! Working just like we expected 🙂

One thing to note about the D3 scripting style. Since JavaScript ignores whitespace, we can indent each line in a way that makes it easier to understand and reason about. It makes no difference if you were to chain every single command together in one big string. In fact, that is what happens when JavaScript files get minimized for performance reasons.

Moving on with drawing scalable vector graphics, let’s now try to script a circle like we did before as well.

Drawing a Circle with D3 JS

Ok! We’re getting the hang of this, let’s make a triangle now.

Drawing A Triangle with D3 JS

That worked perfect, and just like all the others, we can also create SVG text with D3.

Drawing Text With SVG


Chaining Commands Together With D3 JS

Let’s now try something just slightly more advanced. Look at this script, and the result, then see if you can piece together how it all works.

Drawing SVG Shapes With D3

Drawing An Ellipse With D3 JS

So far we have created some basic shapes such as a rectangle, circle, and triangle drawing scalable vector graphics with D3 JavaScript. Let’s now try to draw an ellipse, which is very similar to a circle, and just about as easy to create. Consider this snippet of D3.

Drawing a Vertical Ellipse With D3 JS

Cool! Just like a circle we have a radius with the ellipse. In fact instead of having just one radius, we actually have two in the ellipse. The first radius in the ellipse is rx and refers to the radius on the horizontal plane of the ellipse. The ry radius of the ellipse is referring to the vertical plane. If these two values are perfectly equal, then you have a perfect circle. So all circles can be an ellipse, but not all ellipses can be a circle 🙂

Let’s try rotating that ellipse on it’s side. This is easy to do by just swapping the rx and ry values.

Drawing a Horizontal Ellipse With D3

Making Use of Stroke and Stroke Width

In some of these more recent shapes, you can see that we are adding a cool looking border to the shape. We do this by setting the stroke and stroke-width in the styling. You assign a color to stroke, and then choose how wide you would like that stroke to be using stroke-width. If you are familiar with the Adobe software Photoshop or Illustrator, this makes perfect sense to you.

Polylines vs Polygons

Another thing worth mentioning when drawing scalable vector graphics is the difference between a Polyline and a Polygon. We had used the polyline to draw a triangle early on in this D3 Tutorial series. This is fine, but we can also use a Polygon for this application. In fact, Polygon is probably the more technically correct element to use for shapes that are self contained. So how do we differentiate this with a Polyline? Well, when you think of a polyline, think of it like a set of steps and you are looking at them from the side. The steps are one big line, which has many points. Let’s see an example of this concept.

Polyline Steps With D3

Drawing an Octagon using <polygon>

Copying SVG drawings using xlink:href

Copying SVG drawings using xlink:href

Drawing Scalable Vector Graphics With D3 JavaScript Summary

This tutorial had us moving beyond drawing scalable vector graphics by hand in raw HTML and SVG Markup. We now see how to use the D3 JavaScript library to programmatically reach into the DOM and create various primitive shapes with Scalable Vector Graphics. By building on the basic shapes like Circles, Rectangles, Ellipses, Triangles, Polygons, and more, you’ll start building some really slick visuals for your web pages. The only limit is your own imagination and creativity.

Leave a Reply