The avatar for @dyarparvar
Darya Yarparvar
I’m a graphic designer and data visualiser. Colours, patterns, and data get my pulse racing!
Public
Edited
Mar 7, 2023
Paused
1
Insert cell
Insert cell
Insert cell
viewof gain = Inputs.range([0, 11], {value: 5, step: 0.1, label: "Gain"})
Insert cell
Insert cell
gain2 = gain
Insert cell
The current gain is ${gain.toFixed(1)}!
Insert cell
Insert cell
Insert cell
Insert cell
viewof clicks = Inputs.button("Click me")
Insert cell
clicks
Insert cell
Insert cell
viewof mute = Inputs.toggle({label: "Mute"})
Insert cell
mute
Insert cell
Insert cell
viewof flavors = Inputs.checkbox(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavors"})
Insert cell
flavors
Insert cell
Insert cell
viewof flavor = Inputs.radio(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavor"})
Insert cell
flavor
Insert cell
Insert cell
viewof n = Inputs.range([0, 255], {step: 1, label: "Favorite number"})
Insert cell
n
Insert cell
Insert cell
viewof homeState = Inputs.select([null].concat(stateNames), {label: "Home state"})
Insert cell
homeState
Insert cell
viewof visitedStates = Inputs.select(stateNames, {label: "Visited states", multiple: true})
Insert cell
visitedStates
Insert cell
Insert cell
viewof name = Inputs.text({label: "Name", placeholder: "What’s your name?"})
Insert cell
name
Insert cell
Insert cell
viewof bio = Inputs.textarea({label: "Biography", placeholder: "What’s your story?"})
Insert cell
bio
Insert cell
Insert cell
viewof birthday = Inputs.date({label: "Birthday"})
Insert cell
birthday
Insert cell
Insert cell
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
Insert cell
color
Insert cell
Insert cell
viewof file = Inputs.file({label: "CSV file", accept: ".csv", required: true})
Insert cell
data = file.csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
search // see table below!
Insert cell
Insert cell
viewof rows = Inputs.table(search)
Insert cell
rows // click a checkbox in the leftmost column
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
capitals = FileAttachment("us-state-capitals.tsv").tsv({typed: true})
Insert cell
stateNames = capitals.map(d => d.State)
Insert cell
Insert cell
Button = Inputs.button
Insert cell
Toggle = Inputs.toggle
Insert cell
Radio = Inputs.radio
Insert cell
Checkbox = Inputs.checkbox
Insert cell
Range = Inputs.range
Insert cell
Select = Inputs.select
Insert cell
Text = Inputs.text
Insert cell
Textarea = Inputs.textarea
Insert cell
Insert cell
Table = Inputs.table
Insert cell
Input = Inputs.input
Insert cell
bind = Inputs.bind
Insert cell
disposal = Inputs.disposal
Insert cell
svg = htl.svg
Insert cell
html = htl.html
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