30:T62d,{ const cumsum = d3.cumsum(data, value), bins = bin().value((d, i) => cumsum[i])(data); const svg = d3.create("svg").attr("viewBox", [0, -30, width, 100]), x = d3 .scaleLinear() .domain([0, d3.max(bins, d => d.x1)]) .rangeRound([1, width - 1 - 4 * (bins.length - 1)]); let shiftX = 0; const legend = svg .append("g") .selectAll("path") .data(bins); legend .join("path") .attr( "d", (d, i) => `M${x(d.x0) + 1 + 4 * i},-10 L${x(d.x1) - 1 + 4 * i},-10` ) .attr("stroke", "black") .attr("fill", "none"); legend .join("circle") .attr("r", 4) .attr( "transform", (d, i) => `translate(${.5 * (x(d.x0) + x(d.x1)) + 4 * i},-10)` ) .attr("fill", (d, i) => color(i)); svg .append("g") .selectAll("g") .data(bins) .join("g") .attr("transform", (d, i) => `translate(${4 * i}, 0)`) .style("fill", (d, i) => color(i)) .selectAll("rect") .data(d => d) .join("rect") .style("stroke", "black") .attr("transform", d => { const tr = `translate(${x(shiftX)}, 0)`; shiftX += d[1]; return tr; }) .attr("width", d => x(d[1]) - x(0)) .attr("height", 50); shiftX = 0; svg .append("g") .attr("transform", "translate(0,68)") .selectAll("text") .data(bins.flat()) .join("text") .attr("text-anchor", "middle") .text(d => d[0]) .attr("transform", d => { const tr = `translate(${x(shiftX + d[1] / 2)}, 0)`; shiftX += d[1]; return tr; }); return svg.node(); }31:T740,{ const bins = binCumulative().value(value)(data); const svg = d3.create("svg").attr("viewBox", [0, -30, width, 100]), x = d3 .scaleLinear() .domain([0, d3.max(bins, d => d.x1)]) .rangeRound([1, width - 1 - 4 * bins.length]); let shiftG = 0; let shiftX = 0; const legend = svg .append("g") .selectAll("path") .data(binsCumsum); legend .join("path") .attr( "d", (d, i) => `M${x(d.x0) + 1 + 4 * i},-10 L${x(d.x1) - 1 + 4 * i},-10` ) .attr("stroke", "black") .attr("fill", "none"); legend .join("circle") .attr("r", 4) .attr( "transform", (d, i) => `translate(${.5 * (x(d.x0) + x(d.x1)) + 4 * i},-10)` ) .attr("fill", (d, i) => color(i)); const weights = d3.local(); svg .append("g") .selectAll("g") .data(binsCumsum) .join("g") .attr("transform", (d, i) => `translate(${4 * i}, 0)`) .style("fill", (d, i) => color(i)) .each(function(d) { weights.set(this, d.weights); }) .selectAll("rect") .data(d => d) .join("rect") .style("stroke", "black") .attr("transform", function(d, i) { const tr = `translate(${x(shiftX)}, 0)`; shiftX += weights.get(this)[i]; return tr; }) .attr("width", function(d, i) { return x(weights.get(this)[i]) - x(0); }) .attr("height", 50); shiftX = 0; const flatweights = binsCumsum.map(d => d.weights).flat(); svg .append("g") .attr("transform", "translate(0,68)") .selectAll("text") .data(binsCumsum.flat()) .join("text") .attr("text-anchor", "middle") .text(d => d[0]) .attr("transform", function(_, i) { const weight = flatweights[i]; const tr = `translate(${x(shiftX + weight / 2)}, 0)`; shiftX += weight; return tr; }); return svg.node(); }32:T9c2,function binCumulative() { const identity = d => d, constant = c => () => c, { slice } = Array.prototype, { bisect, cumsum, extent, range, tickStep } = d3, sturges = d3.thresholdSturges; var value = identity, domain = extent, threshold = sturges; function histogram(data) { if (!Array.isArray(data)) data = Array.from(data); var i, n = data.length, x, values = new Array(n); for (i = 0; i < n; ++i) { values[i] = value(data[i], i, data); } const sums = cumsum(values); var xz = domain(sums), x0 = xz[0], x1 = xz[1], tz = threshold(sums, x0, x1); // Convert number of thresholds into uniform thresholds. if (!Array.isArray(tz)) { tz = tickStep(x0, x1, tz); tz = range(Math.ceil(x0 / tz) * tz, x1, tz); // exclusive } // Remove any thresholds outside the domain. var m = tz.length; while (tz[0] <= x0) tz.shift(), --m; while (tz[m - 1] > x1) tz.pop(), --m; var bins = new Array(m + 1); // Initialize bins. for (i = 0; i <= m; ++i) { let bin = (bins[i] = []); bin.x0 = i > 0 ? tz[i - 1] : x0; bin.x1 = i < m ? tz[i] : x1; bin.weights = []; } bins[0].x0 = 0; // Assign data to bins by sums let cur = 0, bin = bins[cur]; // currentBin for (i = 0; i < n; ++i) { let x = sums[i], v = values[i]; let split = false; while (x > bin.x1) { let diff = x - bin.x1; const weight = v - diff; if (weight > 0) { bin.push(data[i]); bin.weights.push(weight); split = true; } v = diff; bin = bins[++cur]; } const weight = v; if (!split || weight > 0) { bin.push(data[i]); bin.weights.push(weight); } } return bins; } histogram.value = function(_) { return arguments.length ? ((value = typeof _ === "function" ? _ : constant(_)), histogram) : value; }; histogram.domain = function(_) { return arguments.length ? ((domain = typeof _ === "function" ? _ : constant([_[0], _[1]])), histogram) : domain; }; histogram.thresholds = function(_) { return arguments.length ? ((threshold = typeof _ === "function" ? _ : Array.isArray(_) ? constant(slice.call(_)) : constant(_)), histogram) : threshold; }; return histogram; }33:T820,// https://github.com/d3/d3-array/blob/master/src/bin.js function bin() { const identity = d => d, constant = c => () => c, { slice } = Array, { extent, range, tickStep, bisect } = d3, sturges = d3.thresholdSturges; var value = identity, domain = extent, threshold = sturges; function histogram(data) { if (!Array.isArray(data)) data = Array.from(data); var i, n = data.length, x, values = new Array(n); for (i = 0; i < n; ++i) { values[i] = value(data[i], i, data); } var xz = domain(values), x0 = xz[0], x1 = xz[1], tz = threshold(values, x0, x1); // Convert number of thresholds into uniform thresholds. if (!Array.isArray(tz)) { tz = tickStep(x0, x1, tz); tz = range(Math.ceil(x0 / tz) * tz, x1, tz); // exclusive } // Remove any thresholds outside the domain. var m = tz.length; while (tz[0] <= x0) tz.shift(), --m; while (tz[m - 1] > x1) tz.pop(), --m; var bins = new Array(m + 1), bin; // Initialize bins. for (i = 0; i <= m; ++i) { bin = bins[i] = []; bin.x0 = i > 0 ? tz[i - 1] : x0; bin.x1 = i < m ? tz[i] : x1; } // Assign data to bins by value, ignoring any outside the domain. for (i = 0; i < n; ++i) { x = values[i]; if (x0 <= x && x <= x1) { bins[bisect(tz, x, 0, m)].push(data[i]); } } return bins; } histogram.value = function(_) { return arguments.length ? ((value = typeof _ === "function" ? _ : constant(_)), histogram) : value; }; histogram.domain = function(_) { return arguments.length ? ((domain = typeof _ === "function" ? _ : constant([_[0], _[1]])), histogram) : domain; }; histogram.thresholds = function(_) { return arguments.length ? ((threshold = typeof _ === "function" ? _ : Array.isArray(_) ? constant(slice.call(_)) : constant(_)), histogram) : threshold; }; return histogram; }34:[] 2e:{"title":"Cumulative binning","cells":[{"id":0,"value":"md`# Cumulative binning`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`We consider a list of objects that have a value (for example, a volume), and we want to distribute them in regular bins. In addition, when an object’s volume overflows the current bin, we want to slice it and spread its value over several bins.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = [[\"A\", 5], [\"B\", 23], [\"C\", 1], [\"D\", 5], [\"E\", 32], [\"F\", 22]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"value = d => d[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`Without slicing, a combination of [d3.cumsum](https://observablehq.com/@d3/d3-cumsum) and [d3.bin](https://github.com/d3/d3-array/blob/master/src/bin.js) can provide bins, but as we see below, they can be too large or too small:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"bins = {\n const cumsum = d3.cumsum(data, value);\n return bin().value((d, i) => cumsum[i])(data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`What we want in this case is to slice the volume of \"B\" into two objects, of respective volumes 15 + 8 = 23, keeping the same total but distributed into bins\n${showbin(0)} and ${showbin(1)}.\n\nSimilarly, \"E\" will be sliced into three parts: one that completes\n${showbin(1)}, one that completely fills up ${showbin(2)},\nand the rest that starts bin ${showbin(3)}.\n\nWith this construction, we have to keep track of the contribution of the sliced events to each of the bins—this is reflected in the _weights_ attribute attached to each bin:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"binsCumsum = binCumulative().value(value)(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Philippe Rivière.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`----\n_boring zone_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"showbin = i =>\n `#${i +\n 1}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"html`${showbin(0)}`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}