The end-to-end solution for building and hosting better data apps, dashboards, and reports.
data = penguins
data
X
culmen_length_mm
Y
culmen_depth_mm
Color
island
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
data
X
culmen_length_mm
Y
culmen_depth_mm
Color
island
Size
—
Facet X
species
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
data
X
culmen_length_mm
Y
culmen_depth_mm
Color
island
Size
—
Facet X
species
Facet Y
island
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
data
X
body_mass_g
Y
—
Color
#4775de
Size
—
Facet X
—
Facet Y
species
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)", tip: true,
title: d => `${d.name} (19${d.year}): ${d["power (hp)"]} HP, ${d["economy (mpg)"]} MPG`})
]
})
Plot.plot({
marks: [
Plot.dot((mode === "Filter" ? carsFiltered : cars), {x: "power (hp)", y: "economy (mpg)", title: "name",
fill: d => (mode === "Filter" ? "black" :
(d["weight (lb)"] >= minWeight && d["weight (lb)"] <= maxWeight ?
"steelblue" : "lightgray"))})
],
x: {
domain: (pinCarAxes || mode === "Highlight") ? [40, 240] : undefined
},
y: {
domain: (pinCarAxes || mode === "Highlight") ? [8, 48] : undefined
}
})
carsFiltered = cars.filter(d => d["weight (lb)"] >= minWeight && d["weight (lb)"] <= maxWeight)
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.
