An interactive hierarchical edge bundling visualization that explores the relationships between ingredients used in recipes
- 🚀 Project Overview
- 🛠️ Used Technologies
- 🔍 Data Collection
- 📊 Exploratory Data Analysis
- ⚡ Deployment
- 🗺️ Roadmap
- 👥 Authors
- 📜 License
The Ingredient Web is a data visualization tool that uncovers hidden ingredient relationships in cooking recipes. Using hierarchical edge bundling, it turns co-occurrence data into an interactive web of flavor connections.
| Feature | Description |
|---|---|
| Ingredient Graph | Nodes are ingredients, edges represent co-usage across recipes. |
| Hierarchical Bundling | Reduces visual clutter while highlighting clusters. |
| JSON-Based Data | All ingredient data parsed from real recipe datasets. |
| Target Audience | Food scientists, chefs, data enthusiasts, and curious cooks. |
Data Source: Parsed from cleaned recipe datasets (clean_recipes_with_ingredients.json)
| Technology | Role |
|---|---|
| Python | App logic and data scraping |
| BeautifulSoup | Web scraping |
| Pandas | Data processing and transformation |
| Matplotlib | Ingredient pair frequency visualization |
| Flask (RESTful) | API for serving data to frontend |
| Technology | Role |
|---|---|
| D3.js | Hierarchical edge bundling and graph visualization |
| HTML/CSS/JavaScript | UI layout and interactivity |
- Source: AllRecipes.com
- Method: Web scraping using
BeautifulSoup - Collected Data:
- Ingredient lists
- Cuisine type classification
Top 20 Most Common Ingredients Overall:
- ingredients
- salt 1295
- sugar 1157
- water 839
- garlic 763
- onion 730
- butter 691
- egg 630
- flour 618
- oil 581
- pepper 503
- olive oil 440
- milk 331
- tomato 254
- vanilla extract 230
- cinnamon 207
- cayenne pepper 206
- soy sauce 205
- cumin 194
- baking powder 183
- lemon juice 176
- The dataset contains 2331 recipes across 49 cuisines.
- Cuisine distribution is uneven, with 'Canadian' being the most frequent (67 recipes) and 'Belgian' the least (6 recipes).
- Recipes typically contain between 7 and 13 ingredients (IQR), with a median of 10.
- The most common ingredients overall are: salt, sugar, water, garlic, onion.
- Co-occurrence heatmap highlights common ingredient pairings across all recipes (e.g., salt & pepper, flour & sugar).
- Clone the repo:
git clone https://github.com/Data-Wrangling-and-Visualisation/The-Ingredient-Web.git
cd The-Ingredient-Web
- Launch using Docker Compose:
docker-compose up --build
- Access the app at: http://localhost:5000
The project is deployed on Render: link
| Phase | Status | Tasks |
|---|---|---|
| Data Collection | ✅ | Scrape and clean recipe ingredient data |
| Visualization | ✅ | Implement edge bundling and charts |
| UI Polish | ✅ | Add filters, search, and responsive design |
| Interactivity | ✅ | Improve user engagement and highlight features |
Azalia Alisheva [email protected]
Aisylu Fattakhova [email protected]
This project is licensed under the MIT License — see LICENSE for details.
🍽️ Uncover the hidden harmony of your favorite ingredients with The Ingredient Web.