Need to display 3 grids (lists) with many to many relationships

Question

Need some help here to design a container having 3 lists(grids) communicating with each other as below:

The requirements are:

1. There are multi select allowed on each list.
2. On selecting customers, associated product and services wll be filtered.
3. After refresh all and selecting products will refresh(filter) associated customers and services.
4. On multiple selection on any entity, associated entities should be distinguished(top-bottom or bottom-top hierarchy)( I did it by color here).

In my way, my problem is a particular scenario: When selecting 2 or more products, if they are associated with same customer, I will not identify which color I should give that customer entity.

Is there any other UI design which can accomplish the need? Just an sketch will help.

Thanks.

Answer 1

If persistent visualization of relationships is important, you can try treating it like a sangkey diagram.

Sankey diagrams visualize the magnitude of flow between nodes in a network.

Here's a quick example (this one has magnitude and hover focus, but there's lots more things you can do):

What you have now looks like 3 disparate lists. It sounds like what you're trying to do is visualize relationships.

Your original attempt at using different colors for different relationships will break down, both from visual noise, and inability to distinguish color relationships for entities that have multiple connections.

If you want to have edges (visible connection lines) that show many to many relationships, you can use the sangkey without showing the order of magnitude (unless there's a magnitude factor that's important to highlight).

D3.js has many good examples. The main thing is that keeping the edges visible at all times means that the nodes show the relationships without any manipulation. You'll see this used in Google Analytics behavior flow, but D3 has many more examples.

Focusing on a particular entity and its ancestors (or descendents):

If you want to drill down on a specific relationship, you can select a canonical starting point, and highlight that node. The relationships can be highlighted from that starting point, both bottom up or top down.

To unselect you can have a button on hover (or visible) that can deselect the node, or selecting another node changes the relationship. I'm not sure, but it's a starting point.

Multiselect:

You said the requirement needs to have multiselect, but I suspect that's because the current grids will show no relationships at a glance. The sangkey will keep that relationship visible, and you might be still able to do multiselect by 'focusing' on one or more nodes at the same list level, similar to what I have below.

You can also experiment with graying down the unselected nodes, so it's very clear.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Answering My Own Post

I did the grouping in the following way:

My problem was how to efficiently group the products/services which are related to same customer.

In this design, I group the product with a header contains customer name and also grouped the services with the header contains customer+product name. Data displayed is not correct(sorry for that).