data = [["A", 5], ["B", 23], ["C", 1], ["D", 5], ["E", 32], ["F", 22]]
value = d => d[1]
bins = {
const cumsum = d3.cumsum(data, value);
return bin().value((d, i) => cumsum[i])(data);
}
binsCumsum = binCumulative().value(value)(data)
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;
}
d3 = require("d3@5", "d3-array@2")
import { checkbox } from "@jashkenas/inputs"
color = d3.scaleOrdinal(d3.schemeCategory10)
showbin = i =>
`<span style="color:white;background:${color(i)};padding:0 4px;">#${i +
1}</span>`
html`${showbin(0)}`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
