Published
Edited
Dec 21, 2018
8 stars
function simplePinkness(r, g, b) {
// regard HTML pink as the ideal pink
const [R, G, B] = [255, 192, 203]
// euclidian distance
return ((R - r) ** 2 + (G - g) ** 2 + (B - b) ** 2) ** 0.5
}
stats = {
const hMean = d3.mean(pinksHsv2, d => d.h)
const hStdev = d3.deviation(pinksHsv2, d => d.h)
const sMean = d3.mean(pinksHsv2, d => d.s)
const sStdev = d3.deviation(pinksHsv2, d => d.s)
const vMean = d3.mean(pinksHsv2, d => d.v)
const vStdev = d3.deviation(pinksHsv2, d => d.v)
return {hMean, hStdev, sMean, sStdev, vMean, vStdev}
}
function pinkness(r, g, b) {
const [H_MEAN, H_STD] = [0.9421705998726765, 0.05275287149204065]
const [S_MEAN, S_STD] = [0.4176295879856471, 0.24404855050710472]
const [V_MEAN, V_STD] = [0.9283422459893049, 0.09532466926283154]
// rgb to hsv
const col = hsv.hsv(d3.rgb(r, g, b))
let h = col.h / 360
let s = col.s
let v = col.v
if(h < H_MEAN * 0.5) h += 1
// calcualte standardized distances
const hScore = (h - H_MEAN) / H_STD
const sScore = (s - S_MEAN) / S_STD
const vScore = (v - V_MEAN) / V_STD
return (hScore ** 2 + sScore ** 2 + vScore ** 2) ** 0.5 / 3
}
[
// typical pink
pinkness(243, 184, 202),
// red
pinkness(255, 0, 0),
// blue
pinkness(0, 0, 255),
// dark green
pinkness(0, 128, 0),
]
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.
