Published
Edited
Jun 14, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
style:{
width: width,
height: height,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
},
marks: [
Plot.dot(infogrid.slice(), { x: "x", y: "y", r: 2, stroke: "navy" })
],
x: {
domain: [-2, 35],
axis: false
},
y: {
domain: [-1, 9],
axis: false
}
});
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: {
data: groupByIsland,
x: "island"
},
marks: [
Plot.frame(),
Plot.dot(groupByIsland.slice(), {x: "x", y: "y", stroke: "navy", r: 2}),
],
x: {
domain: [-2, 18]
},
y: {
domain: [-0.7, 9.7]
}
})
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: {
data: islandSpecies,
x: "island"
},
marks: [
Plot.frame(),
Plot.dot(
islandSpecies.slice(), {
x: "x",
y: "y",
stroke: "species",
r: 2
}),
],
x: {
domain: [-2, 40]
},
y: {
domain: [-0.7, 9.7]
}
})
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: {
data: jitter,
x: "island"
},
marks: [
Plot.frame(),
beeswarmY(jitter.slice(), {
y: (d) => d.y,
x: (d) => d.x,
r: 1,
stroke: "species"
}),
],
x: {
domain: [0 , 4]
},
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function beeswarmX(data, options = {}) {
return beeswarm(data, { ...options, direction: "x" });
}
Insert cell
function beeswarmY(data, options = {}) {
return beeswarm(data, { ...options, direction: "y" });
}
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