Lesson 1
Inputs.table(cars)
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)", fill: "steelblue", title: "name"})
]
})
Plot.plot({
grid: true,
inset: 10,
width: 928,
height: 240,
facet: {
data: anscombe,
x: "group"
},
marks: [
Plot.frame(),
Plot.dot(anscombe, {x: "x", y: "y"}),
Plot.linearRegressionY(anscombe, {x: "x", y: "y", stroke: "steelblue", ci: 0})
],
})
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barX(olympians, Plot.groupY({x2: "count"}, {x1: 300, y: "nationality", sort: {y: "x", reverse: true, limit: 10},
fill: d => d.nationality === "USA" ? "steelblue" : (d.nationality === "ESP" ? "red" : "lightgray")})),
Plot.ruleX([300])
],
x: {
domain: [300, 570]
},
marginLeft: 50, width
})
anscombe = FileAttachment("anscombe.csv").csv({typed: true})
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([1 / 26], {stroke: "orange"}),
Plot.ruleY([0])
]
})
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.
