Subscribe Bookmark
John_Powell_JMP

Joined:

May 30, 2014

Interactive HTML Bubble Plot platform in JMP 12

The Interactive HTML Bubble Plot output is new to the latest version of JMP. It is meant to replace and improve upon the interactive output provided by the Flash (SWF) export facility in previous versions of JMP. If you are unfamiliar with the Bubble Plot platform, the Essential Graphing  guide in the JMP Documentation provides details on how to use this platform.

Here are a few pictures of Interactive HTML Bubble Plot examples running in a browser:

BPElection
BPFlu
BPCrime
Hurricanes Bubble Plot

But to really appreciate the platform, you need to interact with it. So, please try out some web-based Bubble Plot platforms to see for yourself.

If you already have JMP 12 and want to share your bubble plots with someone who doesn't have JMP, or just want to interact with them yourself using an iPad or Android tablet, all you need to do is save as Interactive HTML. Once you open the file in a browser, you can interact with it as follows:

Interacting with bubbles within the plot area

Selection, brushing, tooltips, and moving the time label are all provided in the Interactive HTML Bubble Plot. The toolbar provides modes to make it possible to extend selections in a mobile-friendly way where users don't have Ctrl and Shift keys.

JMPHTML5Toggle

Selecting bubbles

Click on a bubble to select it. Ctrl-Click on another bubble to add to the selection or click the third button from the left (shown under cursor in the image above) before clicking on other bubbles. Tooltips will appear, providing information about the selection. Selected bubbles will also appear brighter than unselected bubbles and may display differently during animation according to the “Trail Lines” and “Trail Bubbles” settings found in the Bubble Plot Platform menu.

[iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/64QrnnQksdQ" frameborder="0" allowfullscreen]



Brushing bubbles

Click on the button to the left of the help button, then click in the bubble plot and drag out a rectangle to select bubbles touched by the rectangle. Click within the rectangle and drag to move the rectangle to touch and select other bubbles. To add to the selected bubbles while dragging the rectangle, hold down the Ctrl key or click on the third button from the left (if it’s not already depressed) before dragging the rectangle (“brushing”).

[iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/aALPW3u_nXY" frameborder="0" allowfullscreen]



Tooltips

On a desktop browser, they behave as usual. On mobile devices, tap a bubble to display the tooltip.

Time Label

In dynamic bubble plots, where a Time role is assigned, a time label will appear in the plot. Drag the time label within the plot to prevent it from obscuring bubbles or hide the time label by disabling the "Show Time Label" menu item.

[iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/We0QLuhdYtc" frameborder="0" allowfullscreen]



Controls under the plot area

Several controls appear under the plot area that control animation, bubble size, and the splitting/combining of bubble groups.

BPControls

They have been styled to be easier to use on mobile devices and behave the way they do in the desktop version. The first slider controls time and is named by the column associated with the Time role.

  • Tap or click the slider track to jump forward or backward in time.
  • Drag the slider's thumb to advance or rewind.
  • The "Speed" slider controls the animation speed when you press the "Play" button.

    • Tap or click the slider track to quickly increase or decrease the animation speed.
    • Drag the slider's thumb to increase or decrease the animation speed gradually.
    • The "Bubble Size" slider controls the size of the bubbles.

      • Tap or click the slider track to quickly increase or decrease the bubble size.
      • Drag the slider's thumb to increase or decrease the bubble size gradually.
      • Click or tap the "Back" button backButton to step the animation backward.

        Click or tap the "Step" button stepButton to step the animation forward.

        Click or tap the "Play" button playButton to start the animation. The "Pause" button pauseButton will appear to allow you to pause the animation.

        Click or tap the "Split" button to split the selected bubbles.

        Click or tap the "Combine" button to combine selected bubbles.

        Here are some examples of the controls in action:

        Animation

        [iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/czmtlhklxew" frameborder="0" allowfullscreen]



        Split and combine

        [iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/XAGg_uoYKSo" frameborder="0" allowfullscreen]



        As in the desktop version, the controls only appear when they apply, as described in the following table:

        pauseButton

        Animation Controls
        Slider or Button
        Description
        Visibility
        <Time variable>
        Controls which time values appear in the bubble plot. You manually drag the slider to see a progression of time. Click and drag on the time variable in the bubble plot to move its position.
        Only appears if you have specified a variable for Time.
        Speed
        Adjusts the speed of the animation.
        Only appears if you have specified a variable for Time.
        Bubble Size
        Adjusts the size of the bubbles. The bubbles maintain their relative size, but their absolute size can be adjusted.
        Appears on all bubble plots.
        backButton
        Adjusts the time value by one unit and shows the previous time value.
        Only appears if you have specified a variable for Time.
        playButton
        Press play to animate the bubble plot. Moves through all of the time values in order, and loops back to the beginning when the last time period is reached. Press pause to stop the animation.
        Only appears if you have specified a variable for Time.
        stepButton
        Adjusts the time value by one unit and shows the next time value.
        Only appears if you have specified a variable for Time.
        Split
        Splits selected bubbles.
        Only appears if you have specified two ID variables.
        Combine
        Combines selected bubbles.
        Only appears if you have specified two ID variables.

        Menu interface

        The interactive HTML bubble plot menu provides items that control the display of bubbles, labels, trails, and how roles are aggregated.

        MenuButton

        Use the "Draw" menu to select whether bubbles are filled, outlined, or both.

        Use the "Label" menu to select whether labels are shown on all bubbles, selected bubbles, or none.

        Use the "Trail Bubbles" menu to select whether all bubbles, selected bubbles, or no bubbles leave trailing bubbles as they animate over time.

        Use the "Trail Lines" menu to select whether all bubbles, selected bubbles, or no bubbles leave trailing lines as they animate over time.

        Use "Show Time Label" to Show or hide the time label.

        Use the "Aggregate" menu to select whether X, Y, Color, or Size roles represent sums or mean values.

        Use "Select All" to select all bubbles.

        Here are some examples using the menu:

        Line Trails

        [iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/tNzeb5AZn5k" frameborder="0" allowfullscreen]



        Bubble Trails

        [iframe title="YouTube video player" width="560" height="315" src="http://www.youtube.com/embed/IrfG1v3VOGY" frameborder="0" allowfullscreen]



        What's included?

        In my previous post, Coming in JMP 12: Interactive HTML Bubble Plot , I showed a comparison of the desktop version and the Interactive HTML version, but I didn't cover how much of the rich feature set is available in the Interactive HTML version. We tried to capture the essential features of the Bubble Plot platform, many of which appear in the Bubble Plot platform's red triangle menu. So here's a comparison of the red triangle menu and the Interactive HTML version's menu.

        RedTriangleMenu
        Menu Button

        We hope you like the features we chose to support in the Interactive HTML Bubble Plot Platform. Please let us know if we missed something you would really like to see included.