here to learn
mathjax-editing.jshighlightjs for LeanConnect Observable notebooks to Lean on your computer with websocketdCindyJS import exampleTOCD3 ScatterplotD3 Log-Scaled HistogramLean exercise boxStepping through currying in LeanHello, Lean prover!MathJaxPolygon inputHello, cubic-spline!Brython in observableHello, Bokeh.js!commentOnLabeling connected componentsDrag to re-arrange (vertical edition)Dynamic import polyfillHello, R on OpenCPU!Hello, CindyJS!Hello, chess!Grid inputs
Hello, noUiSlider!
noUiSlider = {
if (!document.getElementById('nouislider-css')) {
const href = await require.resolve("nouislider@12.1.0/distribute/nouislider.min.css");
document.head.appendChild(html`<link id='nouislider-css' href=${href} rel=stylesheet>`);
}
return await require('nouislider@12.1.0/distribute/nouislider.min.js');
}
viewof slider = {
const slider = html`<div id=slider style='max-width:550px; margin:0 auto;'>`;
noUiSlider.create(slider, {
start: [20, 80],
behaviour: 'drag',
connect: true,
tooltips: true,
range: {
'min': 0,
'max': 100
}
});
// This fires immediately when bound, so we don't need to assign slider.value separately on initialization.
slider.noUiSlider.on('update', (e) => {
slider.value = slider.noUiSlider.get();
slider.dispatchEvent(new CustomEvent('input'));
})
return slider;
}
slider
// Some CSS to auto-hide the tooltips, see https://refreshless.com/nouislider/examples/#section-hiding-tooltips
html`<style>
.noUi-tooltip {
display: none;
}
.noUi-active .noUi-tooltip {
display: block;
}
`
colorpicker
coloredconnect
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.
