Adding Tooltips

[00:00:00]
>> For our last exercise, we were trying to add custom tooltips. So let us take a look in the Hints button. If we expand that, we can see the syntax for passing in a custom function to one of these channels. And this will work for all kinds of different channels, but it's especially used for, I think, for these text based ones like title.

[00:00:25]
So here, we can see that if we specify just a little JavaScript arrow function, this is a quick easy way to write this in line. You could also imagine, for example, elsewhere you've defined a complex function that you want to then be passing in. That would also be fine.

[00:00:42]
But in this case, we're gonna have a pretty quick little function. So an arrow function is a great choice. So commas, so this was my solution, yours might look different, was to pass in a function. And you'll see this convention of kind of naming the input to these little functions that take in data points from the data set, naming d for datum, or data point, what have you.

[00:01:12]
But this is arbitrary. You could name it job, you could name it row, you could name it my friend the data, whatever you want. So in this case, I am taking in each data point d, and then returning a string template literal. You could also be having a string concatenated together with plus, or you could be map joining an array of values, or what have you.

[00:01:39]
I'm a big fan of these template literals, so between these backticks, having kind of a little string template where then we can insert variables using this dollar sign curly braces syntax. And so here, I've just made a kind of verbose string of saying the conclusion status after however long minutes, and where I'm taking the minutes value, and kind of cutting it a little bit to two places.

[00:02:11]
So if I Shift+Enter here, and if our tooltips are not bugging us here, it's very small. But now I can see it says cancelled after 3.10 minutes, or failure after 3.35 minutes, etc. If y'all had other solutions, we'd love to see them. Feel free to drop those functions in the chat.

[00:02:34]
And I think a couple of folks were having a little difficulty with those tooltips. We might have run into some kind of bug and plot, it's entirely possible. So I will try and collect more data there. And again, plot is open source. So if you do ever run into any problems with it, you can go to the GitHub repo github.com/observablehq/plot and file those.

[00:02:56]
Or maybe look out at the existing issues and see if anybody else has already reported it. But at this point, we should have a pretty useful chart. We've got all kinds of useful questions answered by this chart. We have which jobs ran in which run number answered. We have what was their conclusion status just answered with a little bit of redundancy, which can be helpful here in both the fill and the stroke encoding.

[00:03:25]
And we have how long did each test take to complete, answered by the opacity. Then we have also what are the details of each test job run? In this case, in my solution, the completion, and then the duration abbreviated in our tooltips. So we also have a little bit of interactivity already happening, where if I am interested in a particular entry, I can hover over it and get some more details.

[00:03:55]
So questions so far? And at the bottom of this worksheet, you'll see my finished solution, just for reference. It's basically the same as what you'll find in the solution, copy, paste. But that is just for reference. In case yours looks slightly different, that's totally okay. Anybody got questions at the moment?

[00:04:19]
>> Yeah, I have a quick question just about the title option. Is that just for creating tooltips? Or are there other effects that we can cause to that sell on a hover?
>> Are there other interactions that we could code into this? Yeah, so for plot, the simplicity that plot tries to offer is for it to be flexible enough that you can create custom visualizations like this, but high level enough that you don't have to spend a lot of time.

[00:04:52]
I mean, as we can see, we ran through this. We were going a little bit slowly cuz we're learning. But we ran through this a few lines of code, we got our very custom visualization. So the interactivity options with plot are a little bit more limited than something like D3, which, for example, is built to make incredibly customized interactions.

[00:05:11]
So there are more options for building interactivity into plot. For example, you can have certain state changes on mouse over, and things like that. But if you really want to get some super fancy animations, or other kinds of intricate interactions going on, you're probably gonna wanna drop down to a lower level library that gives you even more flexibility with customizing that.

[00:05:41]
And D3 would kind of be the logical next step from there. But you can also check out the plot documentation, which is linked from these materials. But it's also on the GitHub repo, so github.com/observablehq/plot has all of the API documentation, so you can see what all the options are there.

[00:06:00]
But again, if you're trying to make something really cool with confetti going off when you hover over a certain thing, or what have you, you're gonna want a more low level flexible library that supports all kinds of fancy animations and interactions like D3. And again, Shirley Wu has some great courses on Frontend Masters that are an excellent kind of segue after this first steps course.

[00:06:22]
So just to recap what we have covered so far is some of the basic building blocks of visualizations in general, according to the grammar of graphics, and their implementation in plot, specifically. So we've covered marks. And in particular, we started looking at this cell mark in the subsequent exercises that we're gonna do in our next two projects.

[00:06:45]
We're going to take a look at a few different marks as well. But we saw how we can configure marks with these options objects that map channels, encoding channels in the visualization. So this output in the visual space to inputs or properties of the data set in the data space.

[00:07:08]
And how we can even customize those, we saw we can put in constant values if we want a channel to always have the same value coming out, we saw that earlier. And we can also put in custom functions if we have something that's a little more complicated than a one to one mapping from data features to channel properties.

[00:07:31]
And we also saw how to use scales in plot. So in this case, we manipulated the color scale, and the other scales like x, for example, we can also customize here. For example, we were rotating the ticks on the x-axis with this custom property. But we saw that with these scales, we can configure the domain and range of these scaling functions for a particular channel, or in this case, group of channels.

[00:07:57]
Because the color scale applies to both the fill and stroke channels, as we saw. To customize the domain of input values and the range of output values in the visual space that these scales are using to make that conversion from data values to properties of the visualization. So these are the concepts that we've covered in this project.

[00:08:25]
And in the next project, we're gonna take a look also at some aggregation operations, some transforms that help us aggregate data and group it together. And also, we're gonna look at faceting, so splitting plots up into smaller, multiple charts that are gonna help us get a more instant picture of certain subsets of the data.