Published
Edited
Sep 20, 2019
Importers
7 stars
Toggle({
header: 'Render',
value: true,
},
d => mutable ToggleOutput = d,
)
RangeSlider({
header: 'Selected years',
min: 1976,
max: 2018,
round: true,
width: 300
},
d => mutable RangeSliderOutput = d,
);
IntervalSlider({
header: 'Time period',
min: '01-01-1976',
max: '01-01-2018',
width: 300
},
d => mutable IntervalSliderOutput = d,
);
Slider({
header: 'Iterations',
min: 0,
max: 50,
step: 2,
value: 10,
dualInput: true,
},
d => mutable SliderOutput = d,
);
Slider2D({
header: 'Size',
xLabel: 'Width',
yLabel: 'Height',
xRange: [100, 500],
yRange: [20, 100],
value: [150, 50],
side: 200,
},
d => mutable Slider2DOutput = d,
);
NonlinearSlider({
header: 'Logarithmic growth',
width: 400,
height: 200,
min: .1, // Minimum x
max: 10 * Math.PI, // Maximum x
func: x => Math.log10(x),
color: 'OliveDrab',
});
AngleSlider({
header: 'Degrees',
type: 'rad', // [deg, rad]
diameter: 200,
color: 'FireBrick',
pointerSize: 9,
angle: Math.PI * .75,
offset: 0,
},
d => mutable AngleSliderOutput = d,
);
ColorWheel({
header: 'Eye color',
id: '1',
diameter: 200,
color: [200, 0, 200],
output: 'rgb', // [rgb, hex, hsv]
},
d => mutable ColorSliderOutput = d,
);
RgbSlider({
header: 'Sky color',
width: 256,
color: [135, 206, 235],
output: 'hex', // [rgb, hex, hsv]
},
d => mutable RgbSliderOutput = d,
);
SimplexNoise({
size: 256,
scale: .7,
tileX: true,
tileY: false,
output: 'func', // [func, img]
},
d => mutable SimplexNoiseOutput = d,
);
CyclicValue({
header: 'Grayscale value',
id: '1', // Neccessary on multiple cyclic values. Page refresh needed on edit.
cycleTime: 3000, // ms
updates: 100, // per cycle
from: 0,
to: 255,
round: true,
},
d => mutable CyclicValueOutput = d,
);
HorizontalStack({
modules: [
ColorWheel(
{
header: 'Box color',
id: '2', // Neccessary on multiple color wheel.
diameter: 200,
color: [50, 150, 200],
output: 'hex', // [rgb, hex, hsv]
},
d => mutable HorizontalStackColor = d,
),
AngleSlider(
{
header: 'Rotation',
type: 'deg', // [deg, rad]
diameter: 200,
color: 'OliveDrab',
fill: false,
pointerSize: 9,
angle: 0,
offset: 0,
},
d => mutable HorizontalStackAngle = d,
),
],
padding: 10,
border: true,
});
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.
