cars
// Dot
Plot.plot({
marks: [
Plot.dot(carMakes, {
x: "power (hp)",
y: "make",
fill: "cylinders",
r: "weight (lb)",
title: "name",
sort: {
y: "x",
reverse: true,
limit: 12
}
})
],
color: {
domain: [3, 4, 6, 8], //cylinders
legend: true
}
})
// Tick X
Plot.plot({
marks: [
Plot.tickX(carMakes, {
x: "power (hp)",
y: "make",
fill: "cylinders",
r: "weight (lb)",
title: "name",
sort: {
y: "x",
reverse: true,
limit: 12
}
})
],
color: {
domain: [3, 4, 6, 8], //cylinders
legend: true
}
})
carMakes
Type Table, then Shift-Enter. Ctrl-space for more options.
import { carMakes } from "@observable/lesson-2-data-representation" //import from other notebook
// NASDAQ: AAPL (Apple)
Plot.plot({
marks: [
Plot.ruleY([0]), // Force domain to include 0
Plot.lineY(aapl, {
x: "Date",
y: "Close"
})
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(industries, {
x: "date",
y: "unemployed",
z: "industry",
stroke: "industry"
})
]
})
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.lineY(alphabet, {
x: "letter",
y: "frequency",
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(laserStrikes, Plot.groupX({ y: "count" }, { x: "year" })),
Plot.ruleY([0])
]
})
laserStrikes
Type Table, then Shift-Enter. Ctrl-space for more options.
import {laserStrikesCleaned as laserStrikes} from "@observablehq/excel-add-columns"
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.
