Visualize many to multiple relationship (Interactive)

Question

So, I am a student who has a many to many relationship In a database.

1. a table of Codes
2. a Table of rules to which a code is applicable

Now, I am able to get the data using SQL. But my professor is not happy. he is more of a visual guy. Impress him there , and I'm done.

I was able to show him something in Visio like

And this is Just a subset for an instance.Both are dynamic.

Now I want something interactive, when I select one from the left, it should Highlight the right Columns ,Or point to them.

Guide me to the tools and resources where I can achieve this.

PS. I am using a WPF Application. Integration is not necessary.

Answer 1

I love data visualisation and information experience design questions. Choosing an interactive visualisation to showcase your data is definitely a step in the right direction. We as humans, remember a lot from sight... visual and immersive content helps us understand or make sense of data we normally cannot digest.

So should you really impress your professor with a visualisation? NO. Should you go the extra mile to make your presentation more appealing and simple/easy to understand? Yes. Perks of the latter, you get to impress your professor (maybe).

Can you or should you learn to do this? (even with your novice level experience) - Yes. Its not that difficult and the community is here to help you.

HOW!? Start by researching some of the best ways to represent many-to-many (one to many, many to multiple) relationship. Since you're going to make it interactive you can toggle between the representation types. Here are some examples of what's out there:

• http://peoplemov.in/
• http://www.global-migration.info/

A chord diagram or sankey diagram are top of my list for mapping relationships. But its not accurate for you nor the only solution. You must explore them all to find the one that best suits your needs. Explore mathematics content on the web and look up sites that have a visualisation gallery.

These are my favourites:

• http://visual.ly/view
• http://christopheviau.com/d3list/gallery.html
• https://github.com/mbostock/d3/wiki/Gallery

Once you have decided on the type of visualisation, look around for tools that can process your data and let you download data models or the interactive version or sites that have open source code you can reuse.

Examples:

• http://raw.densitydesign.org/
• http://bl.ocks.org/NPashaP/9796212
• http://www.redotheweb.com/DependencyWheel/
• https://developers.google.com/chart/interactive/docs/gallery/sankey

If you are stuck on javascript code - post in stackoverflow

Once again, I've only presented examples that I've used and familiar with. There are plenty of similar resources in languages / environments you might be familiar with. Discover something that works best for you.

Answer 2

Why not use a grid where each list is on a different axis and where both apply, fill in the box? You can maybe make these filled boxes interactive with a hover effect.

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

Ok it doesn't need to just be with checkboxes, they could be just different colours boxes to represent different things. Just the idea is to put the list on an x and y axis.

Edit: Added the Diagram

Answer 3

The full graph is so busy it's almost impossible to make sense of the data. I would suggest you highlight the associated guidelines when a GT code is selected or vice versa.

I think there are two ways to do this. First, you could use a graph control like those provided by Infragistics, Telerik, or some other package. Again highlight associations based on the selected GT code or guideline. Second, you could have two lists, and GT codes and guidelines. When one of the rows is selected you highlight or show the associated items. It might be helpful for your lists to show the number of associated items.

Finally, it seems your guidelines have some groupings. You could use some coloring to emphasize those groupings.