30:Tc5f,svg = { const w = width, h = 600, svg = d3.select(DOM.svg(w, h)), margin = { top: 20, right: 30, bottom: 30, left: 60 }; var x = function(d) { return x1(collateOn(d)); }; var x1 = d3 .scaleBand() .domain( collateOn.range( collateOn.offset(collateOn(data.startDate), -1), data.deadline ) ) .rangeRound([margin.left, w - margin.right]); var y = d3 .scaleLinear() .domain([stackMin(data), stackMax(data)]) .rangeRound([h - margin.bottom, margin.top]); var z = d3.scaleOrdinal(d3.schemeCategory10); var stack = svg .append("g") .attr("id", "barGroup") .selectAll("g") .data(data.heights) .enter() .append("g") .attr("title", tip); tippy(stack.nodes(), { allowTitleHTML: true, arrow: true, placement: "bottom", duration: 0, followCursor: true }); function tip(d, i) { var s = "

"; s += "" + d3.timeFormat("%b %d")(d.date) + ""; if (data.deltas[i].completed) { s += '

' + data.deltas[i].completed + "

"; } if (data.deltas[i].current) { s += '

' + data.deltas[i].current + "

"; } if (data.deltas[i].new) { s += '

' + data.deltas[i].new + "

"; } s += "

"; return s; } // Completed stack .append("rect") .attr("width", x1.bandwidth()) .attr("x", function(d) { return x(d.date) - x1.bandwidth() / 2; }) .attr("y", function(d) { return y(d.completedTop); }) .attr("height", function(d) { return Math.abs(y(d.completedTop) - y(d.completedBottom)); }) .attr("fill", completedColor); // Current stack .append("rect") .attr("width", x1.bandwidth()) .attr("x", function(d) { return x(d.date) - x1.bandwidth() / 2; }) .attr("y", function(d) { return y(d.currentTop); }) .attr("height", function(d) { return Math.abs(y(d.currentTop) - y(d.currentBottom)); }) .attr("fill", currentColor); // New stack .append("rect") .attr("width", x1.bandwidth()) .attr("x", function(d) { return x(d.date) - x1.bandwidth() / 2; }) .attr("y", function(d) { return y(d.newTop); }) .attr("height", function(d) { return Math.abs(y(d.newTop) - y(d.newBottom)); }) .attr("fill", newColor); svg .append("g") .attr("transform", "translate(0," + y(0) + ")") .call( d3 .axisBottom(x1) .ticks(d3.timeWeek.every(4)) .tickFormat(d3.timeFormat("%b %d")) ) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); svg .append("g") .attr("transform", "translate(" + margin.left + ",0)") .call(d3.axisLeft(y)); return svg.node(); }31:T66d,data = { return parseData({ initialPlannedWork: 50, startDate: "2017-11-00T08:15:30-05:00", deadline: "2018-01-01T00:00:00-05:00", deltas: [ { date: "2017-11-01T08:15:30-05:00", new: 0, completed: 3 }, { date: "2017-11-02T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-03T08:15:30-05:00", new: 0, completed: 6 }, { date: "2017-11-04T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-05T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-06T08:15:30-05:00", new: 0, completed: 6 }, { date: "2017-11-07T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-08T08:15:30-05:00", new: 0, completed: 3 }, { date: "2017-11-09T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-10T08:15:30-05:00", new: 0, completed: 9 }, { date: "2017-11-15T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-16T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-17T08:15:30-05:00", new: 0, completed: 8 }, { date: "2017-11-18T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-21T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-22T08:15:30-05:00", new: 4, completed: 0 }, { date: "2017-11-23T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-24T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-25T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-26T08:15:30-05:00", new: 8, completed: 8 }, { date: "2017-11-27T08:15:30-05:00", new: 0, completed: 0 }, { date: "2017-11-28T08:15:30-05:00", new: 0, completed: 0 } ] }); }32:[] 2e:{"title":"Epic Burndown Chart","cells":[{"id":0,"value":"md`# Epic Burndown Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"completedColor = \"green\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"currentColor = \"steelblue\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"newColor = \"red\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"collateOn = d3.timeDay","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function parseData(data) {\n data.startDate = parseTime(data.startDate);\n data.deadline = parseTime(data.deadline);\n data.deltas.forEach(function(d) {\n d.date = parseTime(d.date);\n });\n\n // data.deltas = collateSameTimes(data.deltas, collateOn);\n mapDataToHeights(data);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"function mapDataToHeights(data) {\n let oldBot = 0;\n let oldTop = data.initialPlannedWork;\n data.heights = data.deltas.map(d => {\n var p = {};\n p.date = d.date;\n\n // +------+ <----completedTop\n // | |\n // +------+ <----completedBottom / currentTop\n // | |\n // | |\n // +------+ <----currentBottom / newTop\n // | |\n // +------+ <----newBottom\n\n p.completedTop = oldTop;\n p.completedBottom = oldTop - d.completed;\n p.currentTop = p.completedBottom;\n p.currentBottom = oldBot;\n p.newTop = p.currentBottom;\n p.newBottom = oldBot - d.new;\n\n // carry to next loop\n oldTop = p.currentTop;\n oldBot = p.newBottom;\n\n return p;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"function collateSameTimes(data, timeRange) {\n var r = d3.map();\n data.forEach(d => {\n var flatTime = timeRange.floor(d.date);\n if (r.has(flatTime)) {\n var prev = r.get(flatTime);\n r.set(flatTime, {\n new: prev.new + d.new,\n completed: prev.completed + d.completed\n });\n } else {\n const { date, ...rest } = d;\n r.set(flatTime, rest);\n }\n });\n return r.entries().map(m => ({\n date: m.key,\n new: m.value.new,\n completed: m.value.completed\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"parseTime = d3.timeParse(\"%Y-%m-%dT%H:%M:%S%Z\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"function stackMin(data) {\n return d3.min(data.heights, function(d) {\n return d.newBottom;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function stackMax(data) {\n return d3.max(data.heights, function(d) {\n return d.completedTop;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"tippy = require(\"https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}