What are inputs, and how do they work? / Bill Shander | Observable

Information design & data visualization practitioner. Teaching private workshops and on LinkedIn Learning and at the University of Vermont.

Public

LinkedIn Learning Intro to Observable Course

Edited

Nov 1, 2023

LinkedIn Learning Intro to Observable Course

Notebooks and their components Main UI components of notebooks Referencing named cells Solution: create a working notebook Getting data into your notebook Manipulating data Data tables

What are inputs, and how do they work?

Solution: adding data to your notebook Customizing inputs Adding interactivity to your notebooks with inputs Quick charts with Chart Solution: adding interactivity to your notebook Quick charts with Plot Customize charts with Plot Solution: adding charts to your notebook Solution: adding charts to your notebook - dynamic scale

viewof button = Inputs.button("Click me")

viewof checkboxes = Inputs.checkbox(["A", "B"], {label: "Select some", value: ["A"]})

viewof radios = Inputs.radio(["A", "B"], {label: "Select one", value: "A"})

viewof date = Inputs.date({ label: "Date", value: "2023-11-01" })

viewof range = Inputs.range([0, 100], { label: "Amount", step: 1 })

range

viewof color = Inputs.color({ label: "Favorite color", value: "#4682b4" })

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.