Public
Edited
Dec 21, 2022
url = "https://static.observableusercontent.com/files/d0995b3c60f175315f196f3b40649c127e2560f21256c93f370795972117a9097901f7d10ac3fb9b3f0d6eff4ee70d2c30f863deb15ff2f1f2225a8140f279ee"
data = d3.csv(url, d3.autoType)
Inputs.table(data)
data[0]
Inputs.table(data.slice(2, 10))
data.map((d) => d.item_price)
Plot.plot({
marks: [Plot.dot(data, { x: "item_price", y: "amount_paid" })]
})
viewof index = Inputs.range([0, data.length - 1], {
step: 1,
value: 0,
label: "index"
})
import { SummaryTable } from "@observablehq/summary-table"
SummaryTable(data)
// (d) => d.item_price
dots = Plot.dot(data, {
x: "utc_timestamp",
y: "amount_paid"
})
dots.plot()
Plot.plot({
marks: [
Plot.dot(data, {
x: "utc_timestamp",
y: "amount_paid",
fill: "blue",
fillOpacity: 0.4
}),
Plot.dot(data, {
x: "utc_timestamp",
y: "item_price",
fill: "orange",
fillOpacity: 0.4
})
]
})
Plot.dot(data, {
x: "utc_timestamp",
// y: "item_price"
y: (d) => d.amount_paid - d.item_price,
stroke: "blue",
strokeOpacity: 0.1,
fill: "orange",
fillOpacity: 0.4
}).plot()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
