rk2546

=== [NOTE]: What even is this `mutable` modifier we are using? ===

The `mutable` modifier is a special modifier that allows us to modify variable values from one or more other cells. Observable notebooks are unique in that, if a new code block is executed, all dependent code blocks will also run. However, this can lead to messy situations where we may accidentally mutate values in multiple code blocks. To prevent this, Observable treats all variables as CONSTANT values by default. 

If we have a variable that we know we want to modify in other cells, then we need to attach the `mutable` modifier. For more information on this, try reading this notebook: https://observablehq.com/@observablehq/mutable

=== [NOTE]: What's the difference between the "click" event in the previous <svg> example and `onclick` here? ===

They are, for all intents and purposes, the same thing. They are both programmatic ways to attach listeners to events. The distinction here is that "click" is the name of a DOM event, while `onclick` is an attribute of a DOM element. Here's an example of this distinction in action:

````js
button.addEventListener("click", function() {});
button.onclick = function() {};
````

So another way you can _technically_ generate the button above is to use the `addEventListener(...)` syntax.

Others have asked similar questions too; you are not alone in this confusion.
https://www.reddit.com/r/learnprogramming/comments/cqzyvu/onclick_vs_click/

=== [NOTE] Why have `event` alongside `d`? ===
There are two primary reasons. The first is that we want to be able to access context-dependent information about the event, such as where the mouse position in. The second, more important, reason is that it allows us to control and restrict something called "event propagation" or "bubbling", where certain HTML elements have default behaviors. For example, when clicking on input elements such as buttons, usually the web browser will try to reload the page as a part of submitting forms. We can prevent this by calling `event.preventDefault()`, which stops the browser from reloading the page.