Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "d3 events"
description: "We learn how to add interaction event listeners using our d3 selection objects, then run through a concrete example."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/95h5vo22zz
codeFolder: course/module_04/lesson_04.01/protected/code/05-interactions/end
---

# d3 events

Browsers have native **event listeners** — using `addEventListener()`, we can listen for events from a user's:

-   mouse
-   keyboard
-   scroll wheel
-   touch
-   resize
-   ... and more.

For example:

```javascript
function onClick(event) {
  // do something here...
}
addEventListener("click", onClick)
```

After running this code, the browser will trigger `onClick()` when a user clicks anywhere on the page.

These event listeners have tons of functionality and are simple to use. We can get even more functionality using d3's event listener wrappers!

Our d3 selection objects have an `.on()` method that will create event listeners on our selected DOM elements. Let's take a look at how to implement d3 event listeners.

<CodeSandboxEmbed
  src="//codesandbox.io/s/ohmh5?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/events.js"
  style={{width: '100%', height: '35em'}}
/>

If we open the `events.js` file, we can see a few things happening:

1.  We define `rectColors` as an array of colors.
2.  We grab all `.rect` elements inside of the `#svg` element (created in `index.html`) and bind our selection to the `rectColors` array.
3.  We use `.join()` to isolate all new data points (every row in `rectColors`) and append a `<rect>` for each color.
4.  Lastly, we set each `<rect>`'s size to 100 pixels by 100 pixels and shift each item 110 pixels to the right (multiplied by its index). We also make all of our boxes light grey.

In our browser, we can see our four boxes.

![grey boxes](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_04/lesson_04.01/public/images/5-interactions/boxes.png)

They don't do much right now, let's make it so they change to their designated color on hover.

We learn how to add interaction event listeners using our d3 selection objects, then run through a concrete example.