And as you can see here,
as the animation draws to an end, the buttons show up on the left side.
So the first part of adding interactivity has been completed.
Now we need to actually allow the user to click our buttons.
Here, we are still in the conditional that clears our interval.
And once we've created our buttons, we want to attach some event.
If you're not familiar with JavaScript events,
there's many ways to do them with native JavaScript.
But most libraries out there allow you to interact in some way with user events.
The most common library, and what might have driven its rise to fame, is jQuery.
Where it made it effortless to attach events and
functions to elements on the page.
But there's many other libraries.
In our case, the most notable D3 which implements a similar style of
adding events to given HTML elements.
In this case, we've created our buttons.
And with those, we want to enable some interaction on a click event.
The syntax for this is to call the on-function.
With some D3 selection, in this case, our buttons, in the first
argument is the event that you want to trigger your callback function.
In this case, we want to attach the click event to our buttons, but
there's many others, some of which I've included in the instruction notes for
this video, such as mouse over.
Mouse out.
And even custom events, and any other event that JavaScript itself supports.
The second argument, to on is the function you want to run.
When the given event happens on your element.
Sometimes you might see it refer to as the event handler.
The argument D passed to the event handler function is the same D
that gets passed to most assessor functions in D3.
That being the data.
So in this case d, when a button is clicked,
corresponds to the year that was clicked.
In our case, when a user clicks on a button of the given year,
we want to call our update function with d, or rather.
The year of the button that was clicked such that the map updates.
The line above that I've written is D3's way
of accessing the element that was clicked on.
In this case we use a D3 select but we pass it the special JavaScript variable.
This.
There's a lot of confusion around when and what this actually represents, and
again I've linked to some many good resources in the instructor notes, but for
the case of what we would encounter in this course,
this most always represents the element itself that was clicked.
In this case, the HTML button, and the reason I'm accessing this, or
rather, the button clicked, is because I
want to indicate to the user in some way what button actually was clicked?
In our case we want to indicate visually to the user and
provide some immediate feedback about what button they clicked and whether or
not that click actually happened.
And in this case we're going to update the styles and
change the background to be blue.
And the color of the text to be white, also to make it smoother and more
aesthetically pleasing, we can add some animation and transition to this effect.
Going back to our browser, we can refresh the page.
And we see our buttons as they were before, now let's try clicking on one.
If you noticed, I clicked on the year 1958, the map has updated,
the circles moved, and also the year and the titles changed.
But also the stylings on the buttons have changed.
Let's compare the year 1958 to the year 1994.
Again we can see the update happening.
But one quirk is that now both buttons are blue.
And every successive button we click stays blue.
Do you know what might be happening here?