viewof hslaExample = colorPicker((hslExample.replace(")",",") + String(opacity) + ")").replace("hsl","hsla"))
import {colorPicker} from "@shaunlebron/color-picker"
import {select, autoSelect} from "@jashkenas/inputs"
import { rangeSlider } from "@mootari/range-slider@1312"
cnl = require("color-name-list")
csp = import('https://cdn.skypack.dev/color-space@2.0.0')
Object.entries(spaces)[1]
Object.entries(spaces).filter(d => d[0] === pickerColorSpace[1].name)[0][1]
mutable cv1 = pickerColorSpace[1].name === "rgb"? rgb: Object.entries(spaces)[0][1][pickerColorSpace[1].name](rgb)
cv2 = pickerColorSpace[1].name === pickerColorSpace2[1].name ? [colorPickerForm, colorPickerForm1, colorPickerForm2]: Object.entries(spaces).filter(d => d[0] === pickerColorSpace[1].name)[0][1][pickerColorSpace2[1].name]([colorPickerForm, colorPickerForm1, colorPickerForm2])
rgb1 = pickerColorSpace[1].name === "rgb"? [colorPickerForm, colorPickerForm1, colorPickerForm2]: Object.entries(spaces).filter(d => d[0] === pickerColorSpace[1].name)[0][1].rgb([colorPickerForm, colorPickerForm1, colorPickerForm2])
rgb2 = pickerColorSpace2[1].name === "rgb"? [colorPickerForm20, colorPickerForm21, colorPickerForm22]: Object.entries(spaces).filter(d => d[0] === pickerColorSpace2[1].name)[0][1].rgb([colorPickerForm20, colorPickerForm21, colorPickerForm22])
rgb = [d3.color(picker).r, d3.color(picker).g, d3.color(picker).b]
rgb2it = [Math.round(rgb2[0]), Math.round(rgb2[1]), Math.round(rgb2[2])]
bgc = "rgb" + "(" + rgb2it + ")"
cs = {yield md`## <span style="color: #fff; background: ${bgc}">Color will be added here</span>`
if (button != null) {nietos.push(button); yield swatches(nietos)}}
nietos = [];
csi = {
interpolate;
if (nietos.length === 2) {
yield show_scale(make_scale(nietos[0], nietos[1], n), opacity2);
} else if (nietos.length >= 3) {
yield show_scale(
make_divergent_scale(nietos[0], nietos[1], nietos[nietos.length - 1], n),
opacity2
);
} else {
const fill = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
let guessTheMovie = message;
//guessTheMovie.style.color = d3.interpolateMagma(16);
yield guessTheMovie;
}
}
message = {
let i = 0;
const text = "Color will be interpolated here";
let message;
while (i < text.length) {
await Promises.delay(40);
let span = html`<span>${text.substr(i, 1)}</span>`;
span.style.color = d3.interpolateSpectral(i / text.length);
span.style.opacity = opacity2 + "%";
span.setAttribute("value", i);
span.setAttribute("ascending", "ascending");
if (i == 0) {
message = html`<span>${span}`;
} else {
message = html`${message.innerHTML}${span}`;
}
i = i + 1;
//yield html`<h1>${message}</h1>`;
}
yield html`<h2>${message}</h2>`;
/* while (i >= text.length) {
await Promises.delay(100);
let current_message = html`<h1>${message}</h1>`;
let current_spans = current_message.firstChild.children;
for (let span of current_spans) {
let v = +span.getAttribute("value");
if ((v == text.length) | (v == -1)) {
span.toggleAttribute("ascending");
}
span.hasAttribute("ascending") ? v-- : v++;
span.setAttribute("value", v);
span.style.color = d3.interpolateViridis(v / text.length);
// span.style.fontSize = Math.sin(v / 10) + 20 + "px";
}
i = i + 1;
yield current_message;
}*/
}
nietos[nietos.length - 1]
picker
function swatches(colors) {
return html`${colors.map(c => `<div title="${c}" style="
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 43px;
height: 43px;
background: ${c};
"></div>`)}`;
}
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.
