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 enter image description here

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.

  • You should have a look at d3js.org examples, it's really great for inspiration. For instance this one: bl.ocks.org/mbostock/1044242. Or check out graph visualizations, although your n:m relationship is a really little interconnected graph.
    – CodeManX
    Commented Aug 17, 2014 at 23:13
  • I've left you a comprehensive list of resources you can explore and discover something that works best for you. The key to visualising data is to find meaning and a mathematical model to support it. Let the tools on the internet do the rest for you.
    – Rayraegah
    Commented Jul 14, 2015 at 10:19

3 Answers 3


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:

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:

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.


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.

  • I second the Sankey and D3.
    – Zoe K
    Commented Oct 12, 2015 at 18:35

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

  • I tried this approach. :) the comment I got was it does not have the Visual impact. I don't understand , People understand it . That's It. Commented Aug 20, 2014 at 21:17
  • Lol - if you want to jazz it up, that's the graphic design forum. This is bare bones functional UX. :)
    – Pdxd
    Commented Aug 20, 2014 at 21:42

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.

  • This sounds exactly like something I would like to do. I found this as a reference bl.ocks.org/NPashaP/9796212 Would I be able to do this with my level is novice experience? Commented Aug 20, 2014 at 21:14
  • There's no better time than now to become an expert.
    – FodderZone
    Commented Aug 22, 2014 at 14:02

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.