Data Visualization for React Developers

D3 Manipultations and Interactions

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 "D3 Manipultations and Interactions" 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 DOM manipulation and Interactions within D3, where React will become useful.


Transcript from the "D3 Manipultations and Interactions" Lesson

>> Shirley Wu: And of course, there is other parts, as you can see. I think these are really great, these are interactions that are really, really great. And they're very data visualization-specific that I use quite frequently. We'll actually talk about Brushes later on, and Brushes are really great for filtering.

There's Drag, there's Zoom and Pan, if you can imagine having a map and zooming and panning for that. And then Quadtree is really helpful for finding if you have an xy position and finding the point that's nearest to it, etc. And so if you ever need to implement anything along those lines, I would recommend checking out the API for that.

But today we're here to talk also about React. And I think these are the sections that we'll use React for and I think React does a lot better of a job with. And so you can see here, this is the DOM manipulation part, this is the Selecting, Modifying, Joining data.

This is the enter, update, exit pattern that I was talking to you about this morning right here. And Dispatches is kind of how D3 tries to do, basically, event handling. And so I think Dispatches is kind of like the way that we use it with visualizations is, for example, if you have two visualizations.

And if you do something in one visualization and you want that interaction to be reflected in another visualization, you can use dispatches. And it's kind of like a pub/sub model, but I find that that takes a lot more code. And it's something that React gives us for free if you just use the state management within there.

So that's what we'll be talking about from now on, this is what we'll use React for.

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