# Compare two list of elements & visualize similarity between them

I have a two List of Strings; ex:

ListA = {"A","B","C", "F"}

ListB = {"C","D","E"}

``````I need to compare these two lists & present the difference to user in UI.
``````

I have implemented algorithm to compare lists & have following data:

• Items in ListA which is not in ListB {"A", "B", "F"}
• Items in ListB which is not in ListA {"D", "E"}

Please suggest some way to calculate & display percentage of similarity between two lists. Also it would be helpful if you can suggest a way to present list of missing element across lists.

-
Can you give more information about what is in the lists? Are they single characters, names of countries, lines of code, numbers? The visualization can use features of the content to improve comprehensibility. – ted.strauss Apr 4 '14 at 5:59

Since you have two lists and there is no information on which one is primary, I think that diff like this will work good:

Pros:

1. It shows both lists unmodified
2. It shows resulting list
3. It highlights items which are added
4. It shows common part of the lists

Cons:

1. Three lists instead of one

Colors could be tuned up to your needs (for example, you may assign different colors to both lists and highlight different items accordingly in the resulting list, but do it with care since too much color may make things less recognizable).

You may also try to show only resulting list and give user an ability to choose list she want to compare it with:

Pros:

1. One single list

Cons:

1. Individual lists are not shown
2. User interaction is required
-

What you describe seems a diff-like application. You could use a similar view, two columns and the matching items hightlighted.

As for the similarity algorithm, if ListA is {A} and ListB is {A,B} lists would be 50% similar, then it could be:

coincidences / (ListA length + ListB length + conincidences) * 100

-

The classical way is a Venn diagram:

(Source: Wikipedia)

For quantification of set similarity/dissimilarity, you can look at Sørensen–Dice coefficient or Jaccard index. Their parameterization is the Tversky index.

-

Alternative to alexeypegov suggestion is having a vertical list. Again, if you are showing less than 15 elements vertical list works. However, if the design had elements Scipion examples. You could pull off an amazing list comparator.

What is the main goal for the user having to view the list comparator?

-