I'm trying to find the best way to visualise the following tabular data.


There are several channels and each channel has two platforms. The value of the channel's platform could range from 0 to millions. The number of channels could also grow to over 50. What I'm looking for is a method to visualise this such that the user could easily tell at a glance which platform has the highest/lowest value. I initially thought that a butterfly bar chart would be good for the problem but have now ruled it out as I only have limited screen space to work with.

I was wondering if there's a clever way to visualise this on small screen real estate?

enter image description here

  • are the two values for the ranges between platform 1 and platform 2? or are there other values not shown here?
    – Mike M
    Jun 6, 2018 at 5:48
  • @MikeM The values on the right are for Platform 2 and the ones in the middle are for platform 1. They are not related. Some of the Platform 1 channels don't have values to show. Sorry for the confusion. Jun 6, 2018 at 5:59
  • K. So there's another independent value for volume, correct?
    – Mike M
    Jun 6, 2018 at 6:09

3 Answers 3


I'm looking for is a method to visualise this such that the user could easily tell at a glance which platform has the highest/lowest value

How easy it is to tell which platform has the highest/lowest value is determine by the number of platforms that have very similar values. And this is made more difficult if you have a large number of channels. If most of the values are very similar then I don't think any type of visualization strategy will help. I think the only thing that might help you is if there is some relationship between Platform 1 and Platform 2 because it is less likely that 2 different channels will have very similar values for both platforms.

Here's what 50 Channel for two platforms looks like when I use a colour scale to represent the value of randomly generated numbers ordered from highest to lowest, and I have generated five different sets of data to show that the effectiveness of the visualization is determined by the spread or distribution of the data:

enter image description here

I think a more practical solution would be to apply some logic that allows you to sort/order the channels, or alternatively highlight the channel with the highest and lowest value.

In general data visualization helps you to see patterns or trends and identify certain areas of interest, but this works better when you are not constrained by the way you need to display the information. In your case there are probably more practical ways to do this, especially if you need to do this very quickly and/or accurately.


To do it "at a glance" i.e. preattentively, build your app so it automatically highlights the lowest and highest value in each column (or the total across both columns)

If you want a bit more interactivity, make the column headers act as sort controls


I'm no data-viz specialist, but from a UX perspective I'd encourage you to learn more about what the user wants to do with the information on these channels.

No need to answer these for me, but here's what I'm wondering based on your post...

-How often are they looking at Platform 1 AND Platform 2? Is it a comparison?

-How often are they comparing different channels? If they are comparing, how many channels are they usually comparing at a time?

-What are users doing with the information from this data set?

-How necessary is it to show every channel with both platforms, especially on mobile?

-Why do they want the highest and lowest values?

-Why are users looking at this information in the first place?

-What Key Performance Indicators (KPIs) / Business Metrics will potentially be impacted positively with this and what will be used to measure the results?

All that said, personally for tables I really like this visualization:

responsive tables on iPhone SE

That's on an iPhone SE (320px wide) with 16pt fonts so there's plenty of room. You could even use full numbers as shown on Channel B.

From here you could add filters or other visual indicators to help draw attention where it's needed. Michael's answer is very clear to see high/low values. You could also look into financial tech apps or the New York Stock Exchange / Wall Street visuals as well as news networks which cover them. They have tons of ways they show high/lows and change over time.

Above all I urge you to put User Testing into your process somehow.

Go get 'em!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.