Adding an SVG Element
FREE     Duration: 6:00
Part of Course: Introductory D3 Course


  • You can use the D3 .append operator to append SVG elements
  • The D3 .attr allows you to insert an attribute and assign it a value
  • Using the JavaScript/D3 chain syntax, you can add two attributes with their values to a tag you appended
  • The SVG circle simple shape needs a "cx", "cy" and "r" to be properly defined
  • You can use D3 to append an SVG circle simple shape as well as define the attribute value pairs of "cx", "cy", and "r"
  • The D3 style operator is a shortcut for setting the CSS style property for a given selection with the specified value you define
  • Because D3 is built on JavaScript and is constructed so that the chain syntax works, you can increase legibility of your code by assigning selections to JavaScript variables


D3 Video Tutorial Lesson:


Adding an SVG Element

D3 Append Revisited


First, let's take a look at the D3 Append Operator

This appends a new element with the specified name as the last child of each element in the current selection.

Then, it returns a new selection containing the APPENDED ELEMENTS.

In addition to appending HTML elements, one can also append SVG Elements.

Setting Selection Attributes

d3.selection.attr(name[, value])

Next, lets take a look at the .attr operator.

This operator inserts an attribute and a value, if specified, into the elements in the selection.

Then it returns a selection.

<tag attribute="value">Marmalade</tag>

The structure of the HTML markup, is that there is a tag that contains attributes that have values.

<svg width="50" height="50"> ... </svg>

In the case of this SVG statement

  • The tag is SVG
  • The attributes are width and height
  • and the values are 50 and 50

d3.selection.attr(name[, value])

Which means that given a selection, D3 allows us to add a tag attribute and its values.

* Note, only one attribute and value can be added at a time.

d3.selection.attr(name[, value]).attr(name[, value])

So to add two attributes, you will have to use the chain syntax.

<svg width="50" height="50"> ... </svg>

Which means we can convert the SVG statement to the following:


Circle Example

<svg width="50" height="50">
  <circle cx="25" cy="25" r="25" />

We will use this SVG circle as the example:

Closeup of text file

Talk about the SVG already there in the div svg_by_hand

Talk about how we are going to write in the command line first.

Closeup of the HTML web page with the JavaScript editor open

Talk about how / why reload the browser frequently

D3 check


Check the D3 version to make sure it is working

reload the browser

Make sure the right DIV is selected".svg_by_d3");

Select the class".svg_by_d3").append("p");

Append a paragraph element to it."p").remove();

Remove the paragraph element that was just added

Reload the browser

Add in the SVG tag".svg_by_d3").append("svg");

Use the arrow key to see previous commands to save on the typing

Append the SVG tag // Browser

Reload the browser

Next we add in the attributes to the SVG tag".svg_by_d3").append("svg").attr("width","50").attr("height","50");

Using the chain syntax, we select the SVG element and add two attributes to the SVG tag.

With the width attribute being 50 and the height attribute being 50

Which you can see in the html elements

Reload the browser

Next we add in a circle to the SVG".svg_by_d3").append("svg").attr("width","50").attr("height","50").append("circle");

You can see that the command added a CIRCLE tag within the SVG

__BROWSER__ If you look at the circle that was added versus the previous circle, you can see that the previous circle had three attributes - a cx, a cy, and an r attribute

Press the up arrow and let's add these attributes

Next we add in three attributes to the SVG Circle".svg_by_d3").append("svg").attr("width","50").attr("height","50").append("circle").attr("cx","25").attr("cy","25").attr("r","25");

You can see that we can continue chaining commands all day long.

__BROWSER__ From here you can see that when we added the attributes to the CIRCLE SVG element, the web browser figured out how to represent it visually.

And that is how you add an SVG element

D3 Style Operator[, value[, priority]])

The Style Operator, if a name and value is specified, sets the CSS style property for the given selection with the given specified value.

The circle just created was a black circle.

How do we change the color to blue?

One way is to add an attribute called fill and give it the value of blue".svg_by_d3").append("svg").attr("width","50").attr("height","50").append("circle").attr("cx","25").attr("cy","25").attr("r","25").attr("fill","blue");

This does exactly what we wanted - to color the circle blue.

However, D3 comes with a proper Style Operator.".svg_by_d3").append("svg").attr("width","50").attr("height","50").append("circle").attr("cx","25").attr("cy","25").attr("r","25").style("fill","blue");

This does exactly what we wanted as well - to color the circle blue;

Why then would you want to use the style operator to style elements?

Because style behaves more consistently with external stylesheets.

The .style operator ensures the element-specific style takes priority over all other styles.

D3 Legibility through JS variables".svg_by_d3").append("svg").attr("width","50").attr("height","50").append("circle").attr("cx","25").attr("cy","25").attr("r","25").style("fill","blue");

Thus far we have chained our D3 commands to come up with this mess.

While it is readable, it is hard to keep track of

  • what the selection is
  • what has been appended
  • what attributes and values were given to it
  • and what if/any style has been added to the elements

We are in luck for three reasons

  1. D3 is built on top of JavaScript so whitespaces between function chaining is ignored
  2. Almost everything in D3 returns a selection
  3. Those selections can be assigned to variables using JavaScript".svg_by_d3").append("svg").attr("width","50").attr("height","50").append("circle").attr("cx","25").attr("cy","25").attr("r","25").style("fill","blue");

Which means we can go from this to this:

var divSelection =".svg_by_d3");

var svgSelection = divSelection.append("svg").attr("width","50").attr("height","50");

var circleSelection = svgSelection.append("circle").attr("cx","25").attr("cy","25").attr("r","25").style("fill","blue");

Which when typed into the console, works as follows:

Show on the screen

Reload the web page

Type out the information

var divSelection =".svg_by_d3");
var svgSelection = divSelection.append("svg").attr("width","50").attr("height","50");
var circleSelection = svgSelection.append("circle").attr("cx","25").attr("cy","25").attr("r","25").style("fill","blue");

Point out the three variables with the mouse

Press Return

The blue circle shows up

Click on the elements above to show that the circle showed up.

And that is how you can increase D3 Legibility through JS variables

Lastly, we can add this into the html file and properly format it.

var divSelection =".svg_by_d3");

var svgSelection = divSelection.append("svg")

var circleSelection = svgSelection.append("circle")

This makes it much easier to read and understand.

<< Back To D3 Screencast and Written Tutorials Index