Published
Edited
Mar 1, 2022
1 fork
Importers
27 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
driftHCL = hcl => {
let newHCL = null;
// do {
newHCL = d3.hcl(hcl);
newHCL.h += Math.random() < 0.5 ? -.5 : .5;
if (newHCL.h > 360) {
newHCL.h -= 360;
}
if (newHCL.h < 0) {
newHCL.h += 360;
}
newHCL.c += Math.random() < 0.5 ? -1 : 1;
if (newHCL.c < 20) {
newHCL.c = 20;
}
newHCL.l += Math.random() < 0.5 ? -1 : 1;
// } while (newHCL.displayable());
return newHCL;
}
Insert cell
passThruRGB = hcl => {
const rgb = d3.rgb(hcl);
rgb.r = Math.round(rgb.r);
rgb.g = Math.round(rgb.g);
rgb.b = Math.round(rgb.b);
return d3.hcl(rgb);
}
Insert cell
swatch = color => {
const svg = d3
.create('svg')
.attr('width', 50)
.attr('height', 50);
const rect = svg
.append('rect')
.attr('width', 50)
.attr('height', 50)
.attr('fill', color);
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { button } from '@jashkenas/inputs'
Insert cell
Insert cell
d3 = require('d3')
Insert cell
Insert cell
Insert cell

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