The avatar for @vis4sense
vis4sense
Public
Observable tutorials
Edited
Nov 26, 2024
Fork of Learning Observable: User inputs and interactivity
1
Observable tutorials
Week 8 Tutorial 1: Notebooks and cellsWeek 8 Tutorial 2: Getting data into ObservableWeek 8 Tutorial 3: Data visualization with Chart cellWeek 9 Tutorial 1: MarkdownWeek 9 Tutorial 2: Observable PlotWeek 9 Tutorial 3: Build your first scatterplotWeek 10 Tutorial 1: Observable Plot and its Documentation
Week 10 Tutorial 2: User inputs and interactivity
Week 10 Tutorial 3: Importing and remixing cells and notebooks
Insert cell
Insert cell
Insert cell
viewof sport = Inputs.select(sports, { label: "Sport selection" })
Insert cell
Insert cell
Insert cell
Inputs.range([0, 100], {label: "Amount", step: 5})
Insert cell
Insert cell
Insert cell
viewof select = Inputs.select(["A", "B", "c"], { label: "Select one" })
Insert cell
select
Insert cell
Insert cell
viewof amount = Inputs.range([0, 100], { label: "Amount", step: 1 })
Insert cell
Insert cell
Insert cell
Insert cell
viewof button = Inputs.button("Click me")
Insert cell
button
Insert cell
viewof toggle = Inputs.toggle({label: "Toggle", value: true})
Insert cell
toggle
Insert cell
viewof checkboxes = Inputs.checkbox(["A", "B"], { label: "Check boxes" })
Insert cell
checkboxes
Insert cell
viewof radios = Inputs.radio(["A", "B"], { label: "Radio buttons", value: "A" })
Insert cell
radios
Insert cell
viewof date = Inputs.date({ label: "Date", value: "2024-11-14" })
Insert cell
date
Insert cell
viewof text = Inputs.text({label: "Text"})
Insert cell
text
Insert cell
Insert cell
Insert cell
viewof letter = Inputs.select(letters, {label: "Favorite letter", value: "O"})
Insert cell
viewof color = Inputs.color({label: "Bars color", value: "#4682b4"})
Insert cell
viewof highlight = Inputs.color({label: "Highlight color", value: "#ffa500"})
Insert cell
letterFrequency = Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency",
fill: d => d.letter === letter ? highlight : color,
sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
],
caption: "Frequency of letters in English texts",
ariaLabel: "Frequency of letters in English texts",
ariaDescription: `This bar chart shows the frequency of letters in English texts. We see that the top five most common letters are E, T, A, O and I.`
})
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