Skip to content

Instantly share code, notes, and snippets.

@Jomonsugi

Jomonsugi/Union_Lodge_Cocktail_Ingredients.csv

Last active August 16, 2016 22:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jomonsugi/1949b20a9d98089d781c4ff9b5965d65 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jomonsugi/1949b20a9d98089d781c4ff9b5965d65 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cocktail_ingredients.md

Summary

This data vizualization shows all the liquid cocktail ingredients used in cocktails (featured in the menu) at Union Lodge #1 in Denver, Colorado. The chart's purpose is to give the viewer a snapshot of what the bar uses, and the volume of each ingredient used. The volume in mL is calculated by adding up the total volume of a particular ingredient used across all cocktails in the menu (unfortunately making me think of trashcan punch). The chart gives a sense of what the bar focuses on, and what it does not (like vodka...there is none at Union Lodge #1).

Design

My first idea was to create a chart using circle packing. I put together a draft using RAW Here it is: https://codepen.io/Jomonsugi/pen/ZOvRak

I am a complete beginner to html, css, svg, d3, and dimple.js, so after looking the intricacy of the code I would need to write (and understand) in order to produce a nice looking circle packing chart, I decided to go with a bar chart instead. The bar chart does suit my data and the comparison's I wanted to communicate. After shifting to a stacked bar chart with some interesting options available through dimple and d3, I think the chart is interesting, informative, and fun to play with.

The goal of the chart is to give the viewer an understanding and comparison of the types of the liquid ingredients used in the menu cocktails at Union Lodge #1. You can easily see what is used most, what is used in small quanity, and what is not used at all in cocktails featured on the menu. Past that I wanted more information available through the visualization and through feedback, I found out others did as well. The interactive features served this purpose. The tooltips offer more information for those who want it, and make the chart more interesting since you can play with it!

I made a few edits to the visualization based on feedback that I received from others:

  • I divided the bars to show the distribuation of ingredients that make up the total volume of an ingredient, based on the cocktail they are used in
  • I added a tooltip that shows the type of ingredient
  • I rotated the ingredient labels 45 degrees
  • I edited the 'Types' variable to give a clearer explanation

Other edits I made based on my own observations:

  • I increased the font sizes of axis labels and ingredient labels
  • I made the title/subtitle clear (with more explanation)
  • I changed ounces to mL

Feedback

I collected feedback throughout various stages of producing my chart. Each person returned their feeback in differnt forms, which I have kept relatively intact below.

I sent my first draft to my friend Bryce, who works for an oil and gas company. His knowledge of cocktail ingredients is above average.

  1. What do you notice in the visualization?

I notice how many ounces of liquid go into the total amount of drinks at the bar. (if every drink was made one time, this visualization shows how many total ounces of each ingredient would be used)

  1. What questions do you have about the data?

I want to know the distribution of these liquids in to the total number of drinks. I want to know actual ounces and not rounded ounces

  1. What relationships do you notice?

I'm not sure I notice any relationships. I don't know what conclusions I should draw. There is probably a relationship between the number of drinks an ingredient is featured and the total number of ounces in which the ingredient is used on the entire menu, but I > hesitate to make draw that conclusion b/c I know that some ingredients are used in very small amounts in a great many drinks.

  1. What do you think is the main takeaway from this visualization?

Gin and Rye are the most popular base spirits on the menu. This is interesting to note. Without seeing the visualization I would have assumed that bourbon would be used more than rye.

  1. Is there something you don't understand in the graphic?

I think I understand what the graphic is visualizing.

I also sent the first draft to my girlfriend, Emily, who was probably way too nice to me...

1.)

A clear understanding of the amount of cocktail ingredients for Union Lodges inventory by ounces demonstrated through a bar chart.

2.)

I have no questions, it's very easy to understand.

3.)

Ounces to ingredients.

4.)

This visualization is easy to quickly takeaway the greatest amount of ingredients to the least amount.

5.)

No.

After taking these comments into account, I edited and sent a draft to my friend John, who primarily does illustrations for bands.

I think this looks really good and is totally intuitive and reads clearly. I always have a hard time reading text that’s straight down at a 90 degree angle, it’s a minor thing, but, if you could put them all at a 45 degree angle or something, that might help (also understood if that’s not an option). My takeaways were that I didn’t know Gin and Rye were so common, the Soda being so prevalent is not a surprise. The little animation drawing a line from the cocktail to the Y axis is nice and helpful.

I hope some of the feedback is somewhat helpful, not sure exactly what you’re looking for, but, I think this looks great, makes sense, and is easy to understand. If I were handed this on a project, I would be able to use it to make an illustration or find some > sort of conclusion/idea from it (if that makes any sense).

I then sent the chart to my friend Chad, who is a data analyst and produces a lot of data visualizations for high profile clients.

  • What do you notice in the visualization?

Ingredients that are used in small amounts tend to only have a single use, while ingredients that are used in large quantities tend to be used much more often.

  • What questions do you have about the data?

It'd be interesting to see the same chart but with the cocktails on the x-axis rather than ingredients.

Note: If I put the cocktails on the x axis, then each bar would represent how many mL is in each drink and then I could divide the bars to show the makeup of each cocktail. This would be interesting if you wanted to know more about what is in each drink, but my chart isn't a recipe book, it is about showing and comparing the types of ingredients used at the bar.

  • What relationships do you notice?

Soda and lemon juice are the most used non-alcoholic ingredients.

  • What do you think is the main takeaway from this visualization?

Gives you a good idea of how much ingredients you need to buy for a given cocktail menu.

  • Is there something you don’t understand in the graphic?

I don't know what 50% of the ingredients are.

Each person that gave me feedback spurred me to make edits that directly took into account the feedback I received. Their feedback also helped me to think about others perceptions of my chart, which brought about edits of my own.

I believe this chart would be most interesting to those who are bartenders or cocktail enthusiast, however I still wanted to make a chart that was accessible to the broadest group of people possible.

Resources

My primary resource was the Udacity forums

Past that I used a lot of webpages that helped me out: http://nestacms.com/docs/creating-content/markdown-cheat-sheet

http://assemble.io/docs/Cheatsheet-Markdown.html PMSI-AlignAlytics/dimple#156 http://learnjsdata.com/read_data.html http://dimplejs.org/ http://dimplejs.org/adhoc_viewer.html?id=adhoc_bar_custom_tooltips http://stackoverflow.com/questions/17791926/how-to-rotate-x-axis-text-in-dimple-js http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf http://app.raw.densitydesign.org/#%2F

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<style>
h2.mainhead {
text-align: center;
font-weight: bold;
}
h2.subhead {
text-align: center;
font-weight: normal;
}
text.dimple-axis.dimple-title {
font-size: 20px !important;
}
g.dimple-axis > g.tick > text{
font-size: 12px !important;
}
body {
width: 100vw;
height: 100vh;
text-align: center;
}
#container {
margin: auto;
}
</style>
<script type="text/javascript">
function draw(data) {
/*
D3.js setup code
*/
"use strict";
var margin = 500,
width = 1400 - margin,
height = 600 - margin;
d3.select('body ')
.append('h2')
.attr("class", "mainhead")
.text("Union Lodge #1 (Liquid) Cocktail Ingredients");
d3.select('body ')
.append('h2')
.attr("class", "subhead")
.text("by total volume of all menu cocktails");
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
myChart.setMargins("60px", "30px", "110px", "200px");
var x = myChart.addCategoryAxis("x", "Ingredient");
myChart.addMeasureAxis("y", "mL");
myChart.addSeries(["Type"]);
var mySeries = myChart.addSeries('Cocktail', dimple.plot.bar);
myChart.draw();
/*rotating the x labels to a 45 degree angle*/
x.shapes.selectAll("text").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(0, 15) rotate(-45)";
});
/*adjusting defaults of the tooltip*/
mySeries.getTooltipText = function(e) {
/*console.log(e);*/
return [
"Cocktail: " + e.aggField[0],
"Ingredient: " + e.x,
"mL: " + e.height,
];
};
};
</script>
</head>
<body>
<script type="text/javascript">
d3.csv("Union_Lodge_Cocktail_Ingredients.csv", draw)
</script>
</body>
</html>
Raw
Union_Lodge_Cocktail_Ingredients.csv
Cocktail Ounces mL Ingredient Type
Absinthe Cocktail 1.5 45 Absinthe Absinthe
Amaretto Sour 1.5 45 Amaretto Base
Sherry Cobbler 0.5 15 Amaretto Base
Amaretto Sour 0.5 15 Angostura Bitter
Japanese Cocktail 0.5 15 Angostura Bitter
Milwaukee 0.5 15 Angostura Bitter
Old Fashioned 0.125 3.75 Angostura Bitter
Allegheny 0.5 15 Aperol Apertif
Ramos Gin Fizz 0.05 1.5 Berry Tincture Tincture
Allegheny 0.75 22.5 Blackberry Liquor Modifier
Rob Roy 0.5 15 Blanc Vermouth Vermouth
Amaretto Sour 0.75 22.5 Bourbon Base
Southern Mint Julep 2 60 Bourbon Base
Brandy Crusta 1.5 45 Brandy Base
Milwaukee 2 60 Brandy Base
Northern Mint Julep 1.5 45 Brandy Base
Sherry Cobbler 0.5 15 Brandy Base
Sazerac 0.25 7.5 Brown Gomme Syrup
Red White and Blue Blazer 1 30 Cinammon Syrup Syrup
Japanese Cocktail 2 60 Cognac Base
Saratoga 1 30 Cognac Base
Brandy Crusta 0.5 15 Cointreau Modifier
Knickerbocker 0.75 22.5 Cointreau Modifier
Ramos Gin Fizz 2 60 Cream Other
Allegheny 0.75 22.5 Dry Vermouth Vermouth
Rob Roy 0.5 15 Dry Vermouth Vermouth
Amaretto Sour 0.5 15 Egg White Other
Ramos Gin Fizz 0.5 15 Egg White Other
Gin and Seasonal Tonic 2 60 Gin Base
Gin and Tonic 2 60 Gin Base
Martinez 2 60 Gin Base
Ramos Gin Fizz 2 60 Gin Base
Tom Collins 2 60 Gin Base
Absinthe Cocktail 0.25 7.5 Green Chartreuse Modifier
Northern Mint Julep 0.5 15 Green Tea Syrup Syrup
Rum and Green Tea Tonic 0.75 22.5 Green Tea Tonic Syrup
Manhattan 0.2 6 House Bitters Bitter
Rob Roy 0.125 3.75 Jerry Thomas Bitters Bitter
Amaretto Sour 0.75 22.5 Lemon Juice Citrus
Brandy Crusta 0.75 22.5 Lemon Juice Citrus
Knickerbocker 0.5 15 Lemon Juice Citrus
Ramos Gin Fizz 0.75 22.5 Lemon Juice Citrus
Tom Collins 0.75 22.5 Lemon Juice Citrus
Absinthe Cocktail 0.25 7.5 Lemon Rhubarb Bitters Bitter
Brandy Crusta 0.5 15 Luxardo Modifier
Martinez 0.25 7.5 Luxardo Modifier
Martinez 0.5 15 Orange Bitters Bitter
Old Fashioned 0.05 1.5 Orange Bitters Bitter
Tom Collins 0.5 15 Orange Bitters Bitter
Ramos Gin Fizz 0.1 3 Orange Flower Water Other
Sherry Cobbler 0.5 15 Orange Juice Citrus
Japanese Cocktail 0.5 15 Orgeat Syrup
Sazerac 0.125 3.75 Peychaud's Bitter
Rob Roy 0.1 3 Port Port
Southern Mint Julep 0.075 2.25 Rose Water Other
Tom Collins 0.75 22.5 Rosemary Ginger Syrup Syrup
Knickerbocker 1.5 45 Rum Base
Northern Mint Julep 0.5 15 Rum Base
Red White and Blue Blazer 1 30 Rum Base
Red White and Blue Blazer 1 30 Rum Base
Rum and Green Tea Tonic 2 60 Rum Base
Allegheny 1.5 45 Rye Base
Manhattan 2 60 Rye Base
Old Fashioned 2 60 Rye Base
Red White and Blue Blazer 1 30 Rye Base
Saratoga 1 30 Rye Base
Sazerac 2 60 Rye Base
Rob Roy 2 60 Scotch Base
Gin and Seasonal Tonic 0.75 22.5 Seasonal Tonic Syrup
Sherry Cobbler 2 60 Sherry Sherry
Amaretto Sour 0.25 7.5 Simple Syrup Syrup
Knickerbocker 0.5 15 Simple Syrup Syrup
Milwaukee 0.25 7.5 Simple Syrup Syrup
Ramos Gin Fizz 0.75 22.5 Simple Syrup Syrup
Southern Mint Julep 0.5 15 Simple Syrup Syrup
Gin and Seasonal Tonic 3 90 Carbonated Water Soda
Gin and Tonic 3 90 Carbonated Water Soda
Milwaukee 0.25 7.5 Carbonated Water Soda
Old Fashioned 0.25 7.5 Carbonated Water Soda
Ramos Gin Fizz 1 30 Sparkling Mineral Water Seltzer
Rum and Green Tea Tonic 3 90 Carbonated Water Soda
Tom Collins 1 30 Carbonated Water Soda
Manhattan 1 30 Sweet Vermouth Vermouth
Martinez 1 30 Sweet Vermouth Vermouth
Saratoga 1 30 Sweet Vermouth Vermouth
Gin and Tonic 0.75 22.5 Tonic Syrup
Ramos Gin Fizz 0.05 1.5 Vanilla Tincture Tincture
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment