Web developer and autodidact with an interest in creative coding.
Published unlisted
Edited
Jul 12, 2020
Importers
16 stars
viewof intro_string = {
const span = document.createElement('span');
span.style.font = '1.3em cursive';
span.textContent = 'Ceci n’est pas une chaîne littérale.';
span.value = 'This is a string literal.';
return span;
}
intro_string
viewof intro_dom = DOM.element('input', {type: 'range', min: 0, max: 100})
intro_dom
viewof intro_object = {
const range1 = html`<input type=range>`;
const range2 = html`<input type=range>`;
const view = html`
<label>Range 1: ${range1}</label><br>
<label>Range 2: ${range2}</label>
`;
view.value = {
range1: range1.value,
range2: range2.value
};
range1.oninput = function() { view.value.range1 = this.value };
range2.oninput = function() { view.value.range2 = this.value };
return view;
}
viewof intro_assign = {
const range1 = html`<input type=range>`;
const range2 = html`<input type=range>`;
const view = html`
<label>Range 1: ${range1}</label><br>
<label>Range 2: ${range2}</label>
`;
view.value = linkViews({}, {range1, range2});
return view;
}
viewof details_getter = {
const range1 = html`<input type=range>`;
const range2 = html`<input type=range>`;
const view = html`
<label>Range 1: ${range1}</label><br>
<label>Range 2: ${range2}</label>
`;
view.value = {
get range1() { return range1.value; },
get range2() { return range2.value; },
};
return view;
}
function linkViews(target, views, descriptor = {enumerable: true}) {
Object.entries(views).forEach(([name, view]) => {
Object.defineProperty(target, name, Object.assign({
get() { return view.value; }
}, descriptor));
});
return target;
}
viewof pat_inline = {
const o = {};
const view = html`<div style="display:flex">
<fieldset><legend>Step size</legend>
<label>Horizontal steps:${o.stepX = slider({min:0,max:10,step:1,value:1})}</label><br>
<label>Vertical steps: ${o.stepY = slider({min:0,max:10,step:1,value:1})}</label><br>
</fieldset>
<fieldset><legend>Margins</legend>
<div style="text-align:center">
<label style="display:inline-block;">
Top:<br>${o.top = html`<input type=number value=1 style="width:5em">`}
</label><br>
<label style="display:inline-block">
Left:<br>${o.left = html`<input type=number value=10 style="width:5em">`}
</label>
<label style="display:inline-block">
Right:<br>${o.right = html`<input type=number value=10 style="width:5em">`}
</label><br>
<label style="display:inline-block;">
Bottom:<br>${o.bottom = html`<input type=number value=1 style="width:5em">`}
</label>
</div>
</fieldset>
`;
view.value = linkViews({}, o);
return view;
}
pat_inline
viewof ex_color_alpha = {
const color = html`<input type=color value="#ffaa00">`;
const alpha = slider({min: 0, max: 1, value: .5, format: '0.0%'});
const view = html`<div id="ex_color_alpha">${color} ${alpha}`;
view.value = linkViews({}, {color, alpha});
return view;
}
addex_color_linked
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.
