Interactive HTML Improvements in JMP 17 (2022-US-30MP-1162)

John_Powell_JMP

Interactive HTML was introduced in JMP 11, and each succeeding version adds support for more interactive features and improves support for JMP Live . When used alone, Interactive HTML enables users to share JMP reports. JMP Live supports that sharing with collaboration, organization, security, automation, and significantly more interactivity.

This paper explains the new features in JMP 17 Interactive HTML, both when it's used alone and as part of JMP Live.

The journal shown in the presentation contains Example buttons that link to Interactive HTML files hosted on an internal JMP Live server. I've attached a journal formatted similarly to the one shown in the video, but rather than launch files from a JMP Live server, the Example buttons produce JMP reports that can be exported to Interactive HTML or published to JMP Live or JMP Public (when it is upgraded to JMP 17) from JMP 17 to see the improvements in Interactive HTML yourself.

Hi, welcome to this talk.

Interactive HTML is a format for sharing JMP reports and dashboards on the web

with some of JMP's signature interactivity.

It's also the format used in JMP Live and JMP Public.

My name is John Powell, and I'm the Software D evelopment M anager

for the team that puts this feature together for JMP.

With every release of JMP,

we improve and add more of this capability.

In this talk, I'm going to show you

what's new and improved in I nteractive HTML for JMP 17.

Now, I'm not going to cover everything that we've done, just the highlights.

I've organized this into three categories:

new functionality, improved functionality, and improved appearance.

What you're going to see are examples of this on JMP Live.

Let's get started.

I'm going to move this out of the way.

Sorry about that.

Move this out of the way,

because I'm going to be bringing up the browser.

Starting with new functionality.

We've got packed bars,

which is a feature that's been in JMP for a couple of releases now.

I've got an example.

I just need to bring my browser window over here.

Here's my pack bars example in JMP Live.

As you can see, it looks like it would in JMP.

It's got labels,

and it's got the bars that basically are the most important ones in blue,

and all the lesser important ones, or smaller data, are in gray.

It looks like it would in JMP.

It supports a little bit of interactivity,

basically these tool tips that you'll see for each bar,

and even for the gray items as well.

Then you also have some interactivity, which is selections,

and it works with the local data filter.

Right now, I'm sorting...

Or I'm looking at the commodity of corn.

If I want to look at soybean,

I can click on that, and the graph updates .

That's it for pack bars.

Parallel plots [support in Interactive HTML] is brand new in JMP 17.

Here's an example using the Iris data set.

With a parallel plot,

you can drop in different types of variables.

In this case,

we're looking at the dimensions of the petals

and the sepal length and width.

Basically, they're all continuous data, and continuous data is drawn as curves.

We've made this available in JMP Live now and in Interactive HTML.

Basically, it supports selection and tool tips.

There's a tool tip for one of the lines, and this is continuous.

Then, one thing about this particular example

is that it has a common axis.

All the variables are around the same range.

They share an axis.

The next example is using categorical variables.

Here's the Titanic passenger database,

and I've got passenger class, sex, and survived.

When you use categorical variables, they display very differently.

You see these curved sections, and they're also selectable.

You'll notice a little interactivity with the legend.

I'll talk about that a little bit more later.

Now, we also have tool tips in this one.

Passenger class, sex, male.

So on this side,

you would get sex is female, and they survived, yes.

The next example.

This one is actually mixed with categorical and continuous,

the same data set, Titanic passengers,

but I've used some continuous variables on the left here,

and some categorical variables on the right.

They also support selection and tool tips on both sides.

Next, a new functionality is categorical response profilers.

The difference between a categorical response profiler

and a continuous report p rofiler is basically, you'll see multiple curves.

Here's an example.

That's interactive n ow.

This would have been static in J MP 16.

You see these curves are interacting, and there are tool tips as well.

These appear in many different platforms.

That was th e...

Sorry, this is, yes, the ordinal logistic.

The next one is general regression.

Each platform needed some work from my team

in order to get them interactive.

This one shows down at the bottom, and it's the same thing.

It has categorical responses,

and it shows the interactivity and tool tips as well.

I'm not going to do all of them.

Here's one more, P artition.

[ The profiler in ] Partition also is down below.

Here's a categorical profiler.

You'll see it responds as you move one of the variables.

All the other variables respond too.

Now, the next one actually isn't a categorical response profiler,

but I threw it in here because it's a new platform in JMP 17,

Naive Bayes, and it has a profiler in it.

It has also been made interactive in Interactive HTML and on JMP L ive.

The other two that we support are B ootstrap F orest and Boosted T rees.

I'll leave that up to you to try when you get JMP 17.

This, we hope, is going to be an interesting feature for people,

that we can resize graphs now in JMP Live and JMP 17.

One of the first things you might do in JMP,

if somebody sends you a report, and it's not big enough,

is you go to the [ bottom right ] corner and drag it to resize it.

We now support that on the web as well.

That's a distribution example.

Some examples are a little tricky, like this one here.

I'm bringing up a profiler.

What makes that tricky is that there are multiple graphs

that all resize together.

Of course, they stay interactive when they're larger as well.

Let's see, the scatter plot matrix is similar too,

that there are multiple.

I don't know if I mentioned,

but you can also drag on the side to make them bigger.

There you have it.

Of course, these are still interactive with tool tips and so on.

Now, since we did that,

we felt it was necessary to also make it possible to resize panels and dashboards.

Imagine if I took this graph here and I expanded it wider.

Now, it's getting pretty close to the edge.

If I went and did this one,

now we're actually cutting off a little bit of the graph.

We can actually resize the panel to give more room to that one.

We can even shrink these

if we didn't want to show them at the moment,

or to just balance between the two panels.

That's it for new functionality.

I'm going to move on to improved functionality.

I'll just take a drink here.

All right.

Now, the interactive legend, I did show it before,

but I wanted to show that it's happening in more than just one graph.

It's actually all graphs.

I have an example here.

This is back with the Titanic passengers database again.

To show you the interactivity,

basically, if you click on the legend in JMP 17,

you will see the selection in the graph as well.

That's one part of this interactivity.

The other part is that if you click in the graph to make selections,

you'll see that the legend highlights as well.

That's behavior that you would see in JMP.

We tried to get that available on the web as well.

Local data filter has been in Interactive HTML for a while,

but there are a few additions to it, modifications and updates.

Here's an example with the diamonds data set.

As you can see, it's got a pretty busy- looking local data filter here.

You can do lots with it.

I'll stick with this example for a while.

Imagine if you wanted to just limit what you see in terms of the price.

I'm looking at the $4,900- $10,000 diamonds.

Then you go, "Well, maybe I don't really want to do that.

I want to do the inverse."

Now, we have this inverse, that wasn't there in JMP 16,

that when you click on it, the graph will update.

Nothing updates in the local data filter itself.

We used to have a feature in this menu up here that would do that.

It would invert all the settings.

But JMP didn't have that.

We prefer to stick to a model that's closer to what JMP has

and behaves the way JMP does as well.

Another thing that you might see

with a big local data filter like this with lots of options,

every time I click on the setting here, it updates, right?

But what if you want to make a lot of changes?

You probably don't want it updating every single change

that you make in the local data filter.

Now, we've added this auto- update feature.

Now, if we disable it, as you add more settings, nothing changes.

That gives you a chance to make lots of changes.

Maybe I'll even change something down here as well.

Let's just choose Excellent and these V settings,

and I'll leave these sliders where they were.

Now, I'm ready to update.

I hit the update button, and now we've got an updated graph.

You may have noticed, or maybe you didn't,

that there's a bunch of information being added to this URL

every time I change the setting or I updated.

Now, the purpose of that

is so that people can share these settings.

If you actually selected all of this, and there's multiple ways to select.

You might try to double click.

Anyway, once they're all selected, then you can copy it or use Control C.

Then you can put that in an email and send it to somebody.

When they see this graph on JMP Live,

they're going to get the settings that you had,

not the original settings that you published it with.

That's really going to be useful.

Another thing about that is that the saving of settings

is also done for column switchers now too.

This example has a column switcher and a local data filter.

Of course, if I change to lead,

basically, you would see those settings get updated on the top as well.

What's interesting about that is you can grab this URL,

and I like to store it in the comments,

and I've annotated what I stored here saying what the settings are going to do.

This top link is with the column switcher

set to the pollutant equal carbon monoxide,

and the local data filter regions set to California.

I believe west is what the W stands for.

When I click on that,

or if I send that to somebody and they click on it,

it would load the post with this pollution map,

and then it would use those settings and update it right away.

Another thing you could do with that URL

is you can embed it in a journal, like I've done here.

If you look at this side here,

I say I have a link with stored settings with the lead for the column switcher.

The regions are South Texas,

which is different than what you see right now.

When I click on that URL or that link in my journal,

it will do the same.

It loads up this posting, and then it applies the settings.

Isn't that convenient?

All right.

Here's a feature that we added, at publish time,

that you could actually choose

whether you want to have interactivity or performance.

The reason for that is that it takes a lot of data to store in the file

to be able to provide the interactivity.

Sometimes that makes loading slower.

Or if you have a really big data set

and you don't really want to load all the data,

but you want to have it interactive,

well, now you can do that with the performance mode.

All the examples I showed so far had interactivity mode on

so that I can show all the interactivity.

This example I published,

it's the same one that you just saw, but the graph is not interactive.

It's a static image of the graph.

But you also get to interact with that graph

by using the column switcher and local data filter.

This is because JMP L ive rebuilds the graph.

That's it for that section.

I hope you're going to like those improved functionality features.

The final section is things that affect the appearance.

We hadn't really paid attention to your font size settings in JMP

when you exported in the past

because we really wanted to have

unique font sizes across our web offerings.

But now, we wanted to support this.

Basically, this is everywhere in JMP that you can change font sizes.

It was big effort, basically, to go through, find them all,

and then make sure that they came out as you set them before you published.

I've got a few examples,

but definitely not all the places where you can set fonts.

Here's an example.

You may not want to do this,

but I did it in a way that you could see what the font differences are.

In this case, I increased the carat weight title,

but I did not increase the labels for the carat weight.

Down on the X-axis,

I increased the axis label's font size and kept the title at the original size.

Normally, you'd probably do a little bit more,

but this is just for demonstration, so you could see the difference

between the regular size and the increased size.

Here's another example where font size shows up.

Labels and graphs, like in heat maps.

In heat maps, there's a label that you can apply,

and this one has been increased as well.

You can tell it's much larger than the other fonts in this graph.

I've also increased the size

of the title and labels in the legend in this example.

Next up, I've got a tree map that also has labels.

This is back with the diamonds data set again.

This tree map,

we did a little bit more than just font size.

You can see that the labels are made larger,

not in the legend this time.

But the group labels, in JMP 17, they've added the ability

to set background color and the color of the text as well.

We felt that we would want to support that as well

to stick with the customized ability.

Of course, there's many other places where fonts can be customized in JMP.

You could discover that as you get JMP 17, and start customizing font sizes,

and then see them respond in your published files

or shared with exporting to Interactive HTML.

Here's a tabulate example.

There's a new feature in JMP

that allows you to combine columns like cut and clarity.

This is also the diamonds data set.

When you do and use the stack group columns feature,

the items in the cells are basically indented

for the secondary variable.

In this example, I've also increased the titles

of these columns in tabulate,

increased the font size of that, so easier to see and show that

yet another place where this can be customized.

We did some other work customizing tables, supporting the customization of tables,

and this shows up in many different ways.

The first one that I'm going to show you is color- coded cells. In JMP 16, even if color coding is used, we didn't carry that through to the web.

You would have lost the different colors here in the column

that have meaning in this process screening example.

Another place where color coding shows up in cell background colors

is when you do text explorer.

As you see in this graph down here,

there's purple and orange being used for positive and negative sentiment.

They are now supported in the table as well,

not just in the graph.

Of course, font size can also be updated.

I mentioned that we supported customizing font size.

If that's been done in a table like in this one,

where the cells have been increased in size,

that is now respected.

We used to emphasize small p values

when it's small enough to indicate it with just bold font.

But what JMP did was use this color, and numbers support that color,

so we're looking more like JMP.

This final table example will show not cell -color coding,

but the actual text in the cells is color coded for the correlation.

The high correlation,

or positive one correlation here happens to be blue,

and here's negative correlation that's red.

I'm going to use this example for the next feature,

which is, we had themes before, but we've added the dark theme.

The dark theme is good to show with this example,

and I'll show you how you do that in JMP Live.

Let me just switch to dark mode this way.

Now, you can see those colors pop a little bit more with a black background.

I think people will like this, maybe all the time.

Actually, if you like it all the time, y ou can set that as permanent preference in JMP Live,

or set it as a preference when you export.

Here, I'm going to open up just an image of a JMP dialogue,

which is the preferences dialogue.

If you look on the Styles page of the preferences dialogue,

down at the bottom, there's Interactive HTML Themes.

It used to have light and gray.

Now, we have this dark theme as well.

Then, when you publish or export to Interactive HTML,

that theme will be used.

Last but not least, we think this will be really important.

If you zoomed in on graphs [ exported to Interactive HTML ] from JMP 16, they would start to get blurry.

I want to talk about two different types of zooming in here.

In 16, we did have this magnifier.

Let's say I'm zooming in this way.

That hasn't changed.

But what's changed is that this graph here

is at a higher resolution than it used to be.

If you use your browser zoom,

which is usually C ontrol Plus, and zoom in this way,

this is when things would start to get blurry.

But now that we've used double resolution,

you can go pretty high without seeing any blurriness.

We think that will be a good feature.

You don't have to turn it on.

It's just the default that it's going to be a higher resolution.

Make all your graphs look a little bit better.

That's it for the things I have to show.

Like I said, these are just the highlights.

There's so many other things that my team did,

and I'm really proud of the work that they did.

We had a lot of contributors, some of them part time,

some of them full time.

Here's the names of the contributors.

We had Josh Mark wardt, Bryan Fricke, Mayowa Sogbein,

Praveena Panineerkandy, Paul Spychala, and Tommy Odom.

Of course, we'd like to thank all the JMP developers themselves

that do the desktop product to help us figure out

how to share these creations on the web.

We get a lot of help from them.

Of course, we also get a lot of help from our quality assurance team.

I'd like to thank them as well, and anybody else in the JMP team

that helps us make our contribution look good,

Also, the JMP Live team

who hosts our content when we publish to JMP Live.

That's it for my presentation.

I thank you for your interest in this topic,

and I'll see you at the conference.