Check out a free preview of the full Data Visualization for React Developers course

The "Brush" Lesson is part of the full, Data Visualization for React Developers course featured in this preview video. Here's what you'd learn in this lesson:

Shirley introduces brush() from D3, which allows the user to highlight graphs and return data for mouse and touch events using SVG.

Preview
Close

Transcript from the "Brush" Lesson

[00:00:00]
>> Shirley Wu: And this, I think, is the funnest part [LAUGH] of what we're gonna do today. So this is called a brush, and it's called a brush because you literally can brush over any part of the screen, create that little box, drag it around, and create interactions. So I tend to use this a lot for filtering down the data.

[00:00:26]
So what I'm doing right here is, it's a quite a trivial example and I don't recommend it for production or anything, but with brushes like I'm brushing certain months. That within that brush that certain months are in color. And then the others are gray and that same months are getting reflected in the radio chart over here.

[00:00:54]
And so if you can imagine, that could be really powerful if you have multiple charts that are different aspects of the same data set, and you want to use one chart to filter down the visualization elsewhere.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now