The avatar for @mootari
Fabian Iwand
Web developer and autodidact with an interest in creative coding.
Published
Edited
Mar 9, 2022
Importers
42 stars
Widgets and helpers
Inputs.table() with Colored RowsLinking Multiple RangesAuto-Sort InputsDate and Offset SlidersSubmittable Input FormsDOM InspectorCustom InspectorsSnap A Slider To ValuesChecking a version's publish dateEfficient ResponsivenessSortable Notebook ListDisplaying ProgressRange SliderSearch Results PagingMonitoring EventsPrime Numbers SliderMutable FormsSticky PositioningNotebook TeasersStraight Skeleton - Reference PathsGIF Converter (canvas & SVG)Arguments Widget2D SliderMonitor
Signature - A Documentation Toolkit
Dashboard with InputsDashboard
Also listed in…
Observable Things
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
signature(demoFunction, {
description: `Scales dimensions proportionally to fit into the given width and/or height.`,
example: `const [width, height, scale] = scaleContain(img.naturalWidth, img.naturalHeight, 500, 500);`,
css: `
${signature_theme}
:scope {
background: LightYellow;
box-shadow: 1px 2px 5px -3px;
font-family: sans-serif;
}
:scope .description {
font-size: 1.2rem;
font-style: italic;
}
:scope .examples .code {
background: NavajoWhite;
}
`,
})
Insert cell
Insert cell
// Scope is applied as a class - note the dot in the scope argument.
scopedStyle('.my-shared-scope', `
${signature_theme}
// Adds
:scope { border: 10px solid #888 }
`)
Insert cell
function myCustomSig(fn, options = {}) {
return signature(fn, {scope: 'my-shared-scope', css: null, ...options});
}
Insert cell
myCustomSig(demoFunction, {
description: `Scales dimensions proportionally to fit into the given width and/or height.`,
example: `const [width, height, scale] = scaleContain(img.naturalWidth, img.naturalHeight, 500, 500);`,
})
Insert cell
Insert cell
Insert cell
Insert cell
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