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: "Setting up interactions in React, and wrapping up"
description: "We wrap up by talking about how to add interactions and look at the completed code for a Timeline, Scatter plot, and Histogram."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/wrvvglee3t
---

# Setting up interactions

In a production app, we would next want to define our interactions. Most charts could benefit from a tooltip - this could be implemented in various ways.

1.  We could add a chart listener rect to our `Chart` component that would sit on top of its `children`. We could listen to all mouse events and use `d3.pointer()` and `d3.leastIndex()` to find the closest point and position the tooltip using our scales (similar to our timeline example in **Module 5**).
2.  We could add a boolean property to `Line` that creates the listener rect, tying the tooltip to a specific data element. This might be beneficial if we have many types of charts that need different types of listeners (like our scatter plot example in **Module 5**).

# Wrapping up

Now that we've created some basic chart components and a **Timeline** component, we have a general idea of how to weave React.js and d3.js together. The general idea is to use React.js for any DOM rendering and d3.js as a utility library.

We wrap up by talking about how to add interactions and look at the completed code for a Timeline, Scatter plot, and Histogram.