Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
[
{date: new Date(2012, 0, 1), precipitation: 0},
{date: new Date(2012, 0, 2), precipitation: 10.9},
{date: new Date(2012, 0, 3), precipitation: 0.8},
{date: new Date(2012, 0, 4), precipitation: 20.3}
]
({
date: Float64Array.of(1325404800000, 1325491200000, 1325577600000, 1325664000000),
precipitation: Float64Array.of(0, 10.9, 0.8, 20.3)
})
date
precipitation
objects = Array.from({length}, (_, i) => ({
date: date[i],
precipitation: precipitation[i]
}))
({
date: objects.map(d => d.date),
precipitation: Float64Array.from(objects, d => d.precipitation)
})
function take(values, index) {
return values.constructor.from(index, i => values[i]);
}
take(date, [0, 1, 2])
take(precipitation, [0, 1, 2])
take(date, [2, 1, 2, 1])
function taker(index) {
return values => values.constructor.from(index, i => values[i]);
}
[date, precipitation].map(taker([0, 1, 2]))
function get(i) {
return values => values[i];
}
[date, precipitation].map(get(0))
function range(start, stop, step) {
const n = arguments.length;
start = +start, stop = +stop, step = n < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
return Uint32Array.from({length: Math.ceil((stop - start) / step)}, (_, i) => start + i * step);
}
range(length)
objects.filter(d => d.precipitation > 50)
precipitation.filter(d => d > 50)
take(date, range(length).filter(i => precipitation[i] > 50))
function filter(values, test) {
const I = [], n = values.length;
for (let i = 0; i < n; ++i) {
if (test(values[i], i, values)) {
I.push(i);
}
}
return I;
}
function filteri(values, index, test) {
const I = [], n = index.length;
for (let i = 0; i < n; ++i) {
const j = index[i];
if (test(values[j], j, values)) {
I.push(j);
}
}
return I;
}
take(date, filter(precipitation, d => d > 50))
[date, precipitation].map(taker(filter(precipitation, d => d > 50)))
[date, precipitation].map(taker(filter(date, d => d.getMonth() === 11 && d.getDate() === 25)))
objects.filter(d => d.date.getMonth() === 11 && d.date.getDate() === 25)
precipitation.map(d => d * 0.0393701)
Uint16Array.from(precipitation, d => d * 0.0393701)
objects.map(d => ({
date: d.date,
precipition: d.precipitation * 0.0393701
}))
function slice(...options) {
return array => array.slice(...options);
}
[date, precipitation].map(slice(-10))
function reverse(array) {
return array.slice().reverse();
}
[date, precipitation].map(slice(-10)).map(reverse)
function sort(values, order = ascending) {
return range(values.length).sort((i, j) => order(values[i], values[j]));
}
function sorti(values, index, order = ascending) {
return index.slice().sort((i, j) => order(values[i], values[j]));
}
function ascending(a, b) {
return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}
function descending(a, b) {
return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
}
[date, precipitation].map(taker(sort(precipitation, descending).slice(0, 10)))
objects.reduce((p, d) => (d = +d.precipitation) ? p + d : p, 0)
precipitation.reduce((p, d) => (d = +d) ? p + d : p, 0)
function sum(values) {
let sum = 0;
for (let i = 0, n = values.length; i < n; ++i) {
const v = +values[i];
if (v) sum += v;
}
return sum;
}
function sumi(values, index) {
let sum = 0;
for (let i = 0, n = index.length; i < n; ++i) {
const v = +values[index[i]];
if (v) sum += v;
}
return sum;
}
sum(precipitation)
sum(objects.map(d => d.precipitation))
precipitation.length
function count(values) {
let count = 0;
for (let i = 0, n = values.length; i < n; ++i) {
const v = +values[i];
if (v === v) ++count;
}
return count;
}
function counti(values, index) {
let count = 0;
for (let i = 0, n = index.length; i < n; ++i) {
const v = +values[index[i]];
if (v === v) ++count;
}
return count;
}
count(precipitation)
[date, precipitation].map(count)
function mean(values) {
return sum(values) / count(values);
}
function meani(values, index) {
return sumi(values, index) / counti(values, index);
}
mean(precipitation)
mean(precipitation.map(d => d > 0))
[temp_min, temp_max].map(mean)
objects.reduce((p, d) => d.precipitation > p.precipitation ? d : p)
precipitation.reduce((p, d) => d > p ? d : p)
function max(values) {
let maxIndex, maxValue = -Infinity;
for (let i = 0, n = values.length; i < n; ++i) {
const v = +values[i];
if (v > maxValue) maxIndex = i, maxValue = v;
}
return maxIndex;
}
function maxi(values, index) {
let maxIndex, maxValue = -Infinity;
for (let i = 0, n = index.length; i < n; ++i) {
const v = +values[index[i]];
if (v > maxValue) maxIndex = index[i], maxValue = v;
}
return maxIndex;
}
[date, precipitation].map(get(max(precipitation)))
precipitation.reduce((p, d) => p + (d === 0), 0)
function min(values) {
let minIndex, minValue = Infinity;
for (let i = 0, n = values.length; i < n; ++i) {
const v = +values[i];
if (v < minValue) minIndex = i, minValue = v;
}
return minIndex;
}
function mini(values, index) {
let minIndex, minValue = Infinity;
for (let i = 0, n = index.length; i < n; ++i) {
const v = +values[index[i]];
if (v < minValue) minIndex = index[i], minValue = v;
}
return minIndex;
}
[date, temp_min].map(get(min(temp_min)))
[date, temp_max].map(get(max(temp_max)))
function quantile(values, p) {
values = Float64Array.from(values).filter(number).sort(ascending);
const n = values.length;
if (!n) return NaN;
if (!((p = +p) > 0) || n < 2) return values[0];
if (p >= 1) return values[n - 1];
const i = (n - 1) * p;
const i0 = Math.floor(i);
const v0 = values[i0];
const v1 = values[i0 + 1];
return v0 + (v1 - v0) * (i - i0);
}
function quantilei(values, index, p) {
return quantile(take(values, index), p);
}
quantile(precipitation, 0.75)
function median(values) {
return quantile(values, 0.5);
}
function mediani(values, index) {
return quantilei(values, index, 0.5);
}
median(precipitation)
function top(values, k = 1, order = ascending) {
return range(values.length)
.sort((i, j) => order(values[j], values[i]))
.slice(0, (k = +k) > 0 ? k : 0);
}
function topi(values, index, k = 1, order = ascending) {
return index.slice()
.sort((i, j) => order(values[j], values[i]))
.slice(0, (k = +k) > 0 ? k : 0);
}
[date, precipitation].map(taker(top(precipitation, 5)))
function bottom(values, k = 1, order = ascending) {
return range(values.length)
.sort((i, j) => order(values[i], values[j]))
.slice(0, (k = +k) > 0 ? k : 0);
}
function bottomi(values, index, k = 1, order = ascending) {
return index.slice()
.sort((i, j) => order(values[i], values[j]))
.slice(0, (k = +k) > 0 ? k : 0);
}
[date, temp_min].map(taker(bottom(temp_min, 5)))
function group(keys, value) {
const map = new Map;
for (let i = 0, n = keys.length; i < n; ++i) {
let k = keys[i], v = map.get(k);
if (v === undefined) map.set(k, [i]);
else v.push(i);
}
if (value !== undefined) {
for (const [key, index] of map) {
map.set(key, value(index));
}
}
return map;
}
group(date.map(d => d.getFullYear()))
group(date.map(d => d.getFullYear()), i => sumi(precipitation, i))
group(date.map(d => d.getMonth()), i => meani(precipitation, i))
group(date.map(d => d.getMonth()), i => mediani(precipitation, i))
group(date.map(d => d.getFullYear()), i => counti(precipitation, i))
group(date.map(d => d.getFullYear()), i => [date, temp_min].map(get(mini(temp_min, i))))
group(date.map(d => d.getFullYear()), i => [date, precipitation].map(get(maxi(precipitation, i))))
group(date.map(d => d.getFullYear()), i => take(date, topi(precipitation, i, 5)))
group(date.map(d => d.getFullYear()), i => take(date, bottomi(temp_min, i, 5)))
identity = x => x
number = v => !isNaN(v)
length = date.length
date = data.date
precipitation = data.precipitation
temp_max = data.temp_max
temp_min = data.temp_min
wind = data.wind
data = fetch("https://raw.githubusercontent.com/vega/vega-datasets/530b2f02ebcac4539d292d97da0b57f4d1fcf177/data/seattle-weather.csv")
.then(response => response.text())
.then(csv)
.then(([date, precipitation, temp_max, temp_min, wind, weather]) => {
const length = date.length - 1;
return {
date: Array.from({length}, (_, i) => new Date(date[i + 1])),
precipitation: Float64Array.from({length}, (_, i) => +precipitation[i + 1]),
temp_max: Float64Array.from({length}, (_, i) => +temp_max[i + 1]),
temp_min: Float64Array.from({length}, (_, i) => +temp_min[i + 1]),
wind: Float64Array.from({length}, (_, i) => +wind[i + 1])
};
})
csv = {
const EOL = Symbol("EOL");
const EOF = Symbol("EOF");
const QUOTE = 34;
const NEWLINE = 10;
const RETURN = 13;
function dsv(DELIMITER) {
return function(text) {
const columns = [];
let N = (text = text + "").length;
let I = 0; // current character index
let n = 0; // current line number
let k = 0; // current column number
let t; // current token
let eof = N <= 0; // current token followed by EOF?
let eol = false; // current token followed by EOL?
// Strip the trailing newline.
if (text.charCodeAt(N - 1) === NEWLINE) --N;
if (text.charCodeAt(N - 1) === RETURN) --N;
function token() {
if (eof) return EOF;
if (eol) return eol = false, EOL;
// Unescape quotes.
var i, j = I, c;
if (text.charCodeAt(j) === QUOTE) {
while (I++ < N && text.charCodeAt(I) !== QUOTE || text.charCodeAt(++I) === QUOTE);
if ((i = I) >= N) eof = true;
else if ((c = text.charCodeAt(I++)) === NEWLINE) eol = true;
else if (c === RETURN) { eol = true; if (text.charCodeAt(I) === NEWLINE) ++I; }
return text.slice(j + 1, i - 1).replace(/""/g, "\"");
}
// Find next delimiter or newline.
while (I < N) {
if ((c = text.charCodeAt(i = I++)) === NEWLINE) eol = true;
else if (c === RETURN) { eol = true; if (text.charCodeAt(I) === NEWLINE) ++I; }
else if (c !== DELIMITER) continue;
return text.slice(j, i) || undefined;
}
// Return last token before EOF.
return eof = true, text.slice(j, N) || undefined;
}
while ((t = token()) !== EOF) {
while (t !== EOL && t !== EOF) {
(columns[k] = (columns[k] || new Array(n)))[n] = t;
t = token();
++k;
}
k = 0;
++n;
}
return columns;
};
}
return dsv(",".charCodeAt(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.
