This tool allows you to explore the flavor network, a social graph for flavor profiles. The network is based on the Flavor Bible and soon the companion book What to Drink with What You Eat.

Search for an ingredient you like, and the graph will refine to give you a web of ingredients that share highly similar flavor profiles. Then, click on a new ingredient in the network to add it to your recipe above the search box (or to remove it). Clicking on a recipe item or a node has the same effect. Search is not sorted by the flavor metric, it is instead sorted lexically.

In this way, you can start building out recipes, menu items and tastings from a consensus of flavor combinations.

Overview

What you are seeing:

• the nodes with color are your recipe ingredients
• the suggested ingredients are determined by Jaccard similarity (default) or by one of the other options in the ‘lens’ dropdown
• if you choose the hybrid option, the suggested ingredients are fiducially split between:
  • the most similar ingredients in the flavor metric (similarity)
  • the most similar ingredients by text ranking (affinity)
• the edges from one ingredient to another are weighted by a consensus of chef and expert opinion ¹
• if your ingredient is missing, it was likely missing in the book (quinoa) or was pruned because its mentions were too sparse ²

If a node is present without an edge, it means that the ingredient has a very good similarity with your recipe, but wasn’t mentioned (connected) in its book-entry literally. Reconstructing ‘ghost’ entries and connections by training a model with listed affinities is one of the ultimate goals of this project.

The amount of suggestions gradually decreases as you add more ingredients to your recipe. This is for performance reasons, as with the physics simulation disabling itself at destabilization. When that happens, maybe you discovered a flavor affinity.

I have included autogenerated links from your recipe basket to a few popular recipe resources above the network graph, including a database for cocktail mixing. ³

Why and how

Understanding why I chose this text for the dataset is probably already apparent to its readers, but the key thing to take away is that the authors did a fine job formatting something computer readable and human usable–a rare feat! Most importantly, it is aggregated from chefs, from real humans in kitchens doing what works, what’s delicious, and what’s in season. Recipe API’s don’t have this kind of granularity, many rely too heavily on user data to seed recommendations. To my knowledge, this is the only dataset of this kind.

Technical tools only involve vis.js for visualization and BeautifulSoup for parsing. The data is scraped from the Flavor Bible, and the similarity matrix is calculated using Jaccard similarity for pairwise comparisons. I am working on cleaning up the initial data with some mix of modern techniques with some concoction of nltk, fuzzywuzzy and/or Bert. The current form was done entirely with regexp/bs4 parsing. The suggested nodes can be improved by using a weighted Jaccard probability distribution (arXiv). Source code for this part of the calculation (the text → dataset chain) is available on GitHub.

Inspiration

In 2019, I was helping fellow chefs come up with new specials. At this point in time, we were rolling about four-ten new specials as a team every week, ranging from brunch, cocktails, lunch, football apps and our highly anticipated farm-to-fork pop-up dinners. But sometimes you just get plain stuck. A good trick, at least for creativity, is to set rules so you have some boundaries to push. But if you are going to set rules, they should at least solve a few things:

1. do something new
2. use something old
3. feature three things in season

I hate having extra stuff around, but I love new stuff coming in, yet I don’t like wasting things, but then I actually look forward to doing inventory. Ah, Schrodinger’s cook.

Specials: we would work out new ideas together over the prep table. Sometimes ideas required working things out on paper, usually butcher’s, and occoasionally crude graphs of our plate setups evolved. These were sketches of sauce and protein layouts, heavy edges between ideas if their pairing ‘sang’, then as a guide hanging from the ticket rail on the night a feature debuted.

Karen and Andrew’s book was gifted to me later that year, and it changed my game. It finally put in words a mental ranking of flavor profiles based on ingredient query. I had a good resource that gave answers, and especially new ideas, quickly. And it was thorough enough to trust.

This method was so helpful, I started dreaming of a computer tool to help me sketch out this process. I remembered a reddit post that spurred others to lay out some of the underlying ideas here: overlapping communities :: compatible flavors.

Broader thoughts

I believe the impact of mathematical concepts to the broader culinary scope to be a major upgrade in our thoughtfulness about food. To extend its application, in creativity and clarity, not abused in statistics to pressure a sale and disable the creative mind. While I do see how a tool like this could provide immense practical application in the distribution world, my focus here is to empower chefs, bartenders, brewers, baristas, and sommeliers to create new things.

When it comes to tools available to chefs, compared to musicians, writers, and artists, chef’s are unfortunately at a disadvantage creatively. Yes, we have recipes, but those are instructions, and do little to help us build on ratio or balance. What might be more helpful, I think, is a playground for putting new food ideas together.

The graph may take a moment to load.

The search bar is the major addition to the graphing methods. Nodes can be clicked and added to a subgraph builder. You can continue to search for new node members in the search bar (which has a rudimentary autofill that’s a straight json query) and clicking on them will add them to the builder. Simultaneously, the graph will reduce to a graph containing only all nodes with edges linked to nodes in the builder.

Items can be removed from the builder either by clicking the little builder tabs or re-clicking the node. Clearing the builder bar completely will redraw the whole graph.

Testing and development was done on the mini pesto data set I made for What is Pesto?. Recipe builder coming soon(!)

Please email me at wyatt@brege.org with any questions.

Dataset can be found here:

• nodes.json
• edges.json

Lingering annoyances:

• Slow
• Javascript needs clean up
• I have great fear running this on my 700x3000 dataset..

1. Data for the network is stored in two separate JSON files in this page bundle:

   • nodes.json
   • edges.json

2. The shortcode and post-local javascript work together:

   • fruit-network.html
   • fruit-network.js

     {{ $nodesPath := .Get "nodesPath" }}
     {{ $edgesPath := .Get "edgesPath" }}
     
     <style>
       #mynetwork {
         background-color: #f5f5f5; /* a medium gray color */
         border-radius: 10px;
         border: 1px solid #cccccc;
         margin: 5px 0 40px 0;
       }
     </style>
     
     <div id="mynetwork" data-nodes-path={{ $nodesPath }} data-edges-path={{ $edgesPath }}></div>
     
     <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="js/fruit-network.js"></script>
     

This will provide network graph physics where the nodes are images (all sourced from Wikipedia. Hugo template for completeness:

{{< fruit-network nodesPath="data/nodes.json" edgesPath="data/edges.json" scriptPath="js/fruit-network.js" >}}

Relative to the root of the Hugo website directory, here’s some basic files to make this interactive. Note that The JSON data and CSS is added inline here to make the scope of this tutorial focus on Hugo-specific structures.

1. The javascript file lives in this page bundle:

   • toy-network.js

2. This file accesses data for the nodes and edges from two JSON files in this page bundle:

   • nodes.json
   • edges.json

3. In the shortcodes directory /layouts/shortcodes/:

   • toy-network.html

     <div id="mynetwork" data-nodes-path="data/nodes.json" data-edges-path="data/edges.json">
         <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
         <script src="js/toy-network.js"></script>
     </div>
     

4. Do the normal way of making a post in Hugo, but invoke the shortcode within the body of your markdown:

   • index.md

     {{< toy-network nodesPath="data/nodes.json" edgesPath="data/edges.json" scriptPath="js/toy-network.js" >}}
     

This will provide the simple network graph above.