An interactive tool to visualize the world's best known cocktails. Check it out here!
Cocktail Conundrum is a visualized bartending guide for the novice or professional bartender. Displayed as a radial tree structure, users can browse the world's best known cocktails by name or ingredient (alcohol and mix-ins). This is a tool that can be used to jog the memory or discover something new.
In Cocktail Conundrom, users will be able to:
- Select to search by name or ingredient
- Hovering over a cocktail name will display the recipe instructions for concoction
- Each cocktail name will connect to it's respective ingredients
- Each ingredient will connect to the cocktail's that include it as an element
This project will be implemented with the following technologies:
- Vanilla JavaScript
- D3.js JavaScript Library
- The Cocktail DB API
- HTML
- SVG
- CSS
- Canvas
- Webpack
- Day 1 - Source database / API and corresponding documentation
- Day 2 - Parse data into appropriate organization, review D3 documentation and tutorials for best implementation
- Day 3 - Begin code layout, create node modules and entry file
- Day 4 - Implement data visualization
- Day 5 - Complete styling and animation effects
Future direction:
- Add the following filters:
- Glass (ex. Wine glass, Shot glass, Martini glass, etc.. )
- Category (ex. Shake, Shot, Punch, etc.. )
- Alcoholic vs Non-alcoholic