From Details on Demand to Wandering Workflows: Getting to know JMP® Hover Label Extensions (2020-US-45MP-607)
Nascif Neto, Principal Software Developer, SAS Institute (JMP Division)
Lisa Grossman, Associate Test Engineer, SAS Institute (JMP division)
The JMP Hover Label extensions introduced in JMP 15 go beyond traditional details-on-demand functionality to enable exciting new possibilities. Until now, hover labels exposed a limited set of information derived from the current graph and the underlying visual element, with limited customization available through the use of label column properties. This presentation shows how the new extensions let users implement not only full hover label content customization but also new exploratory patterns and integration workflows. We will explore the high-level commands that support the effortless visual augmentation of hover labels by means of dynamic data visualization thumbnails, providing the starting point for exploratory workflows known as data drilling or drill down. We will then look into the underlying low-level infrastructure that allows power users to control and refine these new workflows using JMP Scripting Language extension points. We will see examples of "drill out" integrations with external systems as well as how to build an add-in that displays multiple images in a single hover label.
Auto-generated transcript...
Speaker | Transcript |
| Nascif Abousalh-Neto | Hello and welcome. This is a our JMP discovery presentation from details on demand to wandering workflows, getting to know JMP hover label extensions. |
| Before we start on the gory details, we always like to talk about the purpose of a new feature introduced in JMP. | |
| So in this case, we're talking about hover labels extensions. And why do we even have hover labels in the first place. | |
| Well, I always like to go back to the visual information seeking mantra from Ben Shneiderman, which is he tried to synthesize | |
| overview first, zoom and filter, and then details on demand. | |
| Well hover labels are all about details on demand. | |
| So let's say I'm looking at this bar chart on this new data set and in JMP, up to JMP 14, as you hover over a particular bar in your bar chart, it's going to pop up a window with a little bit of textual | |
| data about what you're seeing here. Right. So you have labeled information, calculated values, just text, very simple. Gives you your details on demand. | |
| But what if you could decorate this with visualizations as well. So for example, if you're looking at that aggregated value, you might want to see the distribution of the values that got that particular calculation. | |
| Or you might want to see a breakdown of the values behind the that aggregated value. | |
| This is what we're gonna let you know with this new visualization, with this new feature. | |
| But on top of that, it's the famous, wait, there is more. | |
| This new visualization basically allows you to go on and start the visual exploratory workflow. If you click on it, you can open it up in its own window, which allows you to | |
| which can also have its visualization, which you can also click and get even more detail. And so you go down that technique called the drill down | |
| and eventually, you might get to a point where you're decorating a particular observation with information you're getting from maybe even Wikipedia in that case. | |
| Not going to go into a lot of details. We're going to learn a lot about all that pretty soon. | |
| But first, I also wanted to talk a little bit about the design decisions behind the implementation of this feature. | |
| Because we wanted to have something that was very easy to use that didn't require programming or, you know, lots of time reading the manual | |
| and we knew that would satisfy 80% of the use cases. | |
| But for those 20% of really advanced use cases or for those customers that know their JSL and they just want to push the envelope on what JMP can do, | |
| we also want to make available, something that you could do through programming. But basically, your top of the context of ??? on those visual elements. | |
| So we decided to go with architectural pattern called plumbing and porcelain, and that's something we got to git source code control | |
| application, which is basically you have a layer that is very rich and because it's very rich, very complex, | |
| which gives you access to all that information and allows you to customize things that are going to happen as far as generating the visualization or what happens when you click on that visualization | |
| And on top of that, we built a layer that is more limited, its purpose driven, but it's very, very easy to do and requires no coding at all. So that's the porcelain layer. And that's the one that Lisa is going to be talking about now. | |
| Up to you. Lisa. | |
| I'm going to stop sharing and Lisa is going to take over. | |
| Lisa Grossman | Okay so we are going to take a high level look at some of the features and what kind of customization system, make the graphic ??? |
| So, let us first go through some of the basics. So by default when you hover over a data point or an element in your graph. | |
| you see information displayed for the X and Y roles used in the graph, as well as any drop down roles such as overlay and if you choose to manually manually label a column in the data table, that will also appear as a hover label. | |
| So here we have an example of a label, the expression column tha contains an image. And so we can see that image is then populated in hover label in the back. | |
| And to add a graphlet to your hover label, you have the option of selecting some predefined graphlet presets, which you can access via the right mouse menu under hover label. | |
| Now these presets have dynamic graph role assignments and derive their roles from variables used in your graph. | |
| And presets are also preconfigured to be recursive and that will support drilling down. | |
| And for preset graphlets that have categorical columns, you can specify which columns to filter by, by using the next in hierarchy column property that's in your data table. And so now I'm going to demo real quick how to make a graphlet preset. | |
| So I'm going to bring up our penguins data table that we're going to be using. And I'm going to open up Graph Builder. | |
| And I'm going to make a bar chart here. | |
| And then right clicking under hover label, you can see that there is a list of different presets to choose from, but we're going to use histogram for this example. | |
| So now that we have set our preset, if you hover over a bar, now you can see that there's a histogram preset that pops up in your hover label. And it's also... | |
| it is also filtered based on our bar here, which is the island Biscoe. | |
| And the great thing about graphlets is if I hover over this bar, I can see another graphlet. And so now you can easily compare these two graphlets to see the distribution of bill lengths for both the islands Dream and Biscoe. | |
| And then you can take it a step further and click on the thumbnail of the graphlet and it will launch a Graph Builder instance in its own window and it's totally | |
| interactive so you can open up the control panel of Graph Builder and | |
| and customize this graph further. And then as you can see, there's a local data filter already applied to this graph, and it is filtered by Biscoe, which is the thumbnail I launched. So, that is how the graphlets are filtered by. | |
| And then one last thing is that if I hover over these these histogram bars, you can see that the histogram graphlet continues on, so that shows how these graphlet presets are pre configured to be recursive. | |
| So closing these and returning back to our PowerPoint. | |
| So I only showed the example of the histogram preset but there are a number that you can go and play with. | |
| So these graphlet presets help us answer the question of what is behind an aggregated visual element. So the scatter plot preset shows you the exact values, whereas | |
| the histogram, box plot or heat map presets will show you a distribution of your values. | |
| And if you wanted to break down your graph and look at your graph with another category, then you might be interested in using a bar, pie, tree map, or a line preset. And if you'd like to examine your raw data of the table, then you can use the tabulate preset. | |
| But if you'd like to further customize your graphlet, you do have the option to do so with paste graphlets. | |
| And so paste graphlet, you can easily achieve with three easy steps. So you would first build a graph that you want to use as a graphlet. And we do want to note here that it does not have to be one built from Graph Builder. | |
| And then from the little red triangle menu, you can save the script of the graph to your clipboard. | |
| And then returning to your base graph or top graph, you can right click and under hover label, there will be a paste graphlet option. And that's really all there is to it. | |
| And we want to also note that paste graphlet will have static role assignments and will not be recursive since you are creating these graph lets to drill down one level at a time. | |
| But if you'd like to create a visualization with multiple drill downs, then you can, you have the option to do so by nesting paste graphlet operations together, starting from the bottom layer going up to your top or base later. | |
| So, and this is what we would consider our Russian doll example, and I can demo how you can achieve that. | |
| So we'll pull up our penguins data table again. And we'll start with the Graph Builder and we'll we're going to start building our very top layer for this. So let's go ahead build that bar chart. | |
| And then let's go on to build our very second...our second layer. So let's do a pie with species. | |
| And then for our very last layer, | |
| let's do a scatter plot. | |
| OK, so now I have all three layers | |
| of our...of what we will use to nest and so I will go and save the script of the scatter plot to my clipboard. | |
| And then on the pie, I right click and paste graphlet. And so now when you hover, you can see that the scatter plot is in there and it is filtered by the species in this pie. | |
| So I'm going to close this just for clarity and now we can go ahead and do the same thing to the pie, save the script, because it already has the scatter plot embedded. So save that to our clipboard, go over to our bar, do the same thing to paste graphlet. | |
| And now we have... | |
| we have a workflow that is... | |
| that you can | |
| click and hover over and you can see all three layers that pop up when you're hovering over this bar. So that's how you would do your nested paste graphlets. | |
| And so we do want to point out that there are some JMP analytical platforms that already have pre integrated graphlets available. | |
| So these platforms include the functional data explorer, process screening, principal components, and multivariate control charts, and process capabilities. And we want to go ahead and quickly show you an example using the principal components. | |
| Lost my mouse. There we go. So I launch | |
| our table again | |
| and open up principal components. | |
| And let's do run this analysis. | |
| And if I open up the outlier analysis and hover over one of these points, boom, I can see that these graphlets are already embedded into this platform. So we highly suggest that you go and take a look at these platforms and play around with it and see what you like. | |
| And so that was a brief overview of some quick customizations you can do with hover label graphlets and I'm going to pass this presentation back to Nascif so he can move you through the plumbing that goes behind all of these features. | |
| Nascif Abousalh-Neto | Thank you, Lisa. Okay, let's go back to my screen here. |
| And we... | |
| I think I'll just go very quickly over her slides and we're back to plumbing, and, oh my god, what is that? This | |
| is the ugly stuff that's under the sink. But that's where you have all the tubing and you can make things really rock, and let me show them | |
| by giving a quick demo as well. | |
| So here | |
| Lisa was showing you the the histogram... | |
| the hover label presets that you have available, but you can also click here and launch the hover label editor and this is the guy where you have access | |
| to your JSL extension points, which is where you make, which is | |
| how those visualizations are created. | |
| Basically what happens is that when you hover over, JMP is gone to evaluate the JSL block and capture that as an in a thumbnail and put that thumbnail inside your hover label. That's pretty much, in a nutshell, how it goes. | |
| And the presets that you also have available here in the hover label, right, they basically are called generators. So if I click here on my preset and I go all the way down, you can see that it's generating the Graph Builder using the histogram element. | |
| That's how it does its trick. | |
| Click is a script that is gonna react to when you click on that thumbnail, but by default (and usually people stick with the default), if you don't have anything here, | |
| it's just, just gonna launch this on its own window, instead of capturing and scale down a little image. In here on the left you can see two other extension points we haven't really talked much about yet. | |
| But we will very soon. So I don't want to get ahead of myself. | |
| So, | |
| So let's talk about those extension points. So we created not just one but three extension points in JMP 15. | |
| And they are, they're going to allow you to edit and do different functionality to different areas of your hover label. | |
| So textlets, right, so let's say for example you wanted to give a presentation after you do your analysis, but you want to use the result of that analysis and present it to an executive in your company or | |
| maybe we've an end customer that wants a little bit more of detail in in a way that they can read, but you would like make that more distinct. | |
| So textlet allows you to do that. But since you're interfacing with data, you also want that to be not a fixed block of text, but something that's dynamic that's based on the data you're hovering over. | |
| So to define a textlet, you go back to that hover label editor and you can define JSL variables or not. But if you want it to be dynamic, typically, what you do is you define a variable that's going to have the content that you want to display. | |
| And then you're going to decorate that value using HTML notation. So, here is how you can select the font, you can select background colors, foreground colors, you can make it italic, and basically make it as pretty or rich of text as you as you need to. | |
| Then the next hover labelextension is the one we call gridlet. And if you remember the original or the current | |
| JMP hover label, it's basically a grid of name value pairs. To the left, you have names of your...that would be the equivalent to your column name, and to the right, you have the values which might be just a column cell for a particular row if it's a marked plot. | |
| But if it's aggregated like a bar chart, this is going to be a mean or an average medium, something like that. | |
| The default content from here, like Lisa said before, is derived at both from the...originally is derived both from whatever labeled columns you have in your data table | |
| and also, whatever role assignments you have in your graph. So if it's a bar chart, you have your x, you have your y. | |
| You might have an overlay variable and everything that in at some point contributes to the creation of that visual element. | |
| Well with gridlets you can now have pretty much total control of that little display. You can remove entries. It's very common that sometimes people don't want to see the very first row, which has the labeles or the number of rows. Some people find that | |
| redundant. They can take it out. | |
| You can add something that is completely under your control. Basically it's going to evaluate the JSL script to figure out what you want to display there. | |
| One use case I found was when someone wanted an aggregated value for a column that was not individualization. Some people call those things hidden columns or hidden calculations. | |
| Now you can do that, right, and have an aggregation for the same rows that the rest of that that are being displayed on that visualization. | |
| You can rename. We usually add the summary statistic to the left of anything that comes from a y calculated column. If you don't like that, now you can remove it or replace it with something else. And | |
| as well...and then you can do details like changing the numeric precision or make text bold or italics or red or... | |
| even for example, you can make it red and bold, if the value is above a particular threshold. So you can have something that, as I move over here, if the value is over the average of my data I make it red and bold so I can call attention to that. And that will be automatic for you. | |
| And finally, graphlets. We believe that's going to be the most useful and used one. | |
| Certainly don't want that to cause more attention because you have a whole image inside your tool tip and we've been seeing examples with data visualizations, | |
| but it's an image. So it can be a picture as well. It can be something you're downloading from the internet | |
| on the fly by making a web call. That's how I got the image of this little penguin. It's coming straight from Wikipedia. As you hover over, we download it, scale it and and put it here. Or you can, for example, that's a very recent use case, someone had a database of pictures | |
| in the laboratory and they have pictures of the samples they were analyzing and they didn't want to put them on the data table because the data table would be too large. | |
| Well, now you can just get a column, turn that column into a file name, read from the file name, and boom, display that inside your tool tip. So when you're doing your analysis, you know, exactly, exactly what you're looking at. | |
| And just like graph...gridlets, we're talking about clickable content. So again, for example, if I wanted and I showed that when I click on this little | |
| thumbnail here, I can open a web page. So you can imagine that even as a way to integrate back with your company. Let's say you have | |
| web services that they're supported in your company, and you want to, at some point, maybe click on an image to make a call to kind of register or capture some data. | |
| Go talking for a web call to that web service. Now that's something you can do. So I like to call, we talk about drill in and drill down, that would be a drill out. That's basically JMP talking to the outside world using data content from your exploration. | |
| So let's look at those things in the little bit more detail. So those those visualizations that we see here inside the hover label, they are basically... | |
| that's applied to any visualization. Actually it's a combination of a graph destination and the data subset. So in the Graph Builder, for example, you'll say, I want the bar chart of islands by on my x | |
| axis and on my y axis, I want to show the average of the body mass of the penguins on that island. Fine. | |
| How do you translate that to a graphlet, right? Well, basically when you select the preset or when you write in your code if you want to do it, but the preset is going to is going to use | |
| our graph template. So basically, some of the things are going to be predefined like that. | |
| The bar element, although if you're writing it your own, you could even say I want to change my visualization depending on my context. That's totally possible. | |
| And you're going to fill that template with a graph roles and values and table data, table metadata. So, for example, | |
| let's say I have a preset of doing that categorical drill down. I know it's going to be a bar chart. | |
| I don't know what a bar chart is going to be, what's going to be on my y or my x axis. That's going to come from the current state of my baseline graph, for example, I'm looking at island. | |
| So I know I want to do a bar chart of another category. So that's when the next in hierarchy and | |
| the next column comes into play. I'm making that decision on the fly, based on the information that user is giving me and the graph that's being used. | |
| For example, if you look here at the histogram, it was a bar chart of island by body mass. | |
| This is a histogram of body mass as well. If I come here to the graph and change this column and then I go back and hover, this guy is going to reflect my new choice. That's this idea of getting my context and having a dynamic graph. | |
| The other part of the definition of visualization is the data subset. And we have a very similar pattern, right. We have...LDF is local data filter. | |
| So that's a feature that we already had in JMP, of course, right. And basically, I have a template that is filled out from my graph roles here. It's like if it was a bar chart, | |
| which means my x variable is going to be a grouping variable of island. I know I wanted to have a local data filter of island and that I want to select this particular value so that it matches the value I was hovering over. | |
| This happens both when you're creating the hover label and when you're launching the hover label, | |
| but when you create a hover label, this is invisible. We basically create a hidden window to capture that window so you'll never see that guy. But when you launch it, | |
| the local data filter is there and as Lisa has shown, you can interact with it and even make changes to that so that you can progress your | |
| your, your visual exploration on your own terms. | |
| So I've been talking about context, a lot. This is actually something that you should need to develop your own graphlets, you need to be familiar with. | |
| We call that hover label execution context. You're going to have information about that in our documentation and it's basically if you remember JSL, it's a local block. | |
| We've lots of local variables that we defined for you and those those variables capture all kinds of information that might be useful | |
| for someone to find in the graphlet or a gridlet or a textlet. It's available for all of those extension points. So typically, they're going to be variables that start with a nonpercent... | |
| Not a nonpercent...I'm sorry. | |
| To prevent collisions with your data table column names, so it's kinda like reserved names in a way. | |
| But basically, you'll see here that that's that's code that comes from one of our precepts. By the way, that code is available to you through the hover label editor, so you can study and see how it goes. Here we're trying to find a new column. | |
| To using our new graph, it's that idea of it being dynamic and to be reactive to the context. And this function is going to look into the data table for that metadata. | |
| My...a list of measurement columns. So if the baseline is looking at body mass, body mass is going to be here in this value and at a list of my groupings. So if it was a bar chart of island by body mass, we're going to have islands here. So those are lists of column names. | |
| And then we also have any of numeric values, anything that's calculated is going to be available to you. Maybe you want to, like I said, maybe you want to make a logical decision | |
| based on the value being above or below the threshold so that you can color a particular line red or make it bold, right. You're going to use values that we provide to you. | |
| We also provide something that allow you to go back to the data. In fact, to the data table and fetch data by yourself like the | |
| row index of the first row on the list of roles that your visual element discovering, that's available to you as well. | |
| And then the other even more data, like for example the where clause that corresponds to that local data filter that you're executing in the context of. | |
| And the drill depth, let's say, that allows you to keep track of how many times you have gone on that thumbnail and open a new visualization and so on. | |
| So for example, when we're talking about recursive visualizations, every recursion needs an exit condition, right. | |
| So here, for example, is how you calculate the exit condition of one of your presets. If I don't have anything more to to show, | |
| I return empty, means no visualization. Or if I don't have...if I only show you one value, right, or any of my drill depth | |
| is greater than one, meaning I was drilling until I got to a point where just only one value to show in some visualizations doesn't make sense. So I can return empty as well. | |
| That's just an example of the kinds of decisions that you can make your code using the hover label execution context. | |
| Now, I just wanted to kind of gives you a visual representation of how all those things come together again using the preset example. When you're selecting a preset, | |
| you're basically selecting the graph template, which is going to have roles that are going to be fulfilled from the graph roles that are in your hover label execution context. | |
| And so that's your data, your graph definition. And that date graph definition is going to be combined with the subset of observations | |
| resulting from the, the local data filter that was also created for you behind the scenes, based on the visual element you're hovering over. | |
| So when you put those things together, you have a hover label, we have a graphlet inside. And if you click on that graphlet, | |
| it launches that same definition in here and it makes the, the local data filter feasible as well. When, like Lisa was saying, this is a fully featured life visualization, not just an image, you can make changes to this guy to continue your exploration. | |
| So now we're talking, you should think in terms of, okay, now I have a feature that creates visualizations for me and allow me to create one visualization from another. I'm basically creating a visual workflow. | |
| And it's kind of like I have a Google Assistant or an Alexa in JMP, in the sense that I can...JMP is | |
| making me go faster by creating, doing visualizations on my behalf. And they might be, also they might be not, just an exploration, right. If you're happy with them, they just keep going. If you're not happy with them, you have two choices and maybe it's easier if I just show it to you. | |
| So like I was saying, I come here, I select a preset. Let's say I'm going to get a categoric one bar chart. | |
| So that gives me a breakdown on the next level. Right. And if I'm happy with that, | |
| that's great. Maybe I can launch this guy. Maybe I can learn to, whoops... | |
| Maybe I can launch another one for this feature. At the pie charts, they're more colorful. I think they look better in that particular case. But see, now I can even do things like comparing those two bar charts side by side. | |
| And let's...but let's say that if I keep doing that and it isn't a busy chart and I keep creating visualizations, | |
| I might end up with lots of windows, right. So that's why we created some modifiers to...(you're not supposed to do that, my friend.) | |
| You can just click. That's the default action, it will just open another window. | |
| If you alt-click, it launches on the previous last window. And if you control-click it launches in place. What do I mean by that? | |
| So, | |
| I open this window and I launched to this this graphlet and then I launched to this graphlet. So let's say this is Dream and Biscoe and Dream and Biscoe. Now I want to look at Torgersen as well. Right. And I want to open it. But if I just click it opens on its own window. If I alt-click, | |
| (Oh, because that's the last one. I hope. I'm sorry. So let me close this one.) | |
| Now if I go back here in I alt-click on this guy. See, it replaced the content of the last window I had open. So this way I can still compare with visualizations, which I think it's a very important | |
| scenario. It's a very important usage of this kind of visual workflow. Right. But I can kind of keep things under control. And I don't just have to keep opening window after window. And the maximum, the real top window management feature is if I do a control-click | |
| because it replaces the window. And then, then it's a really a real drill down. I'm just going | |
| on the same window down and down and now it's like okay, but what if I want to come back. Or if you want to come back and just undo. | |
| So you can explore with no fear, not going to lose anything. Even better though, even the windows you launch, | |
| they have the baseline graph built in on the bottom of the undo stack. So I can come here and do an undo and I go back to the visualizations that were here before. | |
| So I can drill down, come back, branch, you can do all kinds of stuff. And let's remember, that was just with one preset. Let's do something kind of crazy here. We've been talking, we've been looking at very simple visualizations. | |
| But this whole idea actually works for pretty much any platform in JMP. So let's say I want to do a fit of x by y. | |
| And I want to figure out | |
| how...now, I'm starting to do real analytics. How those guys fit within the selection of the species. Right. | |
| So I have this nice graph here. So I'm going to do that paste graphlet trick and save it to the clipboard. | |
| And I'm going to paste it to the graphlet now. So as you can see, we can use that same idea of creating a context | |
| and apply that to my, to my analysis as well. And again, I can click on those guys here and it's going to launch the platform. | |
| As long as the platform supports local data filters, (I should have given this ???), this approach works as well. So it's for visualizations but in...since in JMP, we have this spectrum where the analytics also have a visual component, so works with our analytics as well. | |
| And | |
| I also wanted to show here | |
| on that drill down. This is my | |
| ??? script. So I have the drill down with presets all the way, | |
| and I just wanted to go to the the bottom one | |
| where I had the one that I decorated with this little cute penguin. | |
| But what I wanted to show you is actually back on the hover label editor. | |
| Basically what I'm doing here, I'm reading a small JSL library that I created. I'm going to talk about that soon, right, and now I can use this logic to go and fetch visualizations. In this case I'm fetching it from Wikipedia using a web call. | |
| And that visualization comes in and is displayed on my visualization. It's a model dialogue. | |
| But also my click script is a little bit different. It's not just launching the guy; it's making a call to this web functionality after getting a URL, using that same library as well. So what exactly is it going to do? | |
| So when I click on the guy, it opens a web page with a URL derived from data from my visualization and this can be pretty much anything JSL can do. | |
| I just want to give us an example of how this also enables you integration with other systems, even outside of JMP. Maybe I want to start a new process. I don't know. | |
| All kinds of possibilities. | |
| That | |
| I apologize. So | |
| So there are two customized...advanced customization examples, I should say, that illustrate how you can use graphlets as a an extensible framework. They're both on the JMP Community, you can click here if you get the slides, but | |
| one is called the label viewer. | |
| I am sorry. | |
| And basically what it does is that when you hover over a particular aggregated graph, it finds all the images on the graph...on the data table associated with those rows and creates one image. | |
| And that's something customers have asked for a while. I don't want to see just one guy. I want to see if you have more of them, all of them. Or, if possible, right. So when you actually use this extension, | |
| and you click on...actually no, I don't have it installed so... | |
| And the wiki reader, which was the other one, | |
| is the one I just showed to you. Bbut was what I was saying is that | |
| when you click and launch this particular...on this particular image, it launches a small application that allows you to page through the different images | |
| in your data table and you have a filter that you can control and all that. This is one that was completely done in JSL on top of this framework. | |
| So just to close up, | |
| what did we learn today? I hope that you found that it's now very easy to add visualizations, you can visualize your visualizations, if you will. | |
| It's very easy to add those data visualization extensions using the porcelain features. You actually have not just richer detail on your thumbnails, but you have a new exploratory visual workflow, | |
| which you can customize to meet your needs by using either paste graphlet, if you want to have something easy to do, or you can even use JSL using the hover label editor. | |
| We're both very curious to see what you've...how you guys are going to use that in the field. So if you come with some interesting examples, please call us back. Send us a screenshot in the JMP Community and let us know. | |
| That's all we have today. Thank you very much. And when we give this presentation, we're going to be here for Q&A. So, thank you. |
