Platform
Resources
Pricing
Sign in
Get started
learn-observable
Workspace
Fork
Public
By
TO
Edited
Jul 25, 2023
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
marCasadoAir
=
FileAttachment
(
"marCasadoAir@5.csv"
)
.
csv
(
{
typed
:
true
}
)
// Date issue
Insert cell
marCasadoSea
=
FileAttachment
(
"marCasadoSea@4.csv"
)
.
csv
(
{
typed
:
true
}
)
// Date issue
Insert cell
Insert cell
// Write code to create a database called marCasadoDB, with tables 'air' and 'sea':
marCasadoDB
=
DuckDBClient
.
of
(
{
air
:
marCasadoAir
,
sea
:
marCasadoSea
}
)
// Create a database with two tables: air and sea
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
marCasadoDB
SELECT air.month
, meanPressure
, PAR
, meanHumidity
, windDirection
, sea.MaxTide
, sea.MinTide
, sea.salinity
, sea.seaSurfaceTemp AS SST
, CASE WHEN date_part('month', air.month) IN (10, 11, 12, 1, 2, 3) THEN 'hot moist' ELSE 'cool dry' END AS season
FROM air
JOIN sea
ON air.month = sea.month
Insert cell
Insert cell
Insert cell
marCasado
SELECT * FROM marCasado -- Use SQL to select from array just created
Insert cell
Insert cell
// Write Plot code to create a heatmap of sea surface temperature (SST) by year and month, starting from the 'cell' snippet:
Insert cell
// Use 'cell chart' cell
Plot
.
plot
(
{
marks
:
[
Plot
.
cell
(
marCasado
,
{
x
:
d
=>
d
.
month
.
getUTCMonth
(
)
,
y
:
d
=>
d
.
month
.
getUTCFullYear
(
)
,
fill
:
"meanPressure"
,
// Recall this could be connected to radio button widget
tip
:
true
}
)
]
,
y
:
{
tickFormat
:
"Y"
,
padding
:
0
}
,
// Prettify y-axis
x
:
{
padding
:
0
,
tickFormat
:
Plot
.
formatMonth
(
)
}
}
)
Insert cell
Insert cell
Insert cell
import
{
PlotMatrix
}
with
{
marCasado
as
data
}
from
"@observablehq/autoplot-matrix"
// Use import-with so that a copy of marCasado is not needed
Insert cell
// Use the PlotMatrix function (expecting marCasado) to create a pair plot:
PlotMatrix
(
marCasado
)
Insert cell
Insert cell
Insert cell
Insert cell
ML
=
require
(
"https://www.lactame.com/lib/ml/6.0.0/ml.min.js"
)
Insert cell
Insert cell
import
{
scale
,
asMatrix
}
from
"@chrispahm/hierarchical-clustering"
// Import to make it easier to scale (mean = 0, SD = 1) data
Insert cell
Insert cell
Insert cell
// Create a scaled version of the numeric variables
marCasadoScaled
=
scale
(
marCasado
.
map
(
(
{
season
,
month
,
...
rest
}
)
=>
rest
)
)
// Use object as input for arrow function; exclude properties using spread operator
Insert cell
Insert cell
// Convert to an array of arrays, just containing the values (no keys):
marCasadoArray
=
marCasadoScaled
.
map
(
Object
.
values
)
Insert cell
Insert cell
// Perform principal component analysis:
marCasadoPCA
=
new
ML
.
PCA
(
marCasadoArray
)
Insert cell
Insert cell
Insert cell
// Get variance explained by each PC:
marCasadoPCA
.
getExplainedVariance
(
)
// Shows that, with new coordinate system, 35% of variance is explained by first PC and 19.9% of variance is explained by second PC
Insert cell
Insert cell
// Get cumulative variance explained:
marCasadoPCA
.
getCumulativeVariance
(
)
// Show 69.5% of variance explained by first three PCs
Insert cell
Insert cell
Insert cell
Insert cell
// Import viewof loadings from the notebook, with marCasadoScaled as food_scaled:
import
{
viewof
loadings
}
with
{
marCasadoScaled
as
food_scaled
}
from
"@chrispahm/principal-component-analysis"
Insert cell
// Look at viewof loadings:
viewof
loadings
// Note these loadings will be used for reprojected PC1 with be x value and PC2 will be y value
Insert cell
// import viewof scores from the notebook, with marCasadoScaled as food_scaled and marCasado as food:
import
{
viewof
scores
}
with
{
marCasadoScaled
as
food_scaled
,
marCasado
as
food
}
from
"@chrispahm/principal-component-analysis"
Insert cell
// Look at viewof scores:
viewof
scores
Insert cell
// Do some wrangling to get the month and season alongside scores:
scoresCombined
=
scores
.
map
(
(
d
,
i
)
=>
(
{
...
d
,
Name
:
marCasado
[
i
]
.
month
,
season
:
marCasado
[
i
]
.
season
}
)
)
Insert cell
// Create a PCA biplot with the scores and loadings
// To interpret, compare relationships of variables (relative location), not absolute location within the new coordinate system
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Alternatively (without an import):
// loadingsOption = marCasadoPCA
// .getEigenvectors()
// .data.map((d, i) => ({
// PC1: d[0],
// PC2: d[1],
// Variable: Object.keys(marCasadoScaled[0])[i]
// }))
Insert cell
// Alternatively to get score (projections into PC space):
// scoresOption = marCasadoPCA.predict(marCasadoArray).data.map((d,i) => ({month: marCasado[i].month,
// season: marCasado[i].season,
// PC1: d[0],
// PC2: d[1]}))
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.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasadoAir
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasadoSea
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasadoDB
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasado
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
Cells
marCasadoDB
File attachments
marCasadoSea@4.csv
CSV
marCasadoAir@5.csv
CSV
Databases
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
Cells
marCasado
File attachments
marCasadoSea@4.csv
CSV
marCasadoAir@5.csv
CSV
Databases
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasadoScaled
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasadoArray
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
marCasadoPCA
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
scoresCombined
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
image
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML