// 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") });