(Easier) Interactive Data Visualization in React

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.

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.

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.

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.

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.

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.

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.

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.

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.

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?

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.

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.

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.

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.

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.

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.

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.