I'm a PhD student interested in data visualization, computer graphics, biology, and cancer.
// Compute the point size, in device pixels
function pointSizeDevicePixels(context, props) {
// We compute in 2D homogeneous coordinates (a mat3) so that we can obtain the y range
// from the view matrix, but we could obtain it through any means.
const yrange = 2.0 / context.view3[4];
// The height as a fraction of the current y range, then converted to device pixels
const heightFraction = props.pointYAxisSize / yrange;
const deviceSize = heightFraction * context.viewportHeight;
// We clamp on the small end by the device pixel size so that the points are limited
// by the physical pixel size, but on the large end by CSS pixels so that they have
// a consistent size for everyone.
return clamp(
deviceSize,
props.minimumPointDeviceSize,
props.maximumPointScreenSize * context.pixelRatio
);
}
function pointOpacity(context, props) {
// We use the above function for the point size. This means we can plug in any function,
// even nonlinear, as long as we compute the opacity correctly.
var p = pointSizeDevicePixels(context, props);
// Compute the x and y range from the view matrix, though these could come from any source
const X = 2.0 / context.view3[0];
const Y = 2.0 / context.view3[4];
const X0 = props.initialAxisDimensions[0];
const Y0 = props.initialAxisDimensions[1];
// Viewport size, in device pixels
const W = context.viewportWidth;
const H = context.viewportHeight;
// Number of points
const N = props.N;
return clamp(((rho * W * H) / (N * p * p)) * (X0 / X) * (Y0 / Y), 0, 1);
}
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.
