Data Visualization for React Developers

Questions & Wrapping Up

Shirley Wu

Shirley Wu

Data Sketches
Data Visualization for React Developers

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

The "Questions & Wrapping Up" 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:

After answers a question about possibility of implementing D3 brush() in canvas, and the application of brush() in a radial chart, Shirley wraps up the course and thanks the students for attending.


Transcript from the "Questions & Wrapping Up" Lesson

>> Speaker 1: You have a question, can you implement brush on a Canvas?
>> Shirley Wu: You can actually, so what you saw earlier, so I think brushes, I have to confirm, but I think brushes
>> Shirley Wu: Have to be in SVG. I don't think it lets you do it in Canvas. So, this brushable, like that, drawing that rectangle and stuff, that has to be in SVG.

Let me show you what I mean by that.
>> Shirley Wu: So to be able to draw see, to draw this rectangle and have this interactivity and then also have kind of the ability to do handles, and all of that. So, all of that is in SVG, so you'll have to create a layer of SVG on top of your canvas, [LAUGH] so that you can have this interactivity.

But, this brush is not tied to any of your data, it's not tied to any of your rendering of your bars, or your parts or any of that. And all it does is gives you the interactivity of being able to move this around and then also it tells you an xy coordinate like the xy coordinates of this part or this part or this part and this part.

So if you can imagine like after I've done some brushing, you can just go and get the exposition of this, the exposition of the right hand side, etc. Pop that into your parent and be like filter by these dates, or filter by these temperatures, or something like that.

Have the parent component do whatever filtering you need and then after it's done the filtering have, the chats render only the things that have been filtered. So because this component doesn't care about the data itself, it only draws whatever the pen tells it to draw. So, if the parent after something has been filtered and the parent filters those things out.

Then within here it will only draw those things that have been kept after the brush. So, definitely possible it's just you need the SVG on top of the canvas.
>> Speaker 3: Is the brush smirk when it comes to radial chart, would it make like a radial brush? No? Does a regular square brush over it?

>> Shirley Wu: But, let me think about that.
>> Shirley Wu: Yeah. [LAUGH] I have made a custom radial brush before. And I think what I did is create a, let me see if I can still find that.
>> Shirley Wu: What I did was basically make a use D3 arc to make a kind of like a pie slice.

And then, draw that and when I move around I use D3 drag to handle that dragging interaction. Cuz you can imagine, this is basically just a fancy drag interaction, right? And then from there on, I believe what I did was grab the
>> Shirley Wu: Grab the the minimum angle and the maximum angle I think.

Yeah. So no. But you could do it yourself. [LAUGH] That's all I have for today, so I just want to thank the beta testers that kind of like gave me feedback. I did a shorter version of this with them and they gave me a lot of feedback, and I want to thank you for being here.

Thank you so much.
>> Group: [APPLAUSE]

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