The avatar for @rahuketu86
rahuketu86
Public
Edited
Mar 22, 2024
Fork of Session 1: Introduction to Observable Plot (Follow-along version)
6
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
energy = FileAttachment("us_energy.csv").csv({typed: true})
Insert cell
Insert cell
energy
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marks: [
Plot.line(energy, {x: "year", y: "quadrillion_btu", z: "type"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.line(energy, {
x: "year",
y: "quadrillion_btu",
stroke: "type",
tip: true
}),
Plot.dot(energy, {
x: "year",
y: "quadrillion_btu",
stroke: "white",
fill: "type"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
r: "flipper_length_mm",
tip:true
})
],
x: { type: "log" },
r: { domain: d3.extent(penguins, (d) => d.flipper_length_mm), range: [1, 6] },
color: {
legend: true,
domain: ["Adelie", "Chinstrap", "Gentoo"],
range: ["purple", "teal", "orange"]
}
})
Insert cell
Insert cell
Insert cell
import { showMe } from "@observablehq/show-me"
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