So we'll select the first "div" and we'll set an attribute "abc" equal to the value of "123".

And you see this flash up.

And now we can see that the first div has an attribute of "abc" equal to "123".

Next we can do a:

d3.selectAll("div").attr("los", "angeles");

So we're going to select all of the divs and set the attribute of l-o-s "los" equal to the value of "angeles".

And we see that each div now has the attribute value pair of "los=angeles".

Up to this point we've been setting the value equal to a static string that we pass.

In this case, we're going to select all the divs and we're going to set the attribute "holiday" equal to the value that is returned when this anonymous function is evaluated for each of the divs in this selection:

d3.selectAll("div").attr("holiday", function() { return "inn"; });

When we do that you see that now all of these have a "holiday" attribute equal to "inn" string.

Up until now, for each "attr" operator, we've been passing an attribute value pair.

As we spoke earlier, the "attr" works as a getter and a setter.

So for the getter, if we don't pass a value, it will return what that value is for the specific "abc" attribute:

d3.select("#d_one").attr("abc");

In this case we see that it is "abc=123".

So we receive the value which is the string "123".

When we select a div that does not contain that attribute, in this case we see that the attributes are "id", "class", "los", and "holiday" unlike the Div 1 which had the "abc":

d3.select("#d_tre").attr("abc");

It returns a "null".

Lastly, with a selection, if we pass an attribute value pair where the value is set to "null", so in this case the first div "d_one" has an attribute value pair of "abc=123", if we pass the "null" to it: