3D Scatter Plot Mod for Spotfire®

The 3D Scatter Plot Mod  allows visualizing three variables in 3-dimensional space. The chart can be rotated in 3-dimensional space to re-orient the chart so that details can be observed.

One particularly useful case for this chart is to visualize 3-dimensional well trajectories.

This mod exposes the majority of the Plotly API through a JSON configuration interface described below.

Data requirement

Every Mod handles missing, corrupted and/or inconsistent data in different ways. It is advised to always review how the data is visualized.

To make the 3D scatter plot mod work properly, the underlying must be formatted in a certain way. The data must exist in a single table with 3 variables for each of the x, y, and z axes.

Setting up the chart

Specify the data table with marking and filters as usual. Note that the chart supports click and drag to rotate the chart in 3D. This conflicts with the click to mark option in Spotfire, so it is recommended to choose (None) as the Marking option for the chart.

Select a value for the Line by property. The chart will render one line per value in this column.

Select a value for the Order by property. This will determine the order that the points will be plotted on the chart and will be important to ensure any connecting lines are drawn correctly.

Select values for X, Y, and Z properties. This will determine the value for each of the axes. These values are available surrounding the chart as well. X and Y are in the normal locations at the bottom and to the left of the plot area. The Z axis is the value to the right of the plot area.

Select a value for the Color by configuration. This will determine the color of any lines and markers using standard Spotfire color picker.

At this point the chart will still not render as the Plotly configuration needs to be setup. See Configuring the 3D scatter plot for details.

Configuring the chart

The configuration for the chart is completed using an included text editor. To access the editor, double-click on the center of the plot area. This will present a box titled Plotly Configuration and an editor that will contain the configuration in JSON format. 

Most of the Plotly JS API configuration options are available. Refer to the Plotly website for details of the API. But as a starting point, the following JSON string will render a standard 3D plot.

{
  "layout": {
    "font": {
      "color": "#BBBBBB",
      "size": 10
    },
    "margin": {
      "t": 0,
      "r": 0,
      "b": 10,
      "l": 0,
      "autoexpand": false
    },
    "paper_bgcolor": "transparent",
    "plot_bgcolor": "transparent",
    "scene": {
      "camera": {
        "eye": {
          "x": 1.1,
          "y": 1.1,
          "z": 1.1
        }
      },
      "xaxis": {    
        "gridcolor": "#BBBBBB",
        "title": "Easting"
      },
      "yaxis": {
        "gridcolor": "#BBBBBB",
        "title": "Northing"
      },
      "zaxis": {
        "gridcolor": "#BBBBBB",
        "title": "TVD",
        "autorange":"reversed"
      }      
    },
    "showlegend": true
  },
    
  "options": {
    "displayModeBar": false
  },
    
  "defaultTrace": {
    "eval_text": "'<b>ACTUAL</b><br><br><b>Easting:</b> ' + object.Easting + '<br><b>Northing:</b> ' + object.Northing + '<br><b>TVD:</b> ' + object.TVD + '<br><b>Inc:</b> ' + object.Inclination + '<br><b>Azi:</b> ' + object.Azimuth",
    "hoverinfo": "text",
    "mode": "lines+markers",
    "line": {
      "width": 5
    },
    "marker": {
      "size": 1
    },  
    "selected": {
      "marker": {
        "size": 8
      }
    },
    "textfont": {
      "size": 10
    },
    "textposition": "top center",
    "type": "scatter3d"
  }
}

These settings are not comprehensive; other options are available in the API. 

You can also adjust these settings for customization. For example, if you want to rename the X-axis title, replace the value under "layout" > "xaxis" > "title" to the label you wish to display.

It's very important that whatever value is in the configuration text area be a valid JSON string. The Validate button will verify that the configuration is valid JSON, but not validate it is syntactically correct. This must be clicked before saving the configuration. Once validated, click the Save button to display the chart.

Once the chart is rendered, the configuration can be modified as well. Just double-click in the center of the chart area to display the current configuration.

Using the chart

Once the chart is configured and has data provided it will render a 3D representation of your data. Click and drag anywhere in the plot area to rotate the visualization in three dimensions.

Help and support

This Mod for Spotfire® is not supported by Spotfire Support.

In the event of issues, please post a comment on this page.

To suggest features and enhancements, please submit an idea in the Spotfire Ideas portal.

For general questions about Mods, please post a question in the Forum for Extensions & Mods.

More information about Mods for Spotfire®

• Community Exchange: A safe and trusted place to discover ready-to-use Mods
• Developer Documentation: Introduction and tutorials for Mods developers
• Mods code examples on GitHub: A public repository for example projects