UW Computer Science Professor. Co-Founder of Trifacta. Data, visualization & interaction. @uwdata @trifacta @d3 @vega
Published
Edited
Mar 23, 2021
2 forks
Importers
3 stars
// Generate a form element that wraps one or more inputs
form = function(value, ...nodes) {
const form = document.createElement('form');
form.addEventListener('submit', event => event.preventDefault());
nodes.forEach(node => form.appendChild(node));
return Object.defineProperty(form, 'value', value);
}
// Generate a text label
label = function(title) {
const label = document.createElement('label');
label.style.display = 'inline-block';
label.style.width = '150px';
label.innerText = title;
return label;
}
// Generate a checkbox with provided label title and checked state
checkbox = function(title, checked) {
const cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
cb.checked = !!checked;
return form(
{
get() { return cb.checked; },
set(v) { cb.checked = v; }
},
label(title), cb
);
}
// Generate a slider with provided label title and slider parameters
slider = function(title, value, min, max, step) {
const slider = document.createElement('input');
slider.setAttribute('type', 'range');
slider.setAttribute('min', min);
slider.setAttribute('max', max);
slider.setAttribute('step', step);
slider.value = value;
const valueLabel = document.createElement('label');
valueLabel.style['margin-left'] = '0.5em';
const update = () => valueLabel.innerText = slider.value;
slider.addEventListener('input', update);
update();
return form(
{
get() { return +slider.value; },
set(v) { slider.value = +v; update(); }
},
label(title), slider, valueLabel
);
}
// Generate a multi-dimensional input composed of the provided sub-inputs
multi = function(...inputs) {
return form(
{
get() { return inputs.map(node => node.value); },
set(v) { inputs.map((node, i) => node.value = v[i]); }
},
...inputs
);
}
// Generate a triple slider control for rotation in 3D
rotate3D = function() {
return multi(
slider('Yaw', 0, -180, 180, 1),
slider('Pitch', 0, -90, 90, 1),
slider('Roll', 0, -180, 180, 1)
);
}
// Generate a double slider control for translation in 2D
translate2D = function() {
const inputs = [
slider('X', -450, -1500, 1500, 1),
slider('Y', -250, -1000, 1000, 1)
];
return form(
{
get() { return inputs.map(node => -node.value); },
set(v) { inputs.map((node, i) => node.value = -(v[i] || 0)); }
},
...inputs
);
}
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.
