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!
(Easier) Interactive Data Visualization in React
AI Generated Video Summary
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
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 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
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
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.
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
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
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
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
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
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
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
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
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.
Questions and Accessibility
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
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
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
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.
Handling Clustered Data Points and Customization
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, 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
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.