Data visualization and analysis at the University of Washington, Seattle.
Public
Edited
Jun 2, 2023
5 forks
Importers
27 stars
Plot.plot({
width: dataWidth + marginLeft + marginRight,
marginLeft,
marginRight,
y: { grid: true },
marks: [
Plot.line(randomWalk(500), { x: 't', y: 'v', stroke: 'steelblue' })
]
})
data = randomWalk(1e6)
// Plot.plot({
// width: dataWidth + marginLeft + marginRight,
// marginLeft,
// marginRight,
// y: { grid: true },
// marks: [
// Plot.line(data, { x: 't', y: 'v', stroke: 'steelblue' })
// ]
// })
Plot.plot({
width: dataWidth + marginLeft + marginRight,
marginLeft,
marginRight,
y: { grid: true },
marks: [
Plot.line(minmaxData, { x: 't', y: 'v', stroke: 'steelblue' })
]
})
minmaxData = minmax(data, dataWidth, 't', 'v')
Plot.plot({
width: dataWidth + marginLeft + marginRight,
marginLeft,
marginRight,
y: { grid: true },
marks: [
Plot.line(m4Data, { x: 't', y: 'v', stroke: 'steelblue' })
]
})
m4Data = m4(data, dataWidth, 't', 'v')
/**
* M4 aggregation algorithm.
* Reduce time series data in a visualization-preserving way.
*/
function m4(
data, // input data
width, // chart width in pixels
time = d => d[0], // time accessor, defaults to [0]
value = d => d[1] // value accessor, defaults to [1]
) {
// update accessors as needed
if (typeof time === 'string') {
const tfield = time;
time = d => d[tfield];
}
if (typeof value === 'string') {
const vfield = value;
value = d => d[vfield];
}
// ensure data is a proper array
data = Array.isArray(data) ? data : Array.from(data);
const n = data.length;
// determine time range
let tmin = time(data[0]);
let tmax = tmin;
for (let i = 0; i < n; ++i) {
const t = time(data[i]);
if (t < tmin) tmin = t;
if (t > tmax) tmax = t;
}
const delta = tmax - tmin;
// map a timestamp to an integer pixel coordinate
const key = t => Math.round(width * (t - tmin) / delta);
// compute min/max time and min/max value (M4!) per pixel column
const agg = Array(width);
for (let i = 0; i < n; ++i) {
const d = data[i];
const t = time(d);
const v = value(d);
const k = key(t);
if (agg[k] == null) {
agg[k] = {
tmin: t, tmin_i: i,
tmax: t, tmax_i: i,
vmin: v, vmin_i: i,
vmax: v, vmax_i: i,
};
} else {
const a = agg[k];
if (t < a.tmin) { a.tmin = t; a.tmin_i = i; }
if (t > a.tmax) { a.tmax = t; a.tmax_i = i; }
if (v < a.vmin) { a.vmin = v; a.vmin_i = i; }
if (v > a.vmax) { a.vmax = v; a.vmax_i = i; }
}
}
// filter original data to extremal (M4) values only
return data.filter((d, i) => {
const t = time(d);
const k = key(t);
const a = agg[k];
return i === a.tmin_i || i === a.tmax_i || i === a.vmin_i || i === a.vmax_i;
});
}
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.