(Easier) Interactive Data Visualization in React

Rate this content
Bookmark

If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

27 min
22 Oct, 2021

Video Summary and Transcription

This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.

1. Introduction to Interactive Data Viz in React

Short description:

Hi, folks. How's it going? I'm Anjana Vakil, a developer advocate at Observable. Today, I'll talk about interactive data viz in React. Visualizing data can help discover meaning, patterns, and insights. Data viz is valuable for web apps, dashboards, and user insights. It's a wide field, but we can build effective visualizations without learning everything. We'll explore making a reactive data visualization app in React using Observable plot.

Hi, folks. How's it going? It's so good to see your faces. It's so good to see you all here. Oh my gosh. Hi. I'm Anjana Vakil, a developer advocate at Observable and I am beside myself, happy to be here with you all, whether IRL or on the livestream.

What's up, y'all? I am really excited to talk to everybody today about interactive data viz in React. The slides for this presentation and all of the links and everything are up at that URL on observableHQ.com and I will try to tweet that out after the talk as well.

So I am relatively new to the world of data viz as a software developer, JavaScript developer myself, but here's some of the stuff I've been learning about data visualization. So one thing is that when you have a bunch of data, visualizing it, putting it in front of people's eyeballs in an effective way can be the most awesome way to quickly discover actual meaning from that data, see patterns in it, get actual insights, be able to make decisions based on it. That means that data viz is an extremely useful component in a lot of different types of web apps.

So, of course, any kind of dashboard you might be building there's probably going to be a data viz involved. Any time you're trying to give your users insights into their own data on your platforms. Raise your hand if you had to build some kind of data viz in any of your apps. Lots of hands. And I'm sure lots of cyberspace hands as well. So this means it's also a very valuable skill to have on your resume or as part of your developer portfolio. So something worthwhile to learn a little bit about. However, data viz is a wide, wide field. It is something you could spend your entire life and career digging into and getting a dissertation, writing a dissertation in and becoming an expert in and never get to the bottom of. Does that mean in order to build effective visualizations in my apps, I have to, on top of all the regular web and React and JavaScript stuff that I need to know, I have to also learn about statistical analysis and color theory and human visual perception and all of these different things. That sounds really overwhelming and difficult. How can I build a good visualization without having to rededicate my life to learning everything there is to know about data viz.

So it can seem really daunting, it can seem really hard. What hopefully we're going to explore today in the short time we have together is how we can make a non-trivial reactive interactive data visualization app in React without having to learn everything there is to know about data viz. How can I stand on the shoulders of giants and get this data viz up and running as quickly as possible. What we've got here and this is what we're going to build today if the demo gods are with us is a simple visualization of the frequency of different letters in the English language and it's something that I can as a user sort in whatever way I want to see it. So I can sort them by the descending frequency and see it's a little covered up here but the E is the most frequent letter. So this is what we're going to try to build and hopefully see how we don't need to reinvent the wheel to do it. The tool we're going to use for this job is a new relatively new open source DataVis library called Observable plot.

2. Introduction to Plot Library

Short description:

Plot is a high-level library created by the same person who created D3. It allows you to quickly create meaningful and customizable visualizations. Plot employs a grammar of graphics, a way of describing and systematizing chart creation. It provides key concepts like marks, scales, transforms, and facets to create powerful and complex graphs. The library's defaults make layout decisions for you, simplifying the process of visualizing data.

So plot like Observable was created by the same person who created the library D3 if folks have heard of that or encountered that, seeing some nods. So Mike Bostock, who is also a CTO at Observable and some of our other teammates at Observable put together this awesome DataVis library that was released open source earlier this year.

And plot is a very high level library. So it allows you to really quickly get a meaningful chart up and running while at the same time giving you the flexibility to be able to customize and build exactly the right type of visualization that you need for your purposes as opposed to choosing one out of a limited set of options out of the box.

So how it does this is thanks to a very simple and yet very powerful API that is built on the notion of something called a grammar of graphics. So this is a way of thinking about describing and systematizing how we can put together a chart, pretty much any kind of chart we can imagine, from a few basic concepts.

And this is something that's been around in the data vis world for a long time, so we've got, like, experts and tons of decades of research in data vis kind of baked into this grammar of graphics. And then, PLOT itself employs this grammar of graphics, but implements it on top of D3. So we've also got Mike and the rest of the D3 teams, decade of experience building SVG-based visualizations for the web, all baked into this library.

So it's essentially like having a little data vis expert friend in your pocket that can just help you figure out the best chart to build. And so how it does that is by means of a few key concepts. We're not going to go in detail into all of them. You could read all about it. But there are things like marks, which are the visual elements we see on the page. This might be a bar. It might be a line. It might be dots in a scatter plot. There are scales, which are essentially functions that transform the values that I have in my data set, so in my data space, into values in the actual visual representation.

So this might be taking those frequency numbers and turning them into pixels of how high the bar is going to be on the screen. A couple of features we're not going to talk too much about, but are super useful for creating more custom visualizations, things like transforms, so we can do aggregations, like sum, mean, that sort of thing, and facets, which allow you to take a data vis and split it up into smaller subvisualizations that each focus on a subset of the data.

So with these just few concepts, which don't take too long to wrap your head around, you can actually create really powerful and really complex graphs that totally fit whatever your needs are. But at the same time, you can allow the defaults built into Plot to kind of make a lot of the decisions for you, so that you don't need to learn everything there is to know about how to perfectly lay out things on the screen.

So let's take a look at what it actually feels like to write some Plot. Hopefully, folks can read this okay in the back. I'm going to take that as a yes. Okay. So what I've got here is some data about these letters and their relative frequency. So I've got an array of little data objects, datums, that have a letter and a frequency property. To create a Plot, it is a simple call to the Plot method on this sort of capital P Plot object, which is going to create an SVG. And this SVG is super boring.

3. Visualizing Data with Plot

Short description:

Let's visualize some data using Plot's bar Y method. It automatically maps properties of the data to the SVG. Plot makes informed decisions on layout, labels, and ticks. Customization is possible, such as sorting and reversing the order. Additional marks can be added for more flexibility.

It is just a blank SVG that does nothing. So let's fix that. Let's actually visualize some data here.

I mentioned super briefly that Plot has a notion of marks, the visual elements that we see on the page. Here I want to make a bar chart. I can do that by calling the bar Y method on Plot, which is because we're going to be doing these vertical bars. There's also a bar X for horizontal. That's going to take in the data that I want to visualize, in this case my little data array. And then I'm going to pass in an object that tells Plot how to map properties of the data to properties of the actual SVG on the screen. In this case, we're going to tell it, hey, take the X axis and use that to show the letter property in my data. And then on the Y axis, I want you to put the frequency property.

And once I evaluate that, boom, I've already got a meaningful chart. And Plot did a ton of heavy lifting here that I would have otherwise had to think about and build myself. So for example, figuring out how to lay everything out on both of these axes, figuring out how the tallest bar in my visualization is going to be and setting up the Y axis appropriately, adding labels, adding the ticks in the right places, et cetera, et cetera. So Plot is making a lot of really well-informed decisions for me behind the scenes. And however, I can customize it however I'd like.

So for example, by default, it's just laying out all of these letters in the order that they appeared, so an alphabetical order in this case. But if I want to change that, in my bar Y Mark, I can pass in a sort property, and say, hey, Plot, sort the stuff on the X axis by its value on the Y axis. Boom. It does it for me. I don't have to worry about the values in the data. Plot will figure it out for me. And likewise, if I say actually I want to see it in the other order, the descending order, I can just add a reverse true. And there we go.

So we're already starting to have a not super trivial chart here built up from, again, a super declarative API. And there are other configurations I can put on the chart itself. Like, if I want to add a grid on the Y axis, I can do that so that it is a little bit easier to see what the values of those bars are across the horizontal dimension. And I can actually combine different types of marks. This is where, again, we're not boxed in by sort of a certain set of given out-of-the-box visualizations. I can add additional marks.

4. Creating a Meaningful Chart

Short description:

Imagine all the letters in English being used equally. By adding a straight line at a certain value on the Y axis, we can compare the frequency of different letters to that uniform frequency. With just a few lines of code, we can create a meaningful chart and customize it as needed.

Maybe I want to show, okay, imagine all of the letters in English were used exactly the same amount. What would that frequency be? So let's put a rule, a straight line, at a certain value on the Y axis so that it goes straight across so we can compare how much more frequent or less frequent different letters are to that uniform frequency. So I can call the rule Y method here. In this case I'm going to pass in just a single value, which is going to be what I would expect that frequency to be if all the letters were the same, which is one over the number of letters I have. In this case it's 26. And if I remember a comma here, plot will draw that line for me. And, of course, so right now it's not the most visually exciting char. We don't have any color going on, but I can change that as well by adding configuration options that are largely based on properties that we might be familiar from SVGs. So I can set, for example, the stroke color to orange. Or maybe I want to make it a little bit wider, so I'll set a stroke width of maybe three. So now I can see that, oh, like L is about breaking even, and C is like much less frequent than normal, and E is way out there, huge outlier. So now we've got a trivial example, these letter frequencies, unless you're a linguist by background, like I am, in which case it's very exciting. But we can see that, in just a few lines of code and probably more minutes than I should have taken because I've been yapping, but in just a few minutes and a few lines of code, we've got a meaningful chart, and yet it's not anything out of the box that I just had to take the defaults of. I can configure them as I see fit.

5. Integrating Plot with React

Short description:

By using Plot, we can create an SVG with bars, ticks, and lines without hand-coding them in our React app. Plot manipulates the SVG element and renders the chart using hooks like use ref and use effect. These hooks allow React to delegate DOM manipulation to Plot and handle rendering and updates.

Okay. So by this point, you're probably saying, all right, I thought we were at a React conference Where's the React happening? How do we make this React? So what Plot is doing, as we said, is creating an SVG with all of these bars and ticks and lines and so on and so forth. I don't want to have to hand-code that in my React app. So what I'm going to do is let Plot manipulate its little SVG element and fill it in with all of the chart stuff that it wants to draw. And in order to allow React to kind of delegate that DOM manipulation to Plot, we're going use a couple of handy hooks. Use ref, which is going to let us connect into a DOM node that then Plot can do its thing inside of. And use effect, which is where we're actually going to be letting Plot do the rendering of that SVG and any updates when the state changes. Then, of course, we have to remember to clean up after ourselves.

6. Hooking up Plot to the App

Short description:

Let's import Observable Plot into our project and create a component called LetterVis to display an empty div. We'll pass in the data as a prop and hook up Plot to the div using useref. Finally, we'll use useEffect to render the bar chart.

Okay. So if the demo gods are with us, let us take to the code sandbox and try to make a chart app happen real fast. What I've got here, and, again, hopefully folks can see in the back, what I've got here is a, basically, a bog-standard create React app. All I've done is changed the title, and I've got a couple things ready to import just to help us along here.

The first thing I want to do is bring Observable Plot into my project as a dependency so I can add it in as Observable HQ slash Plot. Oh, thank you, Code Sandbox, for making that so easy. Amazing. OK, so now we've got, now we can import this Capital P Plot from Observable HQ Plot.

A couple of other things I have going on here, I've got my data. This same letter data that we just saw, and later we're going to add a little dropdown to explore that Reactivity. So let me pull in my data as well here. Now we said we want to allow plot to do its own thing in a div in our app. So I'm going to start creating a component here. We can call it, I don't know, we'll call it LetterVis for now. It's going to be the most boring thing ever, it's going to return an empty div. OK, not exciting yet. And then we'll be able to insert this in our app here. And then probably we're going to want to visualize some data, so why don't I pass in that data as a prop here, and I can pass it in here. So right now we're just loading this hard-coded letter data from this file, but you'd probably be pulling in your data from wherever it is, your API, what have you, we're not going to cover that part.

OK, so now I need to hook up plot to this div right here. And for that, our friend useref comes in. So let me grab useref, and we're also going to use a couple other hooks, useEffect and later usestate. And let's create a new ref where plot can do its thing. So I can call this plotRef and just call useref. This is just going to start off as a little object which has a current property, which is going to be set to null at first, but if I hook it up to this div, plotRef here, now when React renders this div, plotRef.current is going to be the actual node, this div node in the DOM, which I can then tell plot to do its thing with. Inside of a useEffect is where I'm going to make that happen. So let us get our useEffect going here. Oop. And what we're going to do is grab our bar chart from over here. Doop doop da do! Control C.

7. Creating the Bar Chart and Cleaning Up

Short description:

Doop doop da do. Bar chart will be this plot.plot. To capture the SVG element and include data, add data to the dependencies of useEffect. Let plot do its thing by rendering the div and then use plot bar chart to display the chart. Clean up after using use ref by returning a callback that removes the bar chart from the DOM. Add margins to improve the layout and make the chart more readable.

Doop doop da do. Bar chart will be this plot.plot.

Okay, so exactly what I did before, this is now we're going to capture that SVG element and, oh yes, data is involved here. So I'm going to add data to the dependencies of this useEffect here. All right, now, nothing is on the screen because I haven't yet let plot do its thing so let's make that happen. As we said before, once React has rendered the div there and that's after that is when this useEffect is going to run, I'm going to have a reference to plot ref.current is going to be that div. What I can do is let plot bar chart sit right inside of that. Now, we are getting some things on the screen except too many things. Uh-oh, because I'm not cleaning up after myself. This is the gotcha. If I'm using use ref, I am, to quote Rachel yesterday, escaping, using the escape hatch from React. I don't get all of the nice things that React usually does for me like clean up after me like it's my maid. Instead, I have to clean up after myself. Oh, no, woe is me. That's not so bad, though, because I can return a callback, which essentially does the opposite operation of this append. We can take our bar chart and remove it from the DOM. This is the trade-off with if I want plot to do the heavy lifting of putting this whole chart together for me so that I don't have to hand code a little rect elements and whatever inside of an SVG, this is all I have to do. I have to use ref. But remember that since I am escaping React, I have to also clean up after myself and be a good neighbor. All right. So now, if I refresh my app here, hopefully, we've only got one chart going on. All right. Excellent. Now, we have some problems with the layout here. Let's add some margins, which I can do in plot real quick just to fix that a little bit. And this will hopefully make it more readable.

Okay. So, here we have it. Let me hide this. We're getting there.

8. Adding a Sort Selector for Customization

Short description:

We've added a sort selector to allow users to customize their data visualization. By choosing different options, users can explore datasets and find insights more easily. The dropdown component allows users to select from options like alphabetical, descending frequency, and ascending frequency. We connect the dropdown to the plot chart using a state hook and an onchange handler. The selected option updates the state, but we haven't brought it into the use effect yet.

We've got a chart. We did it. And again, the pattern that we're using is to grab this use ref, connect it to our active, and then in the use effect, let plot or whatever DOM manipulating library you might be using do its thing, add its SVG in, and then remove it when we want to update the next time.

All right. So, now, for the reactivity part. Are you with me? We're going to make now this little sort selector so that my user can decide how they would like to best see their information, which is really powerful. When you get to have your hands on the data and play around with it, and change the visualization in certain ways so that you can explore a dataset, that makes it even easier to find those insights and those patterns.

So in this simple example, we're going to add that little dropdown, which I've got a tiny little component for over in this other file. I'm going to import that, and then create a dropdown inside of my letter chart. So, to do that, I'm just going to bring in my dropdown component. I can give it a title, call it sort by. I can give it some options, an array of values to choose from. The default one was alphabetical, so let's keep that in there. And then we'll have descending frequency and ascending frequency, in case my users want to use either of those. If I remember to close all of my things and make this symmetrical... Hopefully... Okay.

So now we've got a little thingy on the screen that allows folks to use this select widget to choose an option. It's just not doing anything yet, because we haven't connected it to the plot chart. So let's fix that. So earlier I had brought in a used state hook, our good old friend. So what we can do is create a sort property and a set sort using our used state hook. We can give the default value of that alphabetical just to start it off with something. And then what I can do in my dropdown is pass in a little onchange handler, which is going to take in the change event where somebody chose a different option in the dropdown and is going to set the sort to whatever the option was that they actually chose. So now hopefully this is updating our state, but there's no visual effect of that because we haven't brought the state into our use effect yet. So let's do that. So the first thing I want to do is bring my sort variable here into the dependencies of the use effect. And then, for example, here we added that sort property with this little configuration object. We can now make choices about how we want this property to look based on the value of the sort. So if sort is alphabetical, I can actually just decide to do nothing.

9. Creating a Declarative Chart

Short description:

By using a declarative API, Plot allows us to create a reactively updating chart without manually manipulating it. We can focus on declaring the desired chart appearance and let Plot handle the drawing. This makes it easy to make choices based on the app's state.

And then, if I have a non-alphabetical sort, I can choose the order, whether this will be reversed or not, based on whether that value is descending. If it is, then reverse things. And if not, then don't. So now, if I haven't messed up, which is a big if, I have a reactively updating, but declaratively written chart happening in my app. So I hope you all feel, as I do, that because of this declarative API that plot offers, because I'm not manually, imperatively manipulating the chart, I am just declaring, this is what I want the chart to look like. Plot, you figure out how to draw it. I'm not gonna concern myself with that. Because of that, it feels nice with this reactive application. Because I can make choices just like I would in another component to decide which element to render based on the state of my app.

10. Building a Reactive Dataviz App with Plot

Short description:

We made a reactive dataviz app with Plot, showcasing the ease of building custom reactive responsive applications. The library's declarative API handles scales and mappings, while allowing for easy customization.

So we did it. We made in not too much time a reactive dataviz app. It's... I don't know how often we're gonna want to look at the relative frequency of letters in the English language. Again, unless you're a language nerd, nerds like me. But hopefully this gives you an idea of the type of custom reactive responsive applications you can build with a library like plot. And its declarative API. Yay.

All right. Thank you, demo gods. Okay... So we're almost out of time here. But just a couple more words. So hopefully this felt pretty easy. What do y'all think? I mean, we didn't have to think about scales. We didn't have to think about mappings between the values of my actual data and the layout of the bars on the screen. Plot took care of all of that for us. And yet I was able to override values as I needed. So could it possibly get any easier to drop a chart into my app?

11. Embedding Visualizations and Customizing Charts

Short description:

You can find tons of examples on the site, including the plot library and other libraries like D3. Grab embed code or React component code from any Observable notebook to integrate visualizations into your app. Open source reusable functions have been released for generating D3 charts. You can customize the charts using the same pattern as before. Plot is a high-level library that allows for convenient and customizable chart creation. It has a declarative API and works well in Reactive applications. Useref and UseEffect can be used to delegate DOM manipulation. Further reading resources are available for Plot and D3.

You can poke around on the site and you'll find tons of examples because it's also an awesome community of tons of creators who build the coolest visualizations. I do not know how they do it. So there are amazing examples, not just with the plot library, but other libraries like D3.

And from any Observable notebook, you can actually grab a snippet of embed code to either drop in a self-contained little iFrame element, plunk, done, or to actually generate the React component code that you would need if you want to paste that into your app and manipulate it as you want to integrate it with the rest of your application. So that's pretty easy. Super exciting, just last week, like, five minutes ago, we released some open source reusable functions that you can call to generate a complete D3 based chart. So this is a sort of new development in D3 Examples where you don't have to figure out how to imperatively replicate these cool D3 charts you see around. There are a bunch of different functions like histograms, sand creed diagrams, tree diagrams, all kinds of different stuff. You can find all the examples up on observablehq.com.

And using the exact same pattern that we just saw, you can insert this into a React app. So having a useRef and useEffect pattern that we just saw, you can call a histogram function and get an instant histogram, customize it as you see fit, make it red, make it whatever, and again, using that same useUseRef, useUseEffect, cleanup after yourself pattern that we just saw. And again, these are both really easy ways to take all of the awesome years and decades of experience that these awesome data viz developers have that have been baked into these examples and these APIs, these libraries, to not have to learn all of that ourselves. So we can just get a cool chart that does the thing that helps our users understand the data we want them to understand. Okay.

So super quick recap, because I think I'm a couple minutes over, sorry, is that plot what we've seen is a high enough level library that you can get a really convenient chart up and running with a couple lines of code and yet it doesn't box you in to only specific examples. You can customize it based on combining these few different concepts. Because it has a declarative API, it feels real nice in a Reactive application. It was actually designed to be used in a Reactive context in Observable but React is another perfectly great application. So Useref and UseEffect are our friends if we want to delegate DOM manipulation to another library so I don't have to hand code everything. And the examples we saw with D3 charts and other examples you might find around Observable, you can pull those into your apps as well. So thank you so much, there's a bunch of further reading linked on the slides. If you want to dig more into plot, if you want to dig more into D3 as well, there's also lots of good resources out there. And I thank you so much for being here with me. It's been awesome talking to you all. Thank you so much. My teammates at Observable, thank you. Thank you. Thank you. Thank you. Please, take a seat.

QnA

Questions and Accessibility

Short description:

Please, take a seat. We'll be answering some questions shortly. One question is about stress testing Plot with lots of data points and any performance gotchas with SVG. Plot is based on D3, which has been optimized for years, so it should handle large plots well. Plot is tied to SVG rendering but a canvas-based library could be built using the same principles. Accessibility guidelines are still a work in progress.

Please, take a seat. So we have a bit of an awkward scheduling thing where the livestream will cut into a different set of programming in a couple of minutes. But you have also broken the question record, I think you have the most questions of any talk so far. I don't know if it's a good sign or a bad sign. I don't know either. But we're going to get through some of those questions for people who are here in the room So feel free to, in a couple of minutes, either go have coffee for the half an hour break that we're going to have, or stay here and we're going to go through questions for about 10 minutes. Good with you? Sure. Great.

So the number one question that we have over here is, has Plot been stress tested with lots of data points, and if so, did you find any performance gotchas with SVG? That's a great question. So if you're kind of redrawing an SVG every time, you're going to be probably having a little bit harder time than with 26 letters like we were. However, Plot is based on top of D3. And as folks may know, D3 has definitely spent 10 years optimizing and things like updating data when it changes so that you will need to update the parts that matter. And so you have essentially all of those advantages of D3 kind of lying underneath Plot. So I'm not sure, since Plot is so new, I'm not sure what the upper limit is of what the largest Plot is that has been made. That's a good question I'll ask my team. But hopefully the fact that D3 has been working on that problem for a long time lends itself well to trying to do it, not the slowest way possible, let's put it that way. Nice. And maybe as a follow up on that, is there anything in Plot that ties it to SVG rendering or could it be used with the canvas-based renderer as well? So Plot is based on SVG. I don't think it would. I think you would kind of have to go back to the drawing board to get things rendering in canvas. However, you know, this is, again, one kind of approach at implementing this idea of a grammar of graphics. So that is kind of a higher level formal system of representing the different types of charts that we can make from these key concepts. So I could totally imagine and perhaps there are some out there, a canvas-based, another library that's canvas-based that takes the same principles and makes those translate into a canvas rather than SVG elements. Nice. I used to work in Victory back in the day, so we had to struggle a lot with the same problems. I'm very sympathetic to your cause. I think the live stream might be cutting out now, so if you're still there, goodbye. We'll continue here in the room for a little bit more.

So Andy H is asking, are the plot visualizations able to easily meet accessibility guidelines? That's a great question. It is definitely something that we still have work to do on.

Accessibility and Contributions

Short description:

Plot is an open-source library that is still in the beta phase. The team is actively working on addressing accessibility concerns and welcomes contributions and feedback. The goal is to make Plot more accessible and improve the field of web-based data visualization.

Luckily, it's all open source, as I mentioned, so if you are running into particular accessibility hurdles or things that are not yet in the library, because it was just released last spring, so it's still kind of in a beta phase of its life. We're still working some of the kinks out. If you have particular questions or headaches or hurdles there that you're concerned about, I would recommend jumping over to GitHub.com and getting into the issues and seeing what's already been flagged, maybe there are additional things that you'd like to file a new bug for, and check out what the possibilities are there. Contributions welcome. Yeah, that is the kindest way of saying PR is welcome. If you don't like it, you can fix it. And feedback welcome, you know, issues and raising those concerns, that's definitely something we want to hear. There is definitely a lot of impetus from the team to make sure that Plot is moving in a direction of more accessible visualization. Accessibility in Dataviz is, like, itself a field that, or an area that I think the whole field kind of web-based edge of Dataviz needs to tackle a little bit better, so it's a work in progress, but we'll get there.

Plot's Support for SSR

Short description:

Plot's support for SSR is uncertain. It uses D3 to create DOM elements, so it may be possible but requires further investigation. For accurate information, it is recommended to consult the Plot documentation or discuss it on the Observable forum.

Nice. Another question, maybe similar answer. Does Plot support SSR? Good question. I would like to turn that over to my team, if possible. I think that since, you know, since we're essentially, Plot is kind of using D3 to create the actual DOM elements on the page. I think it probably can be done, but I'm not entirely sure what the hurdles or implications of that might be, so I would say that is a great question to bring up in either the Plot or in conversations with the observable team on the forum. So we have a forum at talk.observablehq.com. Before I say anything incorrect, let's dig into it over there.

Comparing Plot to Other Libraries

Short description:

Plot builds on top of D3, making it part of the D3 family of thought. It provides a quicker way to get up and running compared to D3. Vega-Lite is another library that employs a similar grammar of graphics concept. Plot allows you to craft your own charts by easily combining different types of marks. It was designed to work well in a reactive environment and offers documentation comparing it to other libraries like D3 and Vega Lite.

Nice. All right. So the next question is kind of gnarly and you can take it any way that you want, but it has been asked so many times, so we have to ask it. How would you compare Plot to other open source chart libraries like Chart.js or Victory or what have you? Sure. So as I said, being new to datavism, I'm not like intimately familiar with these other libraries. However, I would say so Plot's main distinctions are, again, that it builds on top of D3 and so builds on top of all the thinking that has gone into D3 over the last 10 years. So D3 being this like enormously powerful low level data visualization library that has tons of capabilities. So the fact that Plot is based on that kind of makes it sort of part of the D3 family of thought, as it were. So if you're familiar with D3 but find it sometimes a little bit too low level for your needs and you wish there was a quicker way to get up and running, Plot is the way to go. However, there are some other databiz libraries out there, for example, Vega-Lite is one for JavaScript based on Vega that also employ this similar idea of a grammar of graphics. So if you've worked with things like R's ggplot or Vega-Lite, you might find that coming to Plot feels ergonomically similar because it employs a lot of the same concepts and conceptual frameworks. Again, a lot of chart libraries that I've seen give you a few out of the box options which have a few configurable properties but don't really let you craft your own or combine different types of marks or combine, you know, easily combine lines with bars or dot plots or things like that. But the nice part about plot is that it doesn't necessarily give you out of the box charts but because it is so quick, hopefully we've seen, and simple to add different types of marks to your charts, it allows you to kind of like build your own Lego set, as it were, out of these recomposable pieces. So I think that's one nice thing. And the other big thing about plot is it was built to live in a reactive environment. So observable notebooks are this kind of functional reactive in browser JavaScript environment And plot was designed to work really nicely with that. It was designed with its declarative API to work really nicely with updating values based on user inputs and interactivity. So I think it works really well in those cases, too. And there's some documentation on the observable site about comparisons between plot and some other libraries like D3, like Vega Lite. So that might be of interest to folks who are asking themselves about those comparisons.

Handling Clustered Data Points and Customization

Short description:

You can rely on the defaults of the plot to handle the majority of clustered data points. However, if the outliers are not relevant or you want to provide customization options, you can override the default domain and range. This allows you to restrict the domain to exclude outliers and spread the visualization appropriately on the screen. Observables and D3 provide examples and tools to handle data visualization challenges and explore different ways of visualizing data. You can find inspiration from existing notebooks and examples, and even integrate them into your own app. Observable is a powerful tool for exploring and creating visualizations.

Yeah. Nice. Do you think you can handle a couple more questions? I'm caffeinated and ready to go. Let's do it. You don't sound like it at all. So OK, so here's a question. I'm going to pick one that isn't the top one right now, but I will go for the next one here, because it's an actual question about data visualization and not necessarily about plot, but I would be interested to hear your thoughts on it. So how would you solve the problem of having a majority of data points clustered together without liars at the extreme end of scale? So for example, 99% of values between 0 and 1, and then 1% of values at the first percentile?

Yeah, so this is going to be one of those cases where you can rely on the defaults of the plot. What plot might do is look at all of the points in your data and say, OK, here's the smallest, here's the largest. That is essentially the domain of my problem here. That's the input space. And I'm going to map that to my range, my output space, which is the number of pixels that I have available to me on the screen. However, if for your application maybe those outliers aren't that relevant, or you want people to have the option to change that, what you can do in plot is override that default domain and range to whatever suits your purposes. So if you want to, let's say, restrict the domain to exclude those outliers, you can pass in a domain property to plot and tell it the minimum and maximum values you actually want it visualized, and it will then do all of the mapping that it needs to do to spread that out appropriately on the screen. So you can also hook that up to the interactivity in your app to, let's say, allow folks to choose what bounds they're looking at and zoom in, as it were, or zoom out. So that is probably where you'd end up digging into from that perspective. I think that brings up a really good point that a lot of people... There's a lot of questions here that are about runtime performance, about tree-shakability, about things that are to do with the JavaScript nature of this library. But fundamentally, data visualization problems are problems because some data is just harder to visualize. And that's why I really like Observables as a tool, because the notebooks just allow you to play with data and see it in different ways, and find intuitive ways of seeing something in a chaotic set of data.

Yeah, definitely. And I think also, again, in terms of not trying to reinvent the wheel and have to learn everything about the theory of data viz, poking around Observable and the different notebooks that people have created to see some examples of how folks have handled exactly that problem, how... Again, there's also examples in D3 of using things like animation to help people see the way that the domain is changing, or expanding or contracting, based on zooming in or out to a chart. So those type of examples can be really useful in pointing you in the right direction, or in the ideal case, you can just grab it, including credit where appropriate of course, and stick it into your app, as we said before. So yeah, hopefully that points folks in some good directions. Yeah, I mean, I have no horse in this race, but I love Observable as a tool. I've played with it so much. And I love just browsing the visualizations that other people have created. You know, the data sets are just incredible. I know.

Prototyping and Sharing with Observable

Short description:

Observable allows for quick prototyping in React with instant feedback. You can export and embed visualizations into your own app, or share them as standalone apps using the URL. Additionally, you can fork other people's examples and customize them for your use case.

It's really sometimes mind boggling, the stuff that people create. And the nice thing about Obs—I think one of the nice things about Observable is you can also include explanatory text, you can link a visualization and its interactivity to other parts of a sort of complete page that describes the data, et cetera, so it's really nice for data storytelling applications as well. And because of that embedding or that sort of exporting functionality, you can prototype quickly in React because it's all, like, instant feedback—sorry, you can prototype quickly in the Reactive environment of Observable which is built with React. You can get it running quickly and then when it works, when you like how it is, you can export it, embed it into your own app. You can even just grab the URL to sort of send folks to it as sort of a standalone app, so yeah, it's a pretty quick way to get running and you can also fork other people's examples so that you don't have to do all of the work they already did. Just tweak it, for your case.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn