0

Needed someone to discuss this with since I am currently working alone. I have a 'subject' in my product which can be associated with a variable number of objects. Each object has two states.. viz. UP or DOWN. If all the objects associated to a 'subject' are UP then the corresponding subject is in the best condition. If all of them are DOWN then the subject is dead. All intermediate levels denote varying levels optimality in performance. Now the UI for the subject is card/slat based. And I want to show this 'strength', if you will, on the card. I have a few thoughts like: 

 a) Depicting it similar to the cellphone signal strength on a phone.

 b) Plotting one dot each for the objects and coloring it red/green. 

 c) Plotting a pie chart - last option.

 d) showing just the numbers viz - 2(up)/10

Wanted to to check if anyone else has any interesting thoughts regarding this. If it matters, I am on Angular and using d3 for visualization.

Improve this question
3
  • What is the maximum number of objects? Are the objects named or do they contain any additional info beside the state? – locationunknown Apr 7 '16 at 13:06
  • I would peg the practical maximum of these objects at 15. They do have a name. But nothing more than that. The average size of the name would be 20 characters. – Aditya Apr 7 '16 at 13:11
  • Sounds like an interesting problem, but not well suited for SE. I'd mock up some options and ask for feedback on the UX Slack group. – plainclothes Apr 7 '16 at 16:46
1

If you are using d3.js,then you can probably create a matrix layout and plot your subject on one of its axis and let the other axis represent its objects,create color codes for each cell that would tell you about the various states of each object associated with the same object.After plotting it would look something similar : enter image description here

Based on color codes you can quickly identify all scenarios like best(UP),good,average,below average,DOWN. Bonus : Use shades of same color,their density helps to quickly catch the anomalies. d3.js reference : https://bost.ocks.org/mike/miserables/ Hope that helps.

Improve this answer

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