Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Dec 5, 2021
1 fork
52 stars
viewof r = html`<input type=range min=0 max=255 step=1 value=127>`
viewof g = html`<input type=range min=0 max=255 step=1 value=127>`
viewof b = html`<input type=range min=0 max=255 step=1 value=127>`
html`<div style="height:33px;width:33px;background:rgb(${r},${g},${b});">`
viewof rgb = {
const form = html`<form>
<div><input type=range name=r min=0 max=255 step=1 value=127> <i>r</i></div>
<div><input type=range name=g min=0 max=255 step=1 value=127> <i>g</i></div>
<div><input type=range name=b min=0 max=255 step=1 value=127> <i>b</i></div>
</form>`;
form.oninput = () => form.value = [
form.r.valueAsNumber,
form.g.valueAsNumber,
form.b.valueAsNumber
];
form.oninput();
return form;
}
html`<div style="height:33px;width:33px;background:rgb(${rgb.join()});">`
rgbForm = html`<form>
<div><input type=range name=r min=0 max=255 step=1 value=127> <i>r</i></div>
<div><input type=range name=g min=0 max=255 step=1 value=127> <i>g</i></div>
<div><input type=range name=b min=0 max=255 step=1 value=127> <i>b</i></div>
</form>`
r2 = Generators.input(rgbForm.r)
g2 = Generators.input(rgbForm.g)
b2 = Generators.input(rgbForm.b)
html`<div style="height:33px;width:33px;background:rgb(${r2},${g2},${b2});">`
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.
