Public
Edited
Feb 17, 2024
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
Plot.plot({
axis: null,
margin: 20,
marginRight: 120,
marks: [Plot.tree(flare.slice(0, 50), { path: "name", delimiter: "." })]
})
penguins
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
r: "flipper_length_mm"
})
],
r: { domain: d3.extent(penguins, (d) => d.flipper_length_mm), range: [1, 5] },
color: {
legend: true,
domain: d3.groups(penguins, (d) => d.species).map((e) => e[0]),
range: ["purple", "teal", "orange"]
}
})
d3.groups(penguins, (d) => d.species).map((e) => e[0])
d3.version
mackCreekVertebrates.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
mackCreekVertebrates.csv
salamenders
Plot.plot({
marks: [
Plot.dot(salamenders, {
x: "totalLength",
y: (d) => d.weight,
opacity: 0.5,
fill: "creekSection",
tip: true
})
],
y: { type: "pow", exponent: 0.5, grid: true },
x: { domain: [0, 400], reverse: true, ticks: 5, tickFormat: ".1f" },
color: { range: ["cyan", "purple"] }
})
data = {
const random = d3.randomNormal();
return Array.from({ length: 100 }, () => [random(), random(), random()]);
}
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.
