The avatar for @ddv373
Dynamic Data Visualization 373
Public
Edited
Sep 17, 2023
2 stars
1
Insert cell
Insert cell
Insert cell
penguin_data
Insert cell
Insert cell
Plot.barY(penguin_data, { x: "species", y: "avg_mass" }).plot()
Insert cell
Insert cell
Plot.line(aapl, { x: "Date", y: "High" }).plot()
Insert cell
Insert cell
Plot.plot({
width: 1000,
x: { padding: 0.25, label: "Species" },
y: {
grid: true,
tickFormat: (m) => `${d3.format(",")(m)} g`,
label: "↑ Average Mass"
},
marks: [
Plot.barY(penguin_data, {
x: "species",
y: "avg_mass",
fill: "steelblue",
stroke: "black",
marginLeft: 50
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Plot.plot()
Insert cell
Insert cell
Plot.plot({
marks: [Plot.barY(penguin_data, { x: "species", y: "avg_mass" })]
})
Insert cell
Insert cell
penguin_data = Array.from(
d3
.rollup(
penguins,
(a) => ({
species: a[0].species,
avg_mass: Math.round(100 * d3.mean(a, (o) => o.body_mass_g)) / 100
}),
(o) => o.species
)
.values()
)
Insert cell
Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({ y: "count" }, { x: "species" })),
Plot.ruleY([0])
]
})
Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(
penguins,
Plot.binX({ y: "count" }, { x: "body_mass_g", fill: "sex", title: "sex" })
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { bannerTitle } from "@observablehq/banner"
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