Public
Edited
Sep 26, 2023
Insert cell
Insert cell
Insert cell
This is amount ${amount} which I selected
Insert cell
viewof amount = Inputs.range([0,100], {label: "Amount", step: 1})
Insert cell
Insert cell
// テーブルの表示
viewof table = Inputs.table(olympians)
Insert cell
olympians
Insert cell
Insert cell
// data = fetch('https://jsonplaceholder.typicode.com/todos/1')
// .then(response => response.json())
d3.json('https://jsonplaceholder.typicode.com/todos')

Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Insert cell
cars
Insert cell
Insert cell
Insert cell
viewof button = Inputs.button("Click me")
Insert cell
viewof toggle = Inputs.toggle({label: "Active", value: true})
Insert cell
viewof select = Inputs.select(["A", "B"], {label: "Select one"})
Insert cell
viewof date = Inputs.date({label: "Date", value: "2023-09-26"})
Insert cell
viewof range = Inputs.range([0, 100], {label: "Amount", step: 1})
Insert cell
viewof text = Inputs.text({label: "Name"})
Insert cell
Insert cell
viewof letter = Inputs.select(letters, {label: "Favorite letter", value: "0"})
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} })
],
caption: "Frequency of letters in English text"
})
Insert cell
Insert cell
olympians
Insert cell
d3.group(olympians, d => d.sport)
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