Interactive Highlighting

Hello everyone. My name is Minshin Pen and I am a developer for visualization in here Warframe. Today I'm going to talk about interactive highlighting. So this is the second stop of this visualization and graphics marathon. In this afternoon and in the central time, I highly recommend you to download the handouts, the notebook that I put in the handout, because this is interactive highlighting. A lot of plots without my mouse interaction, it looks just like a regular plot. You won't see any effects. So it's very helpful if you can download the notebook if you have 13.3 and you can explore the plot with me and see the effects. In this talk I'm going to talk about interactive highlighting which is introduced in version 13.3 and we will look at the framework and the goal is to familiarize you with the framework and provide the reference for customization. If you have already had a version 13.3 and you have tried it out, I believe that you have already discovered that the highlighting is turned on by default. So a lot of plots, especially points and curve plots, have this interactive highlighting behavior. And so we are going to talk about this. So it's turned on by default. But I don't know. Have you tried to make some customization? For example, have you tried to see how to make things like this or like this, or even with crosshair lines with different label appearance or this? So I hope that in the end of this talk that you will have an idea how to do everything you want about this highlighting mechanism. So there are two interfaces that you access, plot highlighting or highlighting. The first one is the option called plot highlighting and it's available for a lot of point and curve visualizations. And you can take advantage of this auto completion menu for the option. And this is a screenshot. I'm going to try to see if I can invoke this in the presentation mode. Oh, there we go. Let me scroll it out and do this again. So the ones that showed up here are just symbols of the highlighted settings you can choose from. By default it is the ball that's enabled so that the one that you see by default is ball and you can choose different kinds. And if you click on this drop down arrow, you can see there's a whole list of different components and different things that you can choose from and even gives you some idea how to customize the styles. And we have to talk about this. So in today's talk. So I'm just going to randomly choose one and this and you can see that this is not a default behavior. Anymore. Right. So the syntax for add in options is besides the string name of the element you add association with some key value. So that's the syntax. Obviously we are going to take a closer look later. The other mechanism is using the wrapper highlighting and it is available for data visualization and functional visualization. And this allows you to specify individual highlighting rather than just applying highlighting to the entire plot. For example, if you say plot highlighting, go to X slice for this plot which has three curves. By default it's going to give you highlight points and labels on all the curves. But what if that I only want to highlight the red curve. So that's how you can use this highlighted wrapper. You just wrap the first curve that you want to highlight and then you will have an individual highlighting just on the curve, the red curve, vice versa. What if like I have a plot highlighting set up for the whole plot and I don't want one of the curves to have the highlight? Then you can use highlighted go to none to disable, for example, then I have a plot highlighting setup the option set up for the whole plot. I said highlighted none for the first curve. So now I only have two highlights among three curves. And this is how probability, plot and some other functions does it by default. Like this example, you know, this reference line doesn't have highlights because it's just reference line. This is basically using the same mechanism that I just mentioned. So the components. So when we were developing the framework, we realized that it was just like a lot of different highlighting behaviors. And instead of assigning just like a lot of new names, we decided to provide the components that you can combine to create appropriate highlights for your unique application. And the components can be broken down into four things. The first thing is style and then point, line and label. I put a steric mark on the style here because this style is different from the key value that you just saw to customize the, you know, the points, the line or the labels. This style is specifically to the mouse over behavior of the curves or the points. So for example, you say plot highlighting, just set the style without like others, you have to have a style string and some option values. This one you just directly put some style and then you can see this curve will automatically have this style that you specified. And the reason I put a steric here is that although it is one of the components, it doesn't really interact with others. Well, because this relies on mouseover and a lot of other components. I mean all of the other components also relies on mouse over behavior. So there's some conflicts with this behavior, with this style and others. So when you have a style put in the highlighting, this is going to interfere with other mechanisms. So. So I just want you to know that when you specify style others because the sharing they are using the same mechanism mouse over it will be disabled. Here I show off this new relatively new directive is called Halloween. That's how you can see that this faded out background. And then the I probably will say the most important mechanism is the point. So like I mentioned, this first wave of plot highlighting implementation solely relies on mouse over behavior. It tracks that where your mouse cursor is. So it's very important to find what you are trying to highlight. So there is always a point in the plot and there are different ways to find the point which or the anchor that in the plot. The first one is we call the indicated point. So it's finding the point closest to the cursor within a radius. And this radius is a preset radius. For example, we can just look at this example directly that when my mouse is in the plot, none of the points is highlighted. But when my point is close to a point, it's highlighted. And so so that's what indicated point is doing, right. And it's when it comes to the plots that have continuous curve even it is a this line plot by default it doesn't do interpolations. You are only getting the points that is from the mesh actually and not necessary to be the data points. It's actually the mesh. So if you have in the this line plot, if you have an interpolation order set to more than one which then you have more mesh points. Then all the mesh points will be highlighted will be subject to highlighting. So if I turn this off and revisit this, you can see even the mesh point is not shown. The interpolated points is not highlighted. And you know if you have noticed that there is actually a halo around the red points and that halo style can be also modified. That's the second value in the list in the function. So like this, okay. The second mechanism is called nearest point. It's going to always find a point as long as your mouse is within the graphics. You see it's going to find the closest point based on Euclidean's distance. So the same thing for the baseline plot. When you in the plot you'll find a point and you will only find one point. And there's something called the X nearest point. It's the same with nearest point. But instead of checking the Euclidean I distance it's only checking on the X direction. So for example, I mean my cursor is closest to this point but it's not highlighting that because on the X directions there are other points that's closer to my cursor and same thing for the multi line. And then you will see that why we think that X nearest point is a very interesting important way for finding points. Because then you get this idea of laser invisible lines within curves. And this mechanism is not just finding one point as you have observed but for single data set it will also find multiple points. As long as you know they share the same values. The X values the same scene, same story on the Y nearest point is just on the Y direction. So I'm not going to spend too much time here. But as you can see, you can find a lot of points depends on nature of the curves. Line, line up basically some auxiliary lines. That's not very crucial but it's just give you. It's just giving you some visual cues where your cursor is at. And also it gives you some lines dropping to the axis or the frame to indicate that where the values are. And so this one is just crosshair. But when my mouse is close enough to a point it will snap to the point. So this is basically the same with indicating point. So any in fact that although there isn't a point showing up, there's always a point. There's always a point in all the mechanism because we need to find the anchor. It's just the mental effect that which mechanism, which point method we are using and you will see what I mean by that later just in a second when there are multi lines it's going to find interpolated points on the curves you see. So it's snapping to the, to the curves. Even though this is this line plot interpolation order does not have anything. But the moment that I show, I show off the mesh you will see my point only snap to. Sorry, my lines only snap to the points. So there are some automations down there. Similarly for the XY drop lines this will only show the drop lines to the axis or frame. When your mouse cursor is close enough to a point. The multi lines the same thing. But when I turn off the mesh it's the same thing. Just like the crosshair it will give you interpolating points. I really encourage you to try this on your own because you can experience this sticky behavior which you know it's important so that your cursor is not on top of the curve blocking the view. All right. Another thing is called the X line, which is just, you know, part of the crosshair, just the vertical lines. And although it doesn't look like it's snapping to a point, it's actually snapping to the X nearest point. And we will see here, right? So the, the X line has a behavior that it will always snap to a point. Even the point is interpolated points. So in this case, even though I turn off the mesh, it still runs continuously because it snapped to the interpolated points. Same story to the white line. It's just on the Y direction. It is snapping to the points in the discipline or in the this plot. And this is the multi line case. And then we have something called the X drop line. It's just like the XY drop lines, but they only drop to the X direction. And this is the multi line case. You see, it goes to the XOR region and if you have frame enabled instead of axis, it will drop to the frame. And this is Y drop line is the same thing. I'm just like, go through this quickly. And the next thing is label. So label is providing a mechanism to add a notation for highlighting point. And you probably have noticed our label looks just like the callout that we already have since probably version 11 or something like that. And so you can take the advantages of all the options that call out provides. For example, here I am having the label that has a call out marker called circle point. So even though I do not have a visible point in my components, it still looks like there is a point that is not from the point, it's actually from the call out marker. So for the labels, the first thing is the XY label which is used by the mechanism that we have turned on by default. And this one, you see, it doesn't highlight the point itself, but it just add the label and it, you know, obviously is using indicated point as the anchor and Right. So by default, when you don't have the mesh turn on, this has the same behavior. Like others, it will give you interpolated points. But the moment you turn this on, I think that I'm not going to get rid of this because I added some. All right, that works. Okay, so see that? Now this flat highlighting only highlights the mesh points. Okay, nextin is the X label. Just like XY label, but instead of XY value, it just gives you X value. Y label gives you just Y value. And then there is XY axis label. So instead of putting labels directly on the highlighted point, we put it on the Axis and when you see when your mouse is close enough to a point which is indicated point, then you will show the values on the XY axis with this blue style which is matching up with the point. However, when your cursor is not in anywhere that you can find a point, it will give you this gray out background on the on the call out label that just indicates that you are not finding a point. Okay, so here is the examples and see, when you are not close enough to any point, there's no color associated with the label. Similar story to the X axis label and Y axis label. Okay, so this is just the same thing. I'm just going to continue to the next slide. We named some popular combinations for convenience and there are four of them. The first one is the ball which is the by default turnaround behavior. Like analysis I mentioned before, the mechanism for finding the polygon point actually changes depends on depending on the nature of the plot. And so if you turn on the mesh and you use indicating point and XY label, then you are actually only finding the mesh points, even though this is what under the hook is using. And the second preset is called drop line. You will give you indicated point plus XY drop lines and the XY label. Okay, and so this is the proof that it is using the same scene. But you know, as you can see here, it jumps because the mesh points, it's actually the ones it is using for indicated point. So the drop lines itself, this preset has some automatic behavior, depends on the plot, so it's not exactly the same. And the next preset is called X slice. This one will give you a vertical line and finding X nearest point plus Y label. And you can see that the label not colliding each other. You know, this is the same technology we use for callout label. And see, this is the same scene. X nearest point, X line, Y label. So this is actually how you can build up your own mechanism. You know, you specify a type of point, a type of line, a type of label. So the X slice for this script plot, even though there is only four points, is still going to give you the interpolated points. So the same story here. So this the example here I want to the point I want to make is that there are points that look very close to each other, like these two points, but this only one point is highlighted because they are actually not close enough to be considered as on the same X line. Same story for the Y slice. This is parametric plot which potentially can have many intersections with X and The Y line. So now you know the components and the presets. Now we can try to customize the highlighting behavior. So the first thing we can do is that we can adjust the presets. So this is the default highlighting behavior. Bow. What if that is the instead of XY labels, I only want the Y label. So you can just add Y label available and then you can have just Y label and the indicated point. So that's how you modify a preset. And you can specify different behavior finding the point, you know, change the look of the label. But when you do these, you know it's already over specified with ball or without bow it's not going to make any difference anymore. Right? Because you know this is over specifying. It's overlapping everything that the ball stands for. Another example for X slice. So this is the default behavior here. I can modify the style of this vertical line within the XL slice so you see the red line. And I can change the label to Y axis label with different rounding areas. So this is a different look. Whether it is useful or not, you know it's your call. Then you have this total freedom to build your own highlighting behavior or look. Like I said, you choose one type of point. So the point, whether you choose it or not, it's always going to be there. It's just visible or not. If you so choose a type of points, then it will show a point and then you can modify the color of it and you can add the line, which is not crucial. But you can add and you can change the style and you can add a label. So that's how this highlighting behavior is created. Okay, now you know dynamic highlighting, I want to talk about static highlighting. So dynamic highlighting enables exploration, but static highlighting helps you with explanations. So when you have set up your, you're satisfied with your visualization and you want to present it to your coworker or publish it, you know you want to highlight static highlight. And how do you do that? So it's very simple. You just add placed wrapper on top of the settings. For example, we add placed on top of this wrapper highlight mechanism that you you want and specify the location. And for example this location which is just a value, this has some auto detection detecting your point method. So this point method is Y nearest point. So it understands this value. Although it's just single value, it means on the Y direction is a Y value. So y equal to 0.1 is going to find all the corresponding X value. Same here. This is the X nearest point. So it knows that you know the value 3 indicates the x equal to 3. But to avoid ambiguity you can use X automatic or automatic Y to specify it just to make sure. And for multiple positions, it's just stacking them together. Yes. So this one you can change to the automatic -7 but you want to be careful that you need an extra list here. Otherwise it can be ambiguous that you are actually specifying as comma y command positions which will be. Which is valid for cases like X crosshair. Right? Same thing for the highlighted, you can use placed inside highlighted like this example. I only highlight the first curve and I want two static highlighting on these two x values. So like I mentioned, this is our first wave of plot highlighting. Currently a lot of points and curves plots have this turn on by default. A lot of derivatives. There must be something that I missed here. For example the step plot. But they are there. And we plan to continue to expand these functionalities with different gestures. So there will be more to come. The bonus here is a mechanism to show how you can customize the callout labels. Here's a reason it doesn't work is because of different appearance. So you can change the gap, you can change the angle, you can change the background color, call out the design leader style and different marker. So all that you can, you know you can design it here and you can totally have your own like color label in the highlight. So that would be the level that will conclude my talk. And I want to brought your attention that how I can have all these different styles and visualizations without adding options that is through this dollar sign plot theme. Not many people are using it, but I really encourage you to use this because I think it's brilliant. So I'm going to look at the Q and A here to see if any questions I have. So someone asked that if can we have similar interactive slides for 3D plus in graphics 3D. Good questions. We are working on to expand this in 3D version as well. This is an uncharted area, so we are doing this carefully. So stay tuned. Is there any other questions I can answer? I will wait for a couple minutes before I end this presentation. Right. Like I said before I wanted. We would really appreciate your feedback on highlighting. No matter it's the interaction part or what kind of highlighting that you are interested to see. These are all the things that we are interested and eager to know from your feedback. Well, thank you. I hope you find this presentation useful. And like I said, the notebook should be handy for you in the future when you want to have your own highlighting look. Well, thank you so much.