Skip to content

Instantly share code, notes, and snippets.

@nicosommi

nicosommi/.block

Last active August 31, 2016 23:41
Show Gist options
  • Save nicosommi/bda188771fa6d79999894142ef8014a8 to your computer and use it in GitHub Desktop.
Save nicosommi/bda188771fa6d79999894142ef8014a8 to your computer and use it in GitHub Desktop.
Download ZIP
warehouse poc
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.33/browser.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {}
div {
}
</style>
</head>
<body>
<div id="row">
<span id="divNotebooks"></span>
<span id="divIphones"></span>
<span id="divMacbooks"></span>
<span id="divAndroids"></span>
</div>
<script src="script.js"></script>
</body>
Raw
items.json
{
"items": [
{ "name": "N01", "type": "notebook", "status": "available"},
{ "name": "N02", "type": "notebook", "status": "available"},
{ "name": "N03", "type": "notebook", "status": "available"},
{ "name": "N04", "type": "notebook", "status": "taken"},
{ "name": "N05", "type": "notebook", "status": "taken"},
{ "name": "N06", "type": "notebook", "status": "taken"},
{ "name": "N07", "type": "notebook", "status": "taken"},
{ "name": "N08", "type": "notebook", "status": "taken"},
{ "name": "N09", "type": "notebook", "status": "available"},
{ "name": "N10", "type": "notebook", "status": "available"},
{ "name": "N11", "type": "notebook", "status": "taken"},
{ "name": "N12", "type": "notebook", "status": "taken"},
{ "name": "N13", "type": "notebook", "status": "taken"},
{ "name": "C01", "type": "iphone", "status": "available"},
{ "name": "C02", "type": "iphone", "status": "available"},
{ "name": "C03", "type": "iphone", "status": "available"},
{ "name": "C04", "type": "iphone", "status": "available"},
{ "name": "C05", "type": "iphone", "status": "available"},
{ "name": "C06", "type": "iphone", "status": "taken"},
{ "name": "C07", "type": "iphone", "status": "taken"},
{ "name": "C08", "type": "iphone", "status": "taken"},
{ "name": "C09", "type": "iphone", "status": "taken"},
{ "name": "C10", "type": "iphone", "status": "taken"},
{ "name": "N14", "type": "notebook", "status": "available"},
{ "name": "N15", "type": "notebook", "status": "available"},
{ "name": "C11", "type": "iphone", "status": "taken"},
{ "name": "N16", "type": "notebook", "status": "taken"},
{ "name": "C12", "type": "iphone", "status": "taken"},
{ "name": "C13", "type": "iphone", "status": "available"},
{ "name": "N17", "type": "notebook", "status": "available"},
{ "name": "M01", "type": "macbook", "status": "taken"},
{ "name": "M02", "type": "macbook", "status": "taken"},
{ "name": "A01", "type": "android", "status": "available"},
{ "name": "A02", "type": "android", "status": "available"},
{ "name": "A03", "type": "android", "status": "available"},
{ "name": "A04", "type": "android", "status": "available"},
{ "name": "A05", "type": "android", "status": "available"},
{ "name": "A06", "type": "android", "status": "available"},
{ "name": "A07", "type": "android", "status": "available"},
{ "name": "A08", "type": "android", "status": "available"},
{ "name": "A09", "type": "android", "status": "available"},
{ "name": "A10", "type": "android", "status": "available"}
]
}
Raw
script.js
// Feel free to change or delete any of the code you see in this editor!
function showInventoryStatus(containerId, allItems, type) {
var w = 200;
var h = 300;
var r = 50;
var root = d3.select("#" + containerId)
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g");
var items = allItems.filter(function(i) { return i.type === type })
.sort(function(l, r) {
if(l.status==="available"
&& r.status ==="taken")
return -1;
else if(r.status==="available"
&& l.status ==="taken")
return 1;
else
return 0;
});
var color = d3.scale.ordinal()
.domain([0, items.length])
.range(['#a50026','#d73027','#f46d43','#fdae61','#fee08b','#ffffbf','#d9ef8b','#a6d96a','#66bd63','#1a9850','#006837'])
// .interpolate(t => t);
var arc = d3.svg.arc()
.innerRadius(r/2)
.outerRadius(r)
.cornerRadius(r/10);
var pie = d3.layout.pie()
.sort(null)
.value(function() { return 1; });
var itemsAvailable = items.filter(function (item) {
return item.status === "available";
}).length
root.append("text")
.text(type + " (" + itemsAvailable + "/" + items.length + ")")
.attr("font-family", "sans-serif")
.attr("x", 0)
.attr("y", (h/2) - (r+10));
var g = root.selectAll("g.arcs")
.data(pie(items))
.enter()
.append("g")
.attr("class", "arcs")
.attr("transform", "translate("+(w/4)+", "+(h/2)+")");
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
if(d.data.status==="taken")
return "gray";
else
return color(i);
});
}
d3.json("items.json", function(error, d) {
showInventoryStatus("divNotebooks", d.items, "notebook");
showInventoryStatus("divIphones", d.items, "iphone");
showInventoryStatus("divMacbooks", d.items, "macbook");
showInventoryStatus("divAndroids", d.items, "android")
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment