(Easier) Interactive Data Visualization in React

♪ Okay, 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. I'm a developer advocate at Observable, and I am just beside myself, happy to be here with you all, whether IRL or on the live stream. What's up, y'all? And 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 some actual insights, be able to make decisions based on it. And 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. Anytime you're trying to give your users insights into their own data on your platforms, raise your hand if you've 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. So does that mean that in order to build effective visualizations in my apps, I have to, on top of all of 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? So 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, I can sort in whatever way I want to see it. So I can sort them by the descending frequency and see that 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 we're going to hopefully see how we don't need to reinvent the wheel to do it. The tool that we're going to use for this job is a relatively new open-source data viz 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's also a CTO at Observable, and some of our other teammates at Observable put together this awesome data viz 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 the 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 viz world for a long time, so we've got experts, tons of decades of research in data viz 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, a decade of experience building svg-based visualizations for the web, all baked into this library. So it's essentially like having a little data viz 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. And then a couple of features that 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 viz and split it up into smaller sub-visualizations 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 default built into plot to make a lot of the decisions for you so you don't need to learn everything there is to know about how to perfectly layout 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 OK in the back. I'm going to take that as a yes. OK, 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. So 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 tall 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, etc., etc. 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 in 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. And so 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 kind of uniform frequency. So I can call the ruleY method here. In this case, I'm going to pass in just a single value, and I'm going to be what I would expect that frequency to be if all the letters were the same, which is 1 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 chart. 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 3. So now I can see that L is about breaking even, and C is much less frequent than normal, and E is way out there, a 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. 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 little 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 to 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. OK, 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. OK, so what I've got here, and again, hopefully folks can see in the back, what I've got here is basically a bog standard create react app. All I've done is kind of 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. OK, so 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 drop down 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 letter vis 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. Again, 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 usereft, and we're also going to use a couple other hooks, use effect and later use state. 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 use effect is where I'm going to make that happen. So let us get our use effect going here. And what we're going to do is grab our bar chart from over here. Doot, doot, doot, doot, Control-C, doot, doot, doot, doot, bar chart will be this plot.plot. OK, so exactly what I did before. This is now we're going to capture that svg element as bar chart. And oh, yes, data is involved here. So I'm going to add data to the dependencies of this use effect 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 after that is when this use effect is going to run, I'm going to have a reference to plot ref.current is going to be that div. So what I can do is just let plot's bar chart sit right inside of that. OK, now we're getting some things on the screen, except too many things. Uh-oh, because I'm not cleaning up after myself. So this is the gotcha. If I'm using use ref, I am, to quote Rachel yesterday, escaping, using the escape hatch from react. So I don't get all of the free nice things that react usually does for me, like clean up after me like it's my maid. So 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. So this is the tradeoff 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 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 div, 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 data set, 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. And then if I remember to close all of my things and make this, 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 use state hook, our good old friend. So what we can do is create a sort property and a set sort using our use 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 on change 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. Okay, 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 proper variable here into the dependencies of the use effect. And then, so 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 going to 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 elements to render based on the state of my app. So we did it. We made, in not too much time, a reactive DataVis app. I don't know how often we're going to want to look at the relative frequency of letters in the English language, again, unless you're language 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. Okay. So we're almost out of time here, but just a couple more words. So hopefully this felt pretty easy. What do you 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? Well, so Observable, observablehq.com, is an in-browser, javascript-based, reactive DataVis prototyping and display, also, environment. 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. Like, I do not know how they do it. So there are amazing examples, not just with the Plot library, but with other libraries like d3. And from any Observable notebook, you can actually grab a little 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 then manipulate it as you want to integrate it with the rest of your application. So that's pretty easy. And 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 a new development in d3 examples where you don't have to figure out how to imperatively, like, replicate these cool d3 charts you see around. There are a bunch of different functions like histograms, sand-tree 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, clean up after yourself pattern that we just saw. So hopefully these are both really easy ways to take all of the awesome years and decades of experience that these awesome data vis 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, hopefully 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. useUseRef and useUseEffect 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 of 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 to my teammates at Observable. Thank you, thank you. Thank you. Thank you. 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 this is 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 ten 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 of a 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 ten years optimizing and things like updating data when it changes so that you'll 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 kind of 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. Just a follow-up on that. Is there anything in Plot that ties it to svg rendering or could it be used with a Canvas-based render as well? So Plot is based on svg. I don't think it would – I think you'd kind of have to go back to the drawing board to get things rendering in Canvas. However, 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. Yeah, I used to work at Victory back in the day, and so we had to struggle a lot with the same problems, so I'm very, very sympathetic to your cause. Yeah. All right, I think the live stream might be cutting out now, so if you are still there, goodbye. And we'll continue here in the room for a little bit more. All right, so Andy H. is asking, are the plot visualizations able to easily meet accessibility guidelines? Yeah, that's a great question, and it is definitely something that we still have work to do on. Luckily, the plot is 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. So if you have particular questions or headaches or hurdles there that you're concerned about, I would recommend jumping over to github.com slash observable HQ slash plot and getting into the issues and seeing what's already been flagged, what 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. 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 DataVis is, like, itself an area that I think the whole field kind of web-based edge of DataVis 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 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 the plot repo or in conversations with the Observable team on the forum. So we have a forum at talk.observablehq.com. So 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 could 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. Yeah. So I, as I said, being new to data, I'm not intimately familiar with these other libraries. However, I would say 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 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 data viz libraries out there, for example, like Vega-Lite is one for javascript based on Vega that also employ this similar idea of the 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 kind of ergonomically similar because it employs a lot of the same concepts and conceptual frameworks. Again, in terms of 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 kind of craft your own or combine different types of marks, or easily combine lines with bars or with dot plots or things like that. So 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 chart, it allows you to kind of 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. 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, okay, 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 layers in 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... I mean, this is one of those cases where you can rely on the defaults of a plot. What plot might do is sort of look at all of the points in your data and say, okay, 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 kind of 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. Yeah, and 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 shakeability, 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 Observable as a tool, because 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 so 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. 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 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 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 the work they already did, just tweak it for your case. Nice. I'm going to ask one last question, and then we'll have to let these good folks to get some coffee because I don't think everybody's had as much as we have. Jet lag and coffee. So there's a whole bunch of questions that are basically the same questions. I'm going to paraphrase all of them here. How customizable is the design of the plot visualization? Can you pass your own components or your svg elements in place of the existing, you know, sort of like the components that you have, for example, bars or other things? Indeed, you can, I believe. So, again, all the links to the plot documentation are in the slides, but you can pass in your own kind of functions. And again, it's also, you know, because of these composable marks and things like that, I think it is possible to extend it with your own type of mark, for example, if there's something else you want to use. However, the built-in marks can be really useful. Like there's a text mark, for example, which can be really useful for doing things like, oh, I want my dot plot to not be dots, but I want it to be emoji or whatever it is. So you can also get a lot of mileage out of the built-ins even as they are. Nice. And there's one really fun question here I just have to ask. What is your secret to impeccable typing accuracy during live coding? Because it is pretty impressive. I'm a bit of a fan. I get it wrong all the time. Just, you know, lots of frantic practice before the talk. But I was worried about the Wi-Fi gods being with us, but we got there. Nice. Well, we've gotten through a lot of questions, and those who are watching this later on in the re-recording of the live stream, you have not accidentally been watching this at double speed. We are just speaking very fast. And, yeah, people here in London, enjoy the coffee break. We're going to be getting back in about 20 minutes, so there will be lightning talks. They will be hosted in the main stage, but they will be also streamed over here, so if you want to come here in preparation for the talks after, welcome. Thank you.