The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Aug 31, 2023
7 forks
16 stars
3
Data science workflows in JavaScript Course
Data science workflows in JavaScript - Session 1 KeyData science workflows in JavaScript - Session 2 Key
Data science workflows in JavaScript - Session 3 key
Also listed in…
Data science workflows in JavaScript Course
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})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
marCasadoDB
SELECT air.month
, meanPressure
, windSpeed
, 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
marCasado
SELECT date_part('month', month) as month
, mean(SST) as meanSST
FROM marCasado
GROUP BY date_part('month', month)
Insert cell
Insert cell
// Write Plot code to create a heatmap of sea surface temperature (SST) by year and month
Plot.plot({
marks: [
Plot.cell(marCasado, {
y: d => d.month.getUTCFullYear(),
x: d => d.month.getUTCMonth(),
fill: "SST",
tip: true
})
],
width: 500,
height: 250,
y: {tickFormat: "Y", padding: 0},
x: {padding: 0, tickFormat: Plot.formatMonth()}
})
Insert cell
Insert cell
Insert cell
import {PlotMatrix} with {marCasado as data} from "@observablehq/autoplot-matrix"
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"
Insert cell
Insert cell
Insert cell
// Create a scaled version of the numeric variables
marCasadoScaled = scale(marCasado.map(({ season, month, ...rest }) => rest))
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) // Already scaled above - otherwise can add {scale: true} here!
Insert cell
Insert cell
Insert cell
// Get variance explained by each PC:
variancePC = marCasadoPCA.getExplainedVariance()
Insert cell
Insert cell
// Get cumulative variance explained:
cumulativeVariance = marCasadoPCA.getCumulativeVariance()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {viewof loadings} with {marCasadoScaled as food_scaled} from "@chrispahm/principal-component-analysis"
Insert cell
viewof loadings
Insert cell
import {viewof scores} with {marCasadoScaled as food_scaled, marCasado as food} from "@chrispahm/principal-component-analysis"
Insert cell
viewof scores
Insert cell
scoresCombined = scores
.map((d, i) => ({ ...d, Name: marCasado[i].month, season: marCasado[i].season }))
Insert cell
Plot.plot({
marks: [
Plot.dot(scoresCombined, { x: "PC1", y: "PC2", fill: "season", r: 5 }),
Plot.arrow(loadings, {
x1: 0, x2: d => d.PC1 * scalingFactor, y1: 0, y2: (d) => d.PC2 * scalingFactor
}),
Plot.text(loadings, {
x: (d) => d.PC1 * scalingFactor, y: (d) => d.PC2 * scalingFactor,
text: "Variable",
dy: -5,
dx: 30,
fill: "black",
stroke: "white",
fontSize: 14
})
],
color: { legend: true },
inset: 20
})
Insert cell
scalingFactor = 5
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.
Learn more