Published
Edited
Nov 16, 2021
Insert cell
Insert cell
anscombe = FileAttachment("anscombe.csv").csv({typed: true})
Insert cell
Plot.plot({
grid: true,
inset: 10,
width: 928,
height: 240,
facet: {
data: anscombe,
x: "series"
},
marks: [
Plot.frame(),
Plot.dot(anscombe, {x: "x", y: "y"})
]
})
Insert cell
Insert cell
barley = FileAttachment("barley.csv").csv({typed: true})
Insert cell
Plot.plot({
marginLeft: 110,
height: 800,
grid: true,
x: {
nice: true
},
y: {
domain: d3.groupSort(barley, g => -d3.median(g, d => d.yield), d => d.variety),
inset: 5
},
fy: {
domain: d3.groupSort(barley, g => -d3.median(g, d => d.yield), d => d.site)
},
color: {
type: "categorical"
},
facet: {
data: barley,
y: "site",
marginRight: 90
},
marks: [
Plot.frame(),
Plot.dot(barley, {x: "yield", y: "variety", stroke: "year"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
penguins = FileAttachment("penguins.csv").csv({typed: true})
Insert cell
Plot.plot({
height: 600,
grid: true,
facet: {
data: penguins,
x: "sex",
y: "species",
marginRight: 80
},
marks: [
Plot.frame(),
Plot.dot(penguins.slice(), {
x: "culmen_depth_mm",
y: "culmen_length_mm",
r: 2,
fill: "#ddd"
}),
Plot.dot(penguins, {
x: "culmen_depth_mm",
y: "culmen_length_mm"
})
]
})
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