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));
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.