Published
Edited
Dec 7, 2020
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
// 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
);
}
Insert cell
Insert cell
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);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more