Published
Edited
Apr 7, 2019
Importers
dimensionGenerator = (aspectRatio, margin) => {
// Set to default values if not provided
aspectRatio = aspectRatio || 3/2
margin = margin || {
left: 20,
right: 20,
top: 20,
bottom:20
}
return {
svgWidth: width,
svgHeight: width/aspectRatio,
svgMargin: margin,
graphMinX: margin.left,
graphMaxX: width - margin.right,
graphMinY: margin.top,
graphMaxY: width/aspectRatio - margin.bottom
}
}
// https://awik.io/determine-color-bright-dark-using-javascript/
lightOrDark = (color) => {
// Variables for red, green, blue values
var r, g, b, hsp;
// Check the format of the color, HEX or RGB?
if (color.match(/^rgb/)) {
// If HEX --> store the red, green, blue values in separate variables
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
r = color[1];
g = color[2];
b = color[3];
}
else {
// If RGB --> Convert it to HEX: http://gist.github.com/983661
color = +("0x" + color.slice(1).replace(
color.length < 5 && /./g, '$&$&'));
r = color >> 16;
g = color >> 8 & 255;
b = color & 255;
}
// HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
hsp = Math.sqrt(
0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b)
);
// Using the HSP value, determine whether the color is light or dark
// default: hsp>127.5
if (hsp>160) {
return 'light';
}
else {
return 'dark';
}
}
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.
