Data Visualization for React Developers

Additional Resources

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 "Additional Resources" 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 D3 legends and annotation functions, and additional resources that help with readability of your visual aid.


Transcript from the "Additional Resources" Lesson

>> Shirley Wu: A few last notes about readability. We talked about axes before, the kinda label, if you have one of those charts that has an x-axis and a y-axis, axes are really great. But if you have, like say if you have visual mappings that are colors or maybe you have that we were talking about earlier that don't have axes.

Legends are really, really important to ensure the readability of your chart. We are not going to talk about this today, but definitely check out D3 legend which makes drawing legends really easy and then also annotations are really important because you might want to point out specific parts of your visualization to have people pay attention to it.

And the cool thing is, for annotations, it's also by Susie and she has direct react support. And so you can create any of these annotations and put them directly into your render function without having to do the whole group element component update or whatever thing, you can just put them into your render function.

And so that's composable annotations. Really, really cool.
>> Speaker 2: So all of the other D3, I guess packages that we looked at, do they have you think similar things where you can just like use like a remade React component?
>> Shirley Wu: I know that. I have heard a lot about this which comes out of Airbnb and I think this one makes a bunch of things in d3 composable in React.

>> Shirley Wu: Shapes that we talked about. And then this is some of the galleries they have, so examples that they have. So I know you can do that, but I've never used it, so I don't actually know how flexible it is. But it seems to be,
>> Shirley Wu: I think it seems to be just passing the data, and then it will draw things?

>> Shirley Wu: And then there's also this one if you ever want to check it out, is called Semiotic. And this is Elijah Meeks over at Netflix. And this one is also I believe React. And this one is really interesting because instead of organizing it as different charts that you can put into React as components.

He does it as like layers. So layers of the visual elements or like layers of bars or layers of annotations or layers of axes. And this one is all about being able to quickly prototype as you're working with your stakeholders. So if your stakeholder is like, I want to see my data this way.

So this is supposed to allow you to really quickly go from let's say a bar chart to a histogram or something like that. So this is, I read kind of his
>> Shirley Wu: His documents on the philosophy behind it, and I'm really a huge fan behind the philosophy, I just haven't personally been able to test it out myself.

So these are the two that I tend to recommend if you want to go with a charting library on top of React.

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