Public
Edited
Jul 7, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({

marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
symbol: "species",
opacity: 0.7,
r: 4
})
],

symbol: {legend: true},
facet: {data: penguins, x: "island"},
// color: {legend: true}, // Legend is redundant if already covered by symbol legend!
x: {label: "Flipper length (mm)"},
y: {label: "Body mass (g)"},

grid: true

})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(penguins,
Plot.binX({y: "count"},
{x: "flipper_length_mm"}))
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
// stroke: "species",
fill: "species"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: { domain: [150, 250] },
marks: [Plot.dot(penguins, { x: "flipper_length_mm", y: "body_mass_g" })]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: { reverse: true },
y: { reverse: false },
marks: [Plot.dot(penguins, { x: "flipper_length_mm", y: "body_mass_g" })]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: { scheme: "rainbow" },
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "body_mass_g"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
facet: { data: penguins, x: "species" },
marks: [
Plot.rectY(
penguins,
Plot.binX(
{ y: "count" },
// { x: "flipper_length_mm", thresholds: 12, fx: "species"}
{ x: "flipper_length_mm", thresholds: 12 }
)
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {label: "Flipper length (mm)"},
y: {label: "Body mass (g)"},
marks: [
Plot.dot(penguins,
{x: "flipper_length_mm",
y: "body_mass_g",
fill: "species"}
)
]
})
Insert cell
Insert cell
Plot.plot({
color: { legend: true },
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species"
})
]
})
Insert cell
Insert cell
Plot.plot({
color: {legend: true, scheme: "dark2"},
x: {label: "Penguin body mass (grams)"},
y: {label: "Count"},
marks: [
Plot.rectY(penguins,
Plot.binX(
{y: "count"},
{x: "body_mass_g",
thresholds: 30, // Updates bin number for histogram
fill: "species"}))
]
})
Insert cell
Insert cell
viewof sizeInput = Inputs.range(d3.extent(penguins, d => d.body_mass_g),
{label: "Choose minimum penguin mass (g):",
step: 1})
Insert cell
Plot.plot({
marks: [
Plot.tickY(penguins,
{x: "species",
y: "body_mass_g",
filter: d => d.body_mass_g > sizeInput, // Filter to only include observations where body mass exceeds the value of the sizeInput slider!
stroke: "species"}
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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