Best Practices

3D graph: Useful visualization or misleading illusion?

by

Highsoft

8 minutes read

Data visualization, Highcharts Core, JavaScript

3D graphs: useful visualization or misleading illusion?

In the world of data visualization, 3D charts and graphs have always been a subject of heated debate among designers, data scientists, and researchers. While they can create visually stunning representations, capture viewer attention, and add an extra dimension to data, they also risk distorting information and creating misleading perceptions. This post explores the advantages and challenges of 3D visualization, when they might be appropriate, and how to implement them effectively with Highcharts. The fundamental question is whether 3D charts enhance understanding or simply add unnecessary complexity. As with most design questions, the answer isn’t black and white – context matters tremendously. Let’s dive into the nuances of 3D visualizations.

To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started. Once you get the hang of it, the API reference will help you customize your charts in no time.

Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

The case for 3D visualization

Before dismissing 3D charts as mere eye candy, it’s worth considering scenarios where the third dimension can genuinely enhance data comprehension:

Actual three-dimensional data: When your data naturally exists in three dimensions (like spatial coordinates, topographical data, or multi-variable relationships), a 3D representation can be the most intuitive approach.
Complex relationships: Some datasets contain relationships that become more apparent when visualized in three dimensions, particularly when examining correlations between multiple variables simultaneously.
Engagement and memorability: Studies show that visually distinctive graphics can improve information retention. For presentations intended to make a lasting impression, the visual appeal of a well-designed 3D chart can help key points stick with your audience.
Interactive exploration: Modern web technologies allow users to rotate, zoom, and interact with 3D visualizations, overcoming many traditional limitations and enabling more thorough data exploration.

The problems with 3D graphs

Despite their appeal, 3D charts come with significant challenges that can potentially undermine their effectiveness:

Perspective distortion: Elements further from the viewer appear smaller, making accurate visual comparisons difficult. This can inadvertently misrepresent data magnitude, especially in bar charts and pie charts.
Occlusion: Data points or elements can hide behind others, making some information invisible depending on the viewing angle. This is particularly problematic in densely populated charts.
Increased cognitive load: Processing three-dimensional representations requires more mental effort than their 2D counterparts, potentially distracting from the data itself.
Chart junk: Unnecessary visual elements that don’t contribute to understanding the data can divert attention from the actual information.

These concerns have led many data visualization experts, including Edward Tufte and Stephen Few, to advise against using 3D in most business and scientific contexts.

Creating effective 3D visualizations with Highcharts

If you’ve determined that a 3D visualization is appropriate for your specific use case, Highcharts offers robust options for creating interactive 3D charts that minimize common pitfalls. Let’s examine a 3D scatter plot with interactive rotation, allowing users to explore data from multiple angles.

This example demonstrates an interactive 3D scatter plot where users can examine the distribution of data points across three dimensions. The ability to rotate the visualization helps users overcome the occlusion problem by viewing the data from different angles.

Here’s how to implement it:

1. Load the required files and create a container to hold the chart

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

2. Add some CSS to control the dimensions of the container

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

3. Implement the JavaScript

// Set up the chart
const chart = Highcharts.chart('container', {
    chart: {
        margin: 100,
        type: 'scatter3d',
        options3d: {
            enabled: true,
            alpha: 10,
            beta: 30,
            depth: 250,
            viewDistance: 5,
            fitToPlot: false,
            frame: {
                bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                side: { size: 1, color: 'rgba(0,0,0,0.06)' }
            }
        }
    },
    title: {
        text: 'Axis labels in perspective'
    },
    subtitle: {
        text: 'Click and drag the plot area to rotate in space'
    },
    plotOptions: {
        scatter: {
            width: 10,
            height: 10,
            depth: 10
        }
    },
    xAxis: {
        min: 0,
        max: 1000,
        gridLineWidth: 1,
        labels: {
            skew3d: true
        },
        title: {
            text: 'X axis title'
        }
    },
    yAxis: {
        min: 0,
        max: 1000,
        labels: {
            skew3d: true
        },
        title: {
            text: 'Y axis title'
        }
    },
    zAxis: {
        min: 0,
        max: 1000,
        showFirstLabel: false,
        labels: {
            skew3d: true
        },
        title: {
            text: 'Z axis title'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Reading',
        colorByPoint: true,
        data: [
            [611, 138, 82],
            [304, 716, 717],
            [250, 196, 324],
            [309, 751, 146],
            [528, 724, 239],
            [51, 8, 341],
            [113, 414, 490],
            [194, 762, 536],
            [350, 939, 500],
            [339, 920, 386],
            [758, 314, 434],
            [144, 779, 960],
            [564, 464, 823],
            [312, 497, 148],
            [705, 669, 944],
            [306, 829, 993],
            [926, 211, 649],
            [887, 176, 630],
            [492, 572, 691],
            [440, 259, 283],
            [381, 268, 620],
            [282, 180, 626],
            [633, 519, 908],
            [779, 661, 512],
            [168, 50, 575],
            [730, 271, 655],
            [606, 135, 976],
            [45, 488, 930],
            [376, 127, 24],
            [169, 243, 552]
        ]
    }]
});

// Add mouse events for rotation
function start(eStart) {
    eStart = chart.pointer.normalize(eStart);

    const posX = eStart.chartX,
        posY = eStart.chartY,
        alpha = chart.options.chart.options3d.alpha,
        beta = chart.options.chart.options3d.beta,
        sensitivity = 5; // lower is more sensitive

    const move = e => {
        // Run beta
        e = chart.pointer.normalize(e);
        const newBeta = beta + (posX - e.chartX) / sensitivity;
        chart.options.chart.options3d.beta = newBeta;

        // Run alpha
        const newAlpha = alpha + (e.chartY - posY) / sensitivity;
        chart.options.chart.options3d.alpha = newAlpha;

        chart.redraw(false);
    };

    const end = () => {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('touchdrag', move);

        document.removeEventListener('mouseup', end);
        document.removeEventListener('touchend', end);
    };

    document.addEventListener('mousemove', move);
    document.addEventListener('touchdrag', move);

    document.addEventListener('mouseup', end);
    document.addEventListener('touchend', end);
}

// Add mouse events for rotation
chart.container.addEventListener('mousedown', start);
chart.container.addEventListener('touchstart', start);

This 3D scatter plot addresses several common 3D visualization challenges in thoughtful ways:

Interactive exploration: The most significant advantage of this implementation is the user’s ability to rotate the chart. This interactivity allows viewers to examine the data from multiple angles, significantly reducing issues with occlusion and perspective distortion.

Skewed axis labels: Notice the skew3d: true property for axis labels. This maintains the three-dimensional effect while ensuring labels remain readable, enhancing the user’s ability to interpret the data accurately.

Subtle framing: The frame elements (bottom, back, and side) provide spatial orientation without overwhelming the data. Their light coloring (low opacity) ensures they don’t compete with the actual data points.

Clear axes with titles: Each axis has a clearly defined range (0-1000) and descriptive title, making it easier to interpret the position of points in 3D space.

ColorByPoint: Using different colors for data points helps distinguish between them and can add an additional dimension of information if the colors represent a meaningful pattern.

Best practices for implementing 3D charts

If you’ve determined that a 3D visualization is appropriate for your data, here are some guidelines to enhance effectiveness while minimizing potential issues:

Choose appropriate use cases

3D visualizations work best when your data actually has three dimensions that are meaningful to display simultaneously. Good candidates include scientific data like molecular structures, geospatial data such as terrain visualization, and multi-variable relationships where exploring correlations between three or more variables is necessary.

Enhance perspective understanding

To help users accurately interpret 3D data, add interactivity allowing users to rotate and explore from different angles, use reference elements like grid lines to help judge positions, apply appropriate shading for visual depth cues, and include tooltips with precise values rather than relying solely on visual perception.

Optimize the view angle

The viewing angle significantly impacts how 3D data is perceived. Choose alpha and beta angles that minimize occlusion while still conveying depth, consider providing multiple preset views or user-controlled rotation, and avoid extreme angles that exacerbate perspective distortion.

Conclusion: when to use 3D charts

3D visualizations should be used when they genuinely enhance understanding rather than just for decorative purposes. Appropriate scenarios include visualizing inherently three-dimensional data, exploring complex multi-variable relationships, or when user interaction allows exploring data from multiple perspectives.

Remember that the goal of any data visualization is to communicate information clearly and accurately. If a 3D representation enhances this goal, it’s the right choice. If it obscures understanding or creates misleading impressions, consider alternative 2D approaches that might better serve your users and your data.