What do you think is a good way to visualize this in a user-friendly way?

Data is based on:

  • 35 recipes (Meal Name, Type, Date)
  • 100 ingredients. (Name, Type, Date)


  • Users need to see the relationship between the recipes and ingredients on one page diagram/infographic (scrolling is OK).

  • Also, users may want to see what ingredients are in a recipe or what recipes there are for an ingredient.

This may be helpful:

  • Most recipes have have a few ingredients, many have just one, and a few recipes have ~10 ingredients.

Any ideas would be appreciated!

  • This reads like you want us to do the work for you. We have help you with elements of an interface but we'd expect you to have already come up with a solution and just need some advice on a particular element of it that isn't working so well.
    – JonW
    May 18, 2014 at 14:50
  • Is this supposed to be static or interactive? I.e. does the user select the relationship he wants to see, or do all the relationships need to be visible simultaneously, like on a poster? May 18, 2014 at 14:53
  • @VitalyMijiritsky this will be interactive
    – Alex L
    May 18, 2014 at 15:21
  • @JonW Thanks for commenting but I definitely do not expect you to put in time working on this. I was hoping to learn of some examples or patterns for visualizing this kind of data relationship. I feel like this has been done before so if anyone could point to an example, I'd appreciate this.
    – Alex L
    May 18, 2014 at 15:23
  • I don't understand the exact purpose of the Date field and what the relationship is between the recipe and ingredient dates. Is this to track when the ingredients were used to make the recipes?
    – Michael Lai
    May 18, 2014 at 23:41

1 Answer 1


This is a basic layout where you can have bidirectional exploration of a one-to-many relationship. When you select an item in one of the lists, the top list of the other side displays the relevant items.

This could be solved with just the two lists if you highlighted the relevant items on the other list, instead of grouping them together, but with a hundred ingredients some of them are bound to be out of view and you don't want the user scrolling and looking for them.

You can either fix the bottom lists in place, resorting to scrolling within the top lists when they're too long for the allocated space - or you can adjust the position of the bottom lists dynamically, always displaying the top list to its full height, but then the bottom lists will be always jumping up and down as you work.

Another solution is to only display one of the top lists at a time, and to have the user select whether he wants to explore ingredients by recipes or recipes by ingredients. But that's a bit more difficult to understand and more cumbersome to operate.


download bmml source – Wireframes created with Balsamiq Mockups

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.