Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
group(data, d => d.name)
group([1, 1, 1, 2, 3, 4, 4, 2], d => d & 1)
group([1, 1, 1, 2, 3, 4, 4, 2])
group = {
const reduce = (p, v) => (p.push(v), p);
const init = () => [];
return function group(values, keyof) {
return groupReduce(values, keyof, reduce, init);
};
}
groupMap(data, d => d.name, d => d.value)
groupMap = {
const reduce = valueof => (p, ...args) => (p.push(valueof(...args)), p);
const reduceIdentity = (p, v) => (p.push(v), p);
const init = () => [];
return function groupMap(values, keyof, valueof) {
return groupReduce(
values,
keyof,
valueof === undefined ? reduceIdentity : reduce(valueof),
init
);
};
}
groupReduce(
data,
d => d.name, // key
(p, v) => p + v.value, // reduce
() => 0 // initialize
)
function groupReduce(values, keyof = identity, reduce, init = noop) {
const map = new Map();
let index = -1;
for (const value of values) {
const key = keyof(value, ++index, values);
map.set(key, reduce(map.has(key) ? map.get(key) : init(key), value, index, values));
}
return map;
}
groupSum(data, d => d.name, d => d.value)
groupSum = {
const reduce = valueof => (p, ...args) => p + valueof(...args);
const reduceIdentity = (p, v) => p + v;
const init = () => 0;
return function groupSum(values, keyof, valueof) {
return groupReduce(
values,
keyof,
valueof === undefined ? reduceIdentity : reduce(valueof),
init
);
};
}
groupMin(data, d => d.name, d => d.value)
groupMin = {
const reduce = valueof => (p, ...args) => Math.min(p, valueof(...args));
const reduceIdentity = (p, v) => Math.min(p, v);
const init = () => Infinity;
return function groupMin(values, keyof, valueof) {
return groupReduce(
values,
keyof,
valueof === undefined ? reduceIdentity : reduce(valueof),
init
);
};
}
groupMax(data, d => d.name, d => d.value)
groupMax = {
const reduce = valueof => (p, ...args) => Math.max(p, valueof(...args));
const reduceIdentity = (p, v) => Math.max(p, v);
const init = () => -Infinity;
return function groupMax(values, keyof, valueof) {
return groupReduce(
values,
keyof,
valueof === undefined ? reduceIdentity : reduce(valueof),
init
);
};
}
groupCount(data, d => d.date.toISOString())
groupCount = {
const reduce = p => p + 1;
const init = () => 0;
return function groupCount(values, keyof) {
return groupReduce(values, keyof, reduce, init);
};
}
groupSort(data, d => d.name, (a, b) => b.value - a.value)
function groupSort(values, keyof, compare = ascending) {
return new Map(Array.from(group(values, keyof), ([key, values]) => [key, values.sort(compare)]));
}
groupSelect(data, d => d.name, 2, (a, b) => b.value - a.value)
function groupSelect(values, keyof, k = 1, compare = ascending) {
return new Map(Array.from(group(values, keyof), ([key, values]) => {
quickselect(values, k, undefined, undefined, compare);
if (values.length > k) values.length = k;
return [key, values];
}));
}
function identity(x) { return x; }
function noop() {}
function ascending(a, b) { return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN; }
data = (await d3.json("https://raw.githubusercontent.com/vega/vega-lite/b2338345973f4717979ad9140c06ee0970c20116/data/unemployment-across-industries.json")).map(({series, count, date}) => ({name: series, value: count, date: new Date(date)}))
quickselect = require("quickselect@2")
d3 = require("d3@5")
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.
