Published unlisted
Edited
Oct 8, 2021
Insert cell
Insert cell
Insert cell
import {View} from '@mbostock/synchronized-views'
Insert cell
viewof y = new View(42)
Insert cell
y
Insert cell
viewof y.bind(html`<input type=range min=0 max=100 step=1>`)
Insert cell
viewof y.bind(html`<input type=number min=0 max=100 step=1>`)
Insert cell
viewof y.bind(Inputs.range([0,100],{value: y}))
Insert cell
viewof y.bind(Inputs.range([0,100],{value: y}))
Insert cell
viewof project = new View("Project One")
Insert cell
viewof project.bind(html`<select id="project" name="project">
<option value="Project One">Project One</option>
<option value="Project Two">Project Two</option>
</select>`)
Insert cell
project
Insert cell
viewof project.bind(Inputs.select(["Project One", "Project Two"], {label: "Project"}))
Insert cell
viewof project.bind(Inputs.select(["Project One", "Project Two"], {label: "Project"}))
Insert cell
Insert cell
viewof component = new View("Component One")
Insert cell
component
Insert cell
viewof component.bind(Inputs.select(["Component One", "Component Two"], {label: "Component"}))
Insert cell
viewof component.bind(Inputs.select(["Component One", "Component Two"], {label: "Component"}))
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