Public
Edited
May 1, 2024
1 star
Insert cell
Insert cell
Insert cell
viewof table = Inputs.table(cars)
Insert cell
cars
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {x: "displacement (cc)", y: "power (hp)"}),
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(cars,
{x: "displacement (cc)", y: "weight (lb)", r: "weight (lb)", title:"name", opacity: 0.5, fill: "cylinders"})
],
color: {
legend: true,
domain: "categorical"
}
})
Insert cell
import {schemes} from "@observablehq/plot-cheatsheets-colors"

Insert cell
schemes
Insert cell
Insert cell
viewof table1 = Inputs.table(olympians)
Insert cell
Plot.plot({
marks: [
Plot.dot(olympians, {x: "weight", y: "sport", sort: {y: "x"}})
],
y: {
domain: ["triathlon", "gymnastics", "equestrian", "athletics", "judo", "weightlifting"]
},
marginLeft: 100,
width
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.tickX(olympians, {x: "weight", y: "sport", sort: {y: "x"}})
],
y: {
domain: ["triathlon", "gymnastics", "equestrian", "athletics", "judo", "weightlifting"]
},
marginLeft: 100,
width
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, {x: "Date", y: "Close"})
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(industries, {x: "date", y: "unemployed", z: "industry", stroke: "industry", title: "industry"})
],
color : {
legend: true
}
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.line(tdf, {x: "distance", y: "elevation"}),
Plot.ruleY([0])
],
width
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.line(alphabet.sort((a, b) => d3.ascending(a.frequency, b.frequency)),
{x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
alphabet
Insert cell
Plot.plot({
marks: [
Plot.line(alphabet.sort((a, b) => d3.ascending(a.letter, b.letter)), {x: "letter", y: "frequency"}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
laserStrikes
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(laserStrikes, Plot.groupX({y: "count"}, {x: "year", fill: "steelblue"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
import {driving} from "@observablehq/plot-line"
Insert cell
import {tdf} from "@observablehq/plot-line"
Insert cell
import {laserStrikesCleaned as laserStrikes} from "@observablehq/excel-add-columns"
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