Published
Edited
Jul 1, 2022
3 stars
Also listed in…
Tips and Utilities
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
gui.add( myObject, 'myBoolean' ); // Checkbox
gui.add( myObject, 'myFunction' ); // Button
gui.add( myObject, 'myString' ); // Text Field
gui.add( myObject, 'myNumber' ); // Number Field

// Add sliders to number fields by passing min and max
gui.add( myObject, 'myNumber1', 0, 1 );
gui.add( myObject, 'myNumber2', 0, 100, 2 ); // snap to even numbers

// Create color pickers for multiple color formats
const colorFormats = {
string: '#ffffff',
int: 0xffffff,
object: { r: 1, g: 1, b: 1 },
array: [ 1, 1, 1 ]
};

gui.addColor( colorFormats, 'string' );
}
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