Using Plot with Vanilla JS & React

[00:00:00]
>> Let us move on to our final module. This one isn't going to be so much of a project as just a quick whirlwind tour of how we can use this Plot library in different places around the Web. So we've been looking at how we can use it in Observable so far.

[00:00:19]
But we can also use plot, it's just a JavaScript library module, we can also use it in other projects that have nothing to do with Observable. And we've seen all the syntax so that we will need to create some basic plots here. So, we can take those and share them with the world, either on Observable or in our own projects, whether vanilla or with a framework like React.

[00:00:42]
So let us jump into this last item in our data visualization collection here. If folks have any trouble finding it, I'll drop the link into the chart, maybe if I can find it. Here we go [LAUGH] okay. All righty, so that is right there. Okay, so, once you've got your amazing visualizations, whether they are aggregations or facets small multiples, or interactive, or static, or whatever they are.

[00:01:25]
Visualizations are only as good as the people whose eyes they are in front of, right? So, usually, unless you're just exploring your own data for yourself which is a super valid use case of data visualization. In fact that's exactly what Plot was built for, was this kind of exploratory data analysis where you're trying to get a better sense of what is happening in a particular data set, maybe get some idea of what those patterns are to answer your questions as we said before.

[00:01:54]
And once you've got those questions answered, if you're trying to share those answers with others, whether it be other people like that you work with let's say, or the world at large or other users because you're baking this into the apps you're building. You're going to want to share your plots with more people than just us probably.

[00:02:16]
So, let's take a look at a few different options you have for sharing any plots that you have made in Observable, because Observable exposes a few different ways that you can take your work that you've built in a notebook and share it with the world. So there are a few different options here.

[00:02:35]
And there are links in this notebook that you can read more about how these different options work. So, first of all with Observable notebooks, as you are seeing, there is a notion of publicly available notebook or a shared notebook that more than one person can see. There's also a notion of a private notebook that only I can see which is really useful for that initial exploration.

[00:02:59]
But in order to share all of these materials with you, I had published, so you'll see a little published at the top of each of these notebooks. I have published these notebooks to make them accessible to the world at large. And so if you have signed up for an Observable account, and again not necessary, but if you have, and you're tinkering around in Observable and you want to share a notebook that you've made, at the top you'll see some options.

[00:03:23]
You'll see a sharing option or if you don't see it, you'll see in the three dots menu here, an option to publish or an option to share. The difference is essentially share it lets you share a notebook with up to, I think for other individual users. So kind of like a private collaborative space.

[00:03:43]
And then publish lets you share the notebook more widely, like I've done by making these notebooks public so that everyone can see them. You can go into Publish and in this case I've already published it, so we'll see Publish settings. You can choose to make notebooks public, meaning they are discoverable, they'll show up on your user profile.

[00:04:02]
Again, if you have an account, or you can make them enlisted. So similar to an unlisted YouTube video or a link shared document on Google Docs or something like that. This is the option for you, if you don't really want everybody to know about this notebook, but you wanna be able to slack the link to your teammates who don't have Observable accounts, let's say.

[00:04:24]
So there are a few different options there. You can set URLs, etc, etc. So that is one option or two options I guess you have, you can share your notebook with specific users using that share menu item here, where you can type in individual users to share this with.

[00:04:40]
So I don't know maybe I wanna send it to my colleague, my former colleague, Mike Freeman, let's say. I can add individual users there or you can publish your notebook, either for the whole world or just for people with the link. But perhaps more exciting, is you can also embed cells from public or link shared notebooks in other places on the Web.

[00:05:03]
So, for example, what we're looking at here, this little widget here is actually an iframe displaying a live embed of the interactive exercise from the previous project. So I can interact with this just as I could before. This is really the same content as what was in our notebook that we were just looking at.

[00:05:30]
And Observable will generate a little snippet, little HTML snippet or JavaScript or source code for other things like React that you can copy from this little Export menu item, again, three dots. Export there is an Embed Cells option where you can select either parts of your notebook or the entire notebook.

[00:05:54]
And you can decide whether to export that into a little I-frame which again, you can just copy and chuck in a web page or wherever you want, even in another notebook, it turns out. Or you can download some, like basically a little snippet of JavaScript so that you can throw it in whatever vanilla environment you want.

[00:06:15]
And this is going to include the reactive runtime that makes things like the connection between those different cells, between the input cells and the chart work. So that includes the Observable runtime which is open source, and that is going to give you all those code that you need to kind of get that up and running in a different JavaScript environment.

[00:06:38]
And similarly there is also some snippets and instructions for pulling it into React. So again this is to embed cells from Observable into other places. So this assumes that you are starting from an Observable notebook. And if we look at, for example, another notebook like now I've just switched back to our third project here, the API responses one.

[00:07:05]
Unlike my previous one where I didn't have any named cells, you'll see that you have the choice of any named cells that you have in your notebook. And whether those are interactive with view of, or not, with like status codes. You can check just the ones that you're interested in and then it will generate the corresponding snippets of whatever format you like.

[00:07:28]
The other cool thing is that you can actually copy just the URL. And then that gives you essentially a standalone link that goes straight to that iframe with the cells that you've selected. So this is a really handy dandy way. You don't even have to deploy anything. It's already up on Observable so you can just send people to this embed link directly if you want them to see your cool interactive charts to make them jealous of your data skills.

[00:07:59]
So those are some options for working with Observable to share your work and there are links in there to documentation of those different features. All righty, but, there are probably gonna be times where you are not interested in using Observable. Maybe you didn't wanna sign up for an account, totally legit.

[00:08:20]
Or maybe you don't want to have the added overhead of including the Observable runtime in your project. So it is entirely possible to just use Plot as a standalone library. There are instructions in the Plot, GitHub repo about how to install Plot in your project. Essentially, if you're using something in JavaScript land that is packaged up by a bundler, you're gonna be able to install observablehq/plot as a dependency of your project with yarn, with NPM, what have you.

[00:08:59]
You can also import Plot as a ES module. So what I've got here is a little code sandbox which you can check out and mess with on your own. But essentially what I've done is I've included in the project dependencies, I've done the equivalent of doing yarn install, Observable HDQ Plot or NPM, install, Observable HQ Plot.

[00:09:25]
So we've got observablehq/plot as a project dependency, and then I am able to import this capital P plot with all of our mark functions and the dot plot method and all of that stuff, all of the things that we were using in the Observable environment are right there in Plot.

[00:09:48]
And if you notice it's all declarative, right? It's all just method calls with options passed in. So the syntax is gonna be exactly the same, you can copy paste it from what we were doing in Observable into some other environment. The only tricky part is you have to make sure that you can access the data that before Observable was helping us access as those file attachments.

[00:10:11]
So in this case, for example, if I have included my JSON file in my project, I can just import it or maybe I'm fetching data directly from the API or from a database or what have you. Again that's kind of out of scope here but once I've got that data in I can basically use the exact same calls to Plot marks, so, Cell plots etc.

[00:10:37]
In this case we were looking at our project one results here, all of the same stuff, the color, domain and range, all of that is exactly the same literally copy pasted. The only thing we have to think about is that basically this call to plot dot plot. What that returns is the nodes, the sort of tree, the mini sub tree of, in this case, SVG nodes that are generated.

[00:11:02]
So Plot is built on top of D3 and kind of makes the SVG elements that you need to get your pretty visualization. So, what this is doing is essentially returning a DOM node which then we can append to our document wherever we want. So, in this case in my HTML I have a little plot container element that have assigned to be the kind of little bucks that Plot can draw into.

[00:11:27]
And I'm just appending whatever Plot outputs from my calls to the library as the child of that container. So that is one way that you can get your Plot into whatever document you are putting together on the Web. All righty, and so that is in the Vanilla environment where we're framework free.

[00:11:53]
But if you are using a framework like for example React, you can totally still use plot. However, for example React, right? It is called React because it is making the reactivity happen with its own way of touching the DOM. And so generally, when you're using a framework like React, you don't want to be touching the DOM yourself or letting other libraries touch the DOM for you.

[00:12:22]
But in the case of Plot, that's exactly what we want Plot to do. We want it to draw those nodes that we just saw, right? Okay, so what we need to do in React specifically and just throwing this in there as a note for y'all React developers out there, is essentially escape the React World with the use ref Hook.

[00:12:43]
So what this is gonna do is allow us to kind of hook into a particular DOM node that we've set up that is essentially going to be a little safe little place that Plot can draw its chart into. And so what we can do is use a ref Hook to create that node and connect it to whatever plots output is within the call to a use effect.

[00:13:09]
So that we actually let Plot draw its chart as a side effect within our app. And then for any interactivity like for example, our checkboxes, we're gonna have to recreate that in kind of whatever the paradigm of our framework is. In this case, we're gonna recreate it as a React component, which then we can capture in the application state.

[00:13:32]
And watch for any changes to the state of those checkboxes to update the element that we've told Plot to draw into with a new call using the new values. So in this case which checkboxes are clicked for example? So I don't get the convenience of Observables built in reactivity because I'm in a different reactive paradigm, but it's all possible.

[00:13:56]
So this is again another sandbox that shows just a little example of it, really quickly we can take a look at how this is working. So essentially again, I've installed a Plot as a dependency of the project, same deal, I've got my data coming through in a file, in this case it's the log data.

[00:14:16]
And then what I've done here is I've created a little checkboxes component that does the same work as our input start checkbox was doing before. And then these are the three hooks that I'm gonna rely on my trusty friends use refuse effect and use state. So what I've got is I have a component I'm calling it my Plot, you can be more creative and better at naming things than me where I'll pass in the data that I care about.

[00:14:42]
And I can use that to, if I wanna swap out the datasets or do something else with it, I can do that as well. I'm gonna have here I have a similar thing to like all the status codes that I had before. I'm setting up a use ref to kind of designate an element that Plot is going to care about and talk to.

[00:15:00]
And then I'm using use State to track the state of which of these checkboxes are selected. And so then what I have is a little handler function that sets the state when somebody changes the checkboxes, and the magic happens within a call to use Effect. Where I pass in the values that Plot cares about, in this case, it's the data and any of those interactive values that we're using to filter down the data.

[00:15:28]
So in this case, our selected codes, similar to what we had before in observables, reactivity. And then again, I'm just doing exactly the same thing that I was doing before just swapping out a few variable names. So the syntax for Plot is all the same, so what I'm doing is I'm calling Plot and I'm getting those nodes out as, I'm capturing it as this thing I'll call dot plot.

[00:15:50]
And then I am appending that to the current contents of this node that I've set up with use ref. So ref is then the return node from this call to use ref. And all I have to do is remember that each time I redraw this chart, if I'm appending to this current node within the ref that I have set up, I'm gonna keep getting more and more charts.

[00:16:13]
So I have to just remember to remove the old ones if I'm redrawing the chart, when let's say the selected codes changes. So here I'm just returning a little JSX snippet with my with a DIV that is set up hooked in to that use ref Hook, hook took.

[00:16:33]
So this is just a pattern for using Plot reactively in a framework like React. You can hopefully use this to figure out how you would wanna connect it to other frameworks if you're using those. And again, you can totally use it just in Vanilla JavaScript as well, but this is all just to convey that It is all possible.

[00:16:55]
You don't have to use Observable notebooks specifically. If you do, you get the advantage of things like the checkbox, reactivity, etc, all baked in, with all those different inputs that we saw in the Snippets as well. But if you want to use Plot on its own as just a JavaScript library, it is totally doable.

[00:17:16]
And here are a couple of patterns that you can use as a starting point for that. There's more info in the Plot documentation, so you can check out the observablehq/plot GitHub repo to see more options and examples and things like that. There are also some examples around of, again, Plot embedded in React and things like that, and once again you have links to how to do it with Observable too.

[00:17:50]
So that is how to get your plots out of the staging ground and into the wide wide world of the Web out there. If anybody has questions or runs into problems using Plot in other environments than Observable, that is what the open source repo is there for as well.

[00:18:11]
So after going through this workshop, you can also jump in there to see if folks have raised other issues or if you would like to request new examples or additional documentation, things like that. You can hop on to the GitHub repo.