Design for a scatter plot graph

Question

I am designing a data vis platform and there are two primary form factors of the graphs, large and small. In designing these graphs, I'm trying to avoid the terminal ugliness of most platforms while not sacrificing usability.

This question deals with the scatter plot. There are two possible versions.

In one version, the large size uses a different Axis titling scheme than the small size. In the other it uses the same scheme.

The advantage of a different scheme is it makes use of the extra space to include more measure marks while the disadvantage is that it's two different designs which is a higher cognitive load and potentially uglier.

Thoughts?

Version 1 - Same layout

Version 2 - Different layout

Answer 1

Version 2 where more info is shown on the larger graph is better.

The difference between the layout between large and small graphs in Version 2 is so slight that I'd bet if you ask your users, they would hardly have noticed. For data visualization, the most important thing for the user is in finding patterns within the dataset from your graphs. It's a good thing to provide more granular axis subdivisions to make it easier to understand the data.

Second point, consistency to the point where everything looks the same, does not necessarily decrease cognitive load. In a page full of graphs, if emphasis is not provided, it's very easy for users to feel overwhelmed because they don't know what they should focus on first.

Answer 2

While your mission to propagate an aesthetic factor in Data Viz domain is great, both versions have issues in their current state.

• Vertical text — always bad, never use it.
• 50-pixel legend serifs that are of no function.
• There are no grid lines for the eye to follow. The eye will be lost in the middle of the chart without them, and the data will be seen quite approximately, which defeats the purpose of the chart.
• In one of the charts there is no legend to follow.
• X axis legend aligned to the center will be lost on wide screen.
• Y axis legend aligned to the right will be lost on all screens.
• Stroked circles look like a radio buttons. Use them for interactivity, if you want, but for static version circles should be filled.
• Shapes (stroked circles & full circles) should be cohesive for full charts and mini-charts. Each shape represents one type of variable, and you have two different variables shown when you show both.
• Shades of blue-green & blue are too close and blend in together. I suspect you didn't validate chart colors for color-blind users, either.

I've designed the reference to illustrate these points (see below).

As I see it, your biggest problems lie in the scope of legend design, where function goes before the form, and this is relatively easy to fix. I highly recommend Tufte's books, blog and forum for the fastest internalization of common pitfalls.

As for the interactivity level, there are way too many possibilities that will depend on the data that you have, the data you want to show, the insights you would want to highlight, and user needs. It is better to ask separate specific questions regarding specific issues, like you did with these charts.

Answer 3

I applaud your missing - beautiful and usable data visuals are wondrous things.

These images don't show any motion or interaction; can you rely on interaction being available? Traditional graphs all all based on print media and are really tough for most of us to consume.

Letting the user poke around in the scatter plots so that they can see actual values for the points they are interested in would be better than showing a detailed set of marks off to one side. For example: when the user touches the chart you could show only that points values on the x and y axes. That way you can keep the main view really clean and simple and only enhance when your users ask for it.

Motion in charts can really help. For example bring the points in in order along one axis; show the corresponding value on the axis rising up as the points are drawn up the chart (or left/right if more logical).

PS it would be good to make your key (rings) match the data points (dots). They are currently quite hard to process and seem to be really important in understanding the content.