Public
Edited
Sep 21, 2023
aapl.csv
X
Date
Y
Open
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.areaY(await FileAttachment("aapl.csv").csv({ typed: "auto" }), {
x: "Date",
y: "Open",
tip: true
}),
Plot.ruleY([0])
]
})
await FileAttachment("aapl.csv").csv({ typed: "auto" })
orders
X
count
order_date
Y
price
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
orders
X
count
orders
Y
—
order_date
Color
—
Size
—
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
title: "title",
subtitle: "subtitle",
caption: "caption",
height: 300,
marginTop: 20,
marginRight: 20,
marginBottom: 20,
marginLeft: 20,
insetTop: 20,
insetRight: 20,
insetBottom: 20,
insetLeft: 20,
x: { label: "x label", type: "linear", grid: true, reverse: true },
y: { label: "ylabel", type: "log", grid: true, reverse: true },
color: { scheme: "BrBG", reverse: true, legend: true },
marks: [
Plot.lineY(orders, {
x: "order_date",
y: "orders",
stroke: "category",
tip: true
})
]
})
weather
X
temp_max
Y
—
temp_min
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [Plot.ruleX(weather, { x: "temp_max", tip: true })]
})
Plot.plot({
marks: [
Plot.rectY(
weather,
Plot.binX({ y: "count" }, { x: "temp_max", tip: true })
),
Plot.ruleY([0])
]
})
penguins.csv
X
flipper_length_mm
Y
distinct
species
Color
flipper_length_mm
Size
—
Facet X
island
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: { label: "Body mass (g)" },
y: { label: "Flipper length (mm)" },
color: { legend: true },
width: 800,
caption:
"Penguin body mass and flipper length for three species (Adélie, chinstrap and gentoo) at three islands (Biscoe, Dream and Torgersen) near Palmer Archipelago, Antarctica. Data: Gorman et al. 2014.",
insetTop: 20,
insetLeft: 20,
insetRight: 20,
insetBottom: 20,
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.rectX(
await FileAttachment("penguins.csv").csv({ typed: "auto" }),
Plot.binY(
{ x: "distinct" },
{
fx: "island",
x: "species",
y: "flipper_length_mm",
fill: "flipper_length_mm",
tip: true
}
)
),
Plot.ruleX([0])
]
})
Plot.plot({
x: { label: "Body mass (g)" },
y: { label: "Flipper length (mm)" },
color: { legend: true },
width: 800,
caption:
"Penguin body mass and flipper length for three species (Adélie, chinstrap and gentoo) at three islands (Biscoe, Dream and Torgersen) near Palmer Archipelago, Antarctica. Data: Gorman et al. 2014.",
insetTop: 20,
insetLeft: 20,
insetRight: 20,
insetBottom: 20,
marks: [
Plot.frame({ strokeOpacity: 0.9 }),
Plot.dot(await FileAttachment("penguins.csv").csv({ typed: "auto" }), {
fx: "island",
x: "body_mass_g",
y: "flipper_length_mm",
stroke: "species",
tip: true
})
]
})
weather_data
X
date
Y
temp_max
Color
location
Size
—
Facet X
—
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.
world_bank_data.csv
X
year
Y
sum
co2
Color
region
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
weather_data
X
wind
Y
temp_max
Color
count
wind
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
orders
X
order_date
Y
sum
revenue
Color
day_of_week
Size
—
Facet X
—
Facet Y
—
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.
pizzeriaDB
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.
