This video is available to students only

Setting up interactions in React, and wrapping up

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

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.

 

This page is a preview of Fullstack D3 Masterclass

No discussions yet