The avatar for @rahuketu86
rahuketu86
Public
Edited
Mar 25, 2024
Fork of Session 2: Introduction to Observable Plot (Follow-along version)
4
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
salamanders
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(salamanders, {
x: "totalLength",
y: (d) => d.weight,
fill: "creekSection",
opacity: 0.5,
r: "totalLength",
tip: true
})
// Plot.ruleY([1]),
// Plot.ruleY([10]),
// Plot.ruleY([100]),
],
// grid: true,
x: { type: "log" },
// x: { domain: [0, 400], reverse: true, ticks: 5, tickFormat: "0.2f" },
// x: { domain: [0, 400], ticks: 5, tickFormat: "0.2f"},
y: { type: "log", grid:true },

// y: { type: "pow", exponent: 0.5, grid: true },
// y: { type: "sqrt", grid: true },

color: { legend: true, domain: ["CC", "OG"], range: ["blue", "orange"] }
// color: {range:["cyan", "purple"]} // Can also choose plot builtin colorscheme
// color: {type: "diverging",
// scheme: "BuRd"}

// color:{legend:true, type:"diverging"}
// color: {
// type: "diverging",
// scheme: "BuRd"
// },
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
salamanders
X
date
Y
mean
totalLength
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
x: {},
marks: [
Plot.rectY(
salamanders,
Plot.binX({ y: "mean" }, { x: "date", y: "totalLength", tip: true, interval:"5 years" })
),
Plot.ruleY([0])
]
})
Insert cell
monoYearly
X
year
Y
—
volume
Color
surfaceArea
Size
—
Facet X
—
Facet Y
—
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
x: {},
color: { legend: true },
title: "Volume of Lake",
subtitle: "Monolake",
marginLeft: 100,
marks: [
Plot.lineY(monoYearly, {
x: "year",
y: "volume",
stroke: "year",
z: null,
tip: true
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
salamanders
X
—
Y
creekSection
Color
creekSection
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: { legend: true },
marks: [
Plot.barX(
salamanders,
Plot.groupY(
{ x: "count" },
{ y: "creekSection", fill: "creekSection", tip: true }
)
),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
monoYearly
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.line(
monoYearly,
Plot.normalizeY({
x: "year",
y: "lake",
stroke: "lake",
z: null,
tip: true,
basis: "first"
})
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {monoYearly} from "@observablehq/keep-saving-mono-lake"
Insert cell
mackCreekVertebrates.csv
SELECT
SAMPLEDATE as date
, SECTION as creekSection
, SPECIES as species
, LENGTH2 as totalLength
, WEIGHT as weight
FROM "mackCreekVertebrates"
WHERE SPECIES='DITE'
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