Using D3, we can create, remove and manipulate DOM nodes programmatically. let’s try to change the background color of the navbar in the audacity player. First, we need to find some identifier for the navbar. A shortcut I like to use to finding which DOM element is represented by a visual element is to right click and select inspect element. This is going to bring me to the navbar or a portion of the navbar. But if you notice here, the selection doesn’t extend the width of the window, which leads me to believe that we’ve actually selected a child of the navbar that we’re looking for. Going up, we see a header tag, and when we hover, spans the full width of the window and has classes defined on it. Which might mean that we can select it by using the D3 select function, since the header is actually a header tag, we can be more specific in our CSS query and look for a header tag with class navbar-static-top, which returned is another one of these D3 arrays. If we open it up, we see its actually the header element we want and again hovering over it in the console highlights it in the window. In order to manipulate the selection, D3 defines a set of transformation functions. To change any of the CSS styling, we call the .style method on the D3 selection. The first argument to style being the CSS property we’d like to change or return. If we don’t pass a second argument to .style and many of the other D3 transformation functions work the same way. This actually accesses the appropriate style, in this case background color, and returns it to us. As you can see here, the D3 syntax says, using D3 select a header with class navbar-static-top and return to me the background color styling defined on the header element. As you can see here, returns a string of RGB values. If we would actually like to manipulate and change the background color, we simply need to pass a second argument which will replace the current background color. In this case, as a second argument, I’m simply passing a string, corresponding to the color I would like to change the background to. In this case, green. Two things to note of what just happened. One, the bar did indeed change to green. But another strange thing is that the style method actually returned to me another array that’s the same object as returned from select, corresponding to the navbar. This is what I mean when I say D3’s chainable API. Most methods defined in D3 return whatever object they were called on. In this case, D3 select finds and returns a D3 selection object. .style mutates that object and then returns the mutated object, and so forth. So we can call a somewhat arbitrary number of functions. Chaining one after each other, and D3 knows how to handle it, changing at each step of the chain the object being passed through.