Skip to content

Instantly share code, notes, and snippets.

@guioconnor

guioconnor/.block

Last active December 6, 2018 22:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guioconnor/4a08e6f41161eb016f1cd2bb81f8a16e to your computer and use it in GitHub Desktop.
Save guioconnor/4a08e6f41161eb016f1cd2bb81f8a16e to your computer and use it in GitHub Desktop.
Download ZIP
Types of Coffee
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:50px;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var ingredients = {
"Espresso": {
color: "brown"
},
"Milk Foam": {
color: "lightGreen"
},
"Wipped Cream": {
color: "LightSeaGreen"
},
"Ice": {
color: "white"
},
"Cold Milk Foam": {
color: "lightGreen"
},
"Chocolate Powder": {
color: "SaddleBrown"
}
}
var data = [
{
name: "Espressso",
totalParts: 5,
ingredients: [{
name: "Espresso",
parts: 2,
}]
}, {
name: "Espresso Machiatto",
totalParts: 5,
ingredients: [{
name: "Espresso",
parts: 2,
}, {
name: "Milk Foam",
parts: 1,
}]
}, {
name: "Espresso con Panna",
totalParts: 5,
ingredients: [{
name: "Espresso",
parts: 2,
}, {
name: "Wipped Cream",
parts: 1,
}]
}, {
name: "Freddo",
totalParts: 5,
ingredients: [{
name: "Espresso",
parts: 2,
}, {
name: "Ice",
parts: 2,
}, {
name: "Cold Milk Foam",
parts: 1,
}]
}, {
name: "Marocchino",
totalParts: 5,
ingredients: [{
name: "Espresso",
parts: 2,
}, {
name: "Chocolate Powder",
parts: 1,
}, {
name: "Milk Foam",
parts: 1,
}]
}, {
name: "Stretto",
totalParts: 5,
ingredients: [{
name: "Espresso",
parts: 1,
}]
}
]
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var cup = svg
.append("g").selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "cup")
.attr("transform", function(d, i) { return "translate(" + i * 120 + ",0)"; });
cup
.selectAll("rect")
.data((coffee => {
return coffee.ingredients
}))
.enter()
.append("rect")
.attr("class", "ingredient")
.attr("width", 100)
.attr("height", d => 20 * d.parts)
.attr("y", (d, i) => {
console.log(d, i)
return 100 - i * 20;
})
.attr("fill", d => ingredients[d.name].color)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment