• Home
  • Blog
  • 3D Visualizations in Dundas BI - A Good Use Case for 3D?

3D Visualizations in Dundas BI - A Good Use Case for 3D?

 

3D charts are frowned upon in the data visualization world, especially when it comes to 3D Pie and Bar Charts. Those 3D visualizations usually go against data visualization best practices as they don’t provide any additional information that cannot be achieved using their 2D counterparts. Furthermore, studies show that people make more errors when reading 3D visualizations and so the best practice is to stick with 2D. Yes, some would think that 3D is more “sexy” than 2D, but as much as one wants to make their visualizations appealing, the first factor to take into consideration is how accurately we can read the data that can then be used for important decision making. That begs the question – are there any valuable 3D visualizations?

Perform multi-variate analysis using 3D Scatter Plots

Scatter Plots are a great way to visualize correlations between paired sets across different variables and determine if there are any patterns/clusters within the data.

Usually Scatter Plots are used for bivariate analysis with pairs of numerical data plotted on each axis in order to look for a relationship between them. The points fall along a line or curve, or form a cluster if there is a correlation between variables. This helps in analyzing how the data is dispersed and/or if there are any outliers present.

 

 

Figure 1: Scatter plot example

 

But sometimes, there may be hidden clusters and patterns in the data that are not visible with just two dimensions. Adding a third dimension might reveal additional clusters and reveal hidden insights in the data. This is called a multi-variate analysis and a 3D Scatter Plot could be a good way to uncover these patterns and visualize them by plotting the variables along three axes in a xyz coordinate system instead of just two axes.

As mentioned above, 3D visualizations are usually against data visualization best practices, however, for multi-variate analysis specifically, the 3D visual coupled with interactivity allows you to see clusters that cannot be seen in 2D visual analysis and uncover additional insights. For example, you can rotate the scatter plot in a 3D space to see the clusters and patterns that were not previously visible (because they were hidden under other angles) and explore the relationships more thoroughly. We have seen a few examples of our customers in the engineering field using this type of visual to help them spot potential root causes for defects in their manufacturing process. Check out this animation to see this interactivity in action.

 

 

 

This animation was created using the Plotly JavaScript library. The Plotly library offers the ability to create different 3D interactive plots, and this blog will demonstrate how to use it in Dundas BI. The script used in this blog is based on the 3D point clustering example provided by Plotly: https://plot.ly/javascript/3d-point-clustering/

Inserting a 3D Scatter Plot in Dundas BI

The steps below are based on our detailed documentation on how to insert third party content into Dundas BI and thus the below just includes the specifics that apply to this sample (note this does require some JavaScript knowledge):

https://www.dundas.com/support/developer/samples/integration/insert-scripted-third-party-web-content

For other visualization examples inserted into Dundas BI using external JavaScript libraries you can also look at the D3.js library sample: https://www.dundas.com/support/developer/script-library/controls/insert-scripted-third-party-web-content-sample

The first step is to load the data into Dundas BI. For this example, we’ll use the sample dataset found here: https://raw.githubusercontent.com/plotly/datasets/master/alpha_shape.csv

This is the same dataset used to create the scatter plot mentioned above in Figure 1. We’ll see how by adding the third variable, we are able to see more clusters in this dataset.

To load the data, create a new Metric Set from the main menu, and drag and drop the file. Note the order of the columns, and the metric set ID shown after clicking Edit in the Data Analysis Panel.

On the dashboard, add an HTML label:

 

Figure 3: Add an HTML Label

 

Change the HTML label text to this:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  
<div id="myDiv" style="width:100%;height:100%"></div>

In the ready actions of dashboard, add the following script that draws the Scatter Plot from the three columns in the dataset:

// Initialize the variables, including the metric set ID:
var xColumnOrdinal = 0;
var yColumnOrdinal = 1;
var zColumnOrdinal = 2;
var metricSetId = "9abe9119-4e9f-44c3-ac77-2bc17b0e27e3";

var dataRetrievalService = this.getService("DataRetrievalService");

// Create a Request with paging disabled:
var request = new dundas.data.Request({ objectId: metricSetId });
request.pagingOptions.pagingKind = dundas.data.PagingKind.NONE;
var def = dataRetrievalService.getData(request);

def.done(function(results) {
    var cellset = results[0].cellset;
    var xVector = cellset.cells[xColumnOrdinal].map(function(cell){return cell.value;});
    var yVector = cellset.cells[yColumnOrdinal].map(function(cell){return cell.value;});
    var zVector = cellset.cells[zColumnOrdinal].map(function(cell){return cell.value;});

    var textVector = cellset.rows.map(function(row){
        return row.members.map(function(member){return member.caption + " ";}).join();
    });

    var trace1 = {
        x: xVector, y: yVector, z: zVector,
        text: textVector,
        mode: 'markers',
        marker: {
            size: 2,
            line: { width: 0.5 },
            opacity: 0.8
        },
        type: 'scatter3d'
    };

    // Draw a mesh around the clusters formed.
    var clusters = {
        alphahull: 7,
        name: "y",
        opacity: 0.1,
        type: "mesh3d",  
        x: xVector, y: yVector, z: zVector
    };

    var data = [trace1, clusters];
    var layout = {
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0
        }
    };

    Plotly.newPlot('myDiv', data, layout);
});

You can now use the Sandbox view or go to view and reload the page in order for the script to take effect. You should be able to see the Scatter Plot on the dashboard. The mesh enhances the view as it helps make the clusters more defined.

 

Figure 4: 3-D Scatter Plot

 

You can now interact with the plot by zooming, panning, rotating, etc., to see the clusters more clearly.

Is it worth it?

As you can see from the above example, by plotting the three variables in a 3D Scatter Plot, we were able to see more well-defined clusters and groupings that were not easily visible when the data was plotted over two dimensions. This does require using the chart’s interactivity and some time spent looking at the shape under different angles and zoom levels, but it may help you catch clusters you couldn’t see before. After all, there may be a case for useful 3D visualizations.

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri

Disqus Comments