The avatar for @hellotham
Hello Tham
Public
Edited
Jul 13, 2023
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
HTL-MAR-FiddlerCrabBodySize.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
crabs
Insert cell
Insert cell
Insert cell
crabsJS = crabs.map(d => ({lat: d.Latitude, site: d['Site '], sizeMm: d.carapace_width, airTempC: d.MATA, waterTempC: d.MATW}))
Insert cell
Insert cell
Insert cell
Insert cell
crabsJS
X
airTempC
Y
sizeMm
Color
#ff5375
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof pickSize = Inputs.range([0, 100], {label: "Amount", step: 1})
Insert cell
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
Insert cell
Plot.plot({
x: { label: "Air temperature (C)" },
y: { label: "Carapace Size (mm)" },
marks: [
Plot.dot(crabsJS, {
x: "airTempC",
y: "sizeMm",
stroke: color,
fill: "pink",
r: pickSize,
opacity: 0.5,
tip: true
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(crabsJS, {x: "lat", y: "sizeMm"})
]
})
Insert cell
Insert cell
Insert cell
ML = require("https://www.lactame.com/lib/ml/6.0.0/ml.min.js")
Insert cell
Insert cell
crabsLM = new ML.SimpleLinearRegression(
crabsJS.map(d => d.lat),
crabsJS.map(d => d.sizeMm)
)
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(crabsJS, {x: "lat", y: "sizeMm", fill: "pink", opacity: 0.75}),
Plot.linearRegressionY(crabsJS, {x: "lat", y: "sizeMm"}),
Plot.frame()
],
x: { label: "Latitude"},
y: { label: "Carapace size (mm)"},
})
Insert cell
Insert cell
Insert cell
Insert cell
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