Again, I want to stress that one of the most powerful features of
D3 could be considered its API and how it makes you think.
Since every method in D3 returns the element or
elements that it was called on, you can naturally chain methods one to the next.
Don't worry about all the changes we've been making to the page.
Any changes we make are purely on the client side, meaning only within our
local browser, and of we refresh the page Udacity's site goes back to normal.
So now, let us refresh the page and
then start manipulating with a fresh HTML page.
After we've refreshed the page,
you can see that the navigation bar has its original background and
the title is back to Data Visualization rather than Jon's Pretty Pictures.
I wanted to walk through how to actually change the logo and
what's happening behind the scenes in more depth.
The first step, as always, is to inspect the element and try to find some
unique identifier, either a class ID or tag, to use with D3 select function.
As you can see here the logo is in image tag but it doesn't have any classes or
ID's defined on it.
Does this mean that we will not be able to select it?
No, we simply have to look one level up or as many levels up as we need and
navigate the dom tree from the closest identifiable element.
What does that mean exactly?
Well, going one level up to its parent, the image tag is contained
within an a tag, and this a tag, as you can see when you hover, highlights
the Audacity logo, meaning that the image is indeed a subselection of the a tag.
And looking at its class of logo and
navbar brand, I'd be willing to bet that if I search for a with both logo and
navbar-brand, I'll find a unique element which returns this selection.
So calling d3.select with a.navbar-brand.logo, which again is looking for
both navbar-brand and logo classes defined on the a tag.
Again, as you see here, we get a return with a D3 Array object.
And inspecting inside we see indeed there is an a tag
that has .logo.navbar which uniquely identifies it and
corresponds to the logo that we're looking to change.
Since this a tag also has an id,
header-logo, we can select it using a CSS selector for the id.
The syntax for CSS selectors to select an ID is simply the hash or
pound symbol, and then the ID following.
Let's save this selection into a variable.
Let's call it, parent_element.
And now let's try to find a way to get the image tag
to actually mutate its source.
Again, because what's returned from the selection has all of
D3's methods defined on it, we can make another sub-selection.
Scrolling through the list of methods defined, we find select.
We can select within this element and
arbitrarily select however deep we may need to go.
In this case, we're lucky and only have to go a single level down.
Also in this case, since there's only a single item within the a tag,
we know that subselecting an image tag on the previous selection of
the a with ID header-logo, we're guaranteed to get the element of interest.
As you can see here, the image tag we hover and it corresponds to the logo.
To finish our remodel of Udacity's site,
we simply need to change the source attribute defined on the image tag.
You can change any attribute defined on any HTML tag using the .attr or
attribute method defined on a selection or D3 object.
While we're interested in just changing the source,
you can actually change any attribute, alt text, maybe a class, or an ID.
In this case, let's just try to change the alt text and see what would happen.
Notice as we change the alt to Jon's logo since was displayed in
the chrome developer console is the dom and not the stated source of the page.
The alt name actually changes in real time to Jon's logo.
To change the source you simply need to change alt to the string source.
And in our case, I've already found the URL for
the Zipfian logo and stored it in a variable zipf.
Running this line, the source should dynamically update and
that logo image should change.
And voila.
As you can see here the logo has changed to Zipfian Academy's logo, and
if we hover over the dom representation of this we can see that
indeed the source has changed and it corresponds to the Zipfian Academy logo.