Scatter plot chart vs code flower (force directed) chart for data visualization

Question

We've got a scatter plot chart which represents some data.

Now, the client wants us to replace it with this code flower (force directed) chart.

Implementation efforts is not the problem for us, however I believe that it will degrade the UX.

For scatter plot chart

• All the data is available in one shot

For code flower:

• The user needs to hover on each point to get the sense of the data
• The user needs to click on each point to get the drill down data

I'm not at all a UX guru, however my conscience says, the client will degrade the product customer's UX.

Please help me decide:

• Shall I stop them from doing this?
• Is it really an improvement or just a fancy feature?

Answer 1

The purpose of the two chart styles is different.

The scatter plot simply shows the relationship between two dimensions of the data.

On the other hand, a tree visualisation such as that displays relationships between the items, in addition to magnitudes. It also allows the user to group and aggregate information. So it is showing significantly more information, but it comes at the expense of quickly being able to see some of the information.

This kind of graphic can be beneficial if displaying the relationships is important.

That being said,

I find that particular implementation gimmicky and unhelpful. I would avoid it.

Some of the problems I see:

• Absolutely no labels of items without hovering. It is not useful at a glance, since the user basically has to explore the whole thing to find out what is what.
• "Click to aggregate" is not intuitive. If I click on it, my initial response is "what just happened? Where did part of the tree go?" It even looks like a display glitch sort of. Plus, you can't tell which items can be expanded.
• Distracting animations. The way the tree moves around when you interact with it may be "cool" but it doesn't add anything, and in fact it makes it harder to use.
• Easy to get into a useless state, no way to revert. For example, you can aggregate them all into a single blob, then you can only get out of this with many clicks.

My overall verdict: some kind of tree graphic could be good if relationships are important information, but I would not use that one.

For me, a better graphic would be much larger in order to display such complex information. And it would label at least some of the main nodes. Also, if there is interaction to expand or collapse nodes, this needs to be clarified with visual cues that show where this is possible and what is happening.

Answer 2

I thoroughly recommend reading Stephen Few's book "Information Dashboard Design" or the guru of data visualisation Edward Tuft (any of his books)

All data visualisation must communicate its meaning effectively and concisely. If you need to hover and click to get a sense of its meaning, your visualisation will be challenging.

Now I am not suggesting that hover and click are bad things. It is just the initial view of the visualisation should address your primary goal - you want to quickly interpret the value from the visualisation.

However, hover and clicks can be used to support your primary goal if you need to explore the data any further, e.g. even with a scatter plot you might still use hover to tell you exact details about a particular point (so that you don't need to visual scan to the Y axis) and clicking a point might take you to additional information or a table of raw data, etc. With scatter plots you can add a trend line.

Of course there will always be a time and place for a code flower, but obviously depending on your data, I doubt this will be better than a scatter plot.

Like most things in life, use the right tool for the job - sometimes a hammer is an appropriate solution, but there are times when you need a screwdriver.

Answer 3

The code flower visualisation is good way of showing the relationships between different nodes as well as their relative sizes, so if that's a factor in your data then it could be beneficial.

You could keep both and give the user the option to view the data as either a bar chart or code flower by defaulting to one and using a toggle to switch between the two types. You could go further and use your analytics to track people switching the view.