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: "Destroying d3 event listeners"
description: "We can't let our event listeners hang around forever - we learn how to clean up after ourselves and cancel old ones."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/77ahpgbzyp
codeFolder: course/module_04/lesson_04.02/protected/code/05-interactions/end
---

# Destroying d3 event listeners

Before we look at adding events to our charts, let's learn how to destroy our event handlers. Removing old event listeners is important for updating charts and preventing memory leaks, among other things.

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

Let's add a 3 second timeout at the end of our code so we can test that our mouse events are working before we destroy them.

```javascript
setTimeout(() => {
}, 3000)
```

We can't let our event listeners hang around forever - we learn how to clean up after ourselves and cancel old ones.