45:["$","title",null,{"children":"Week 11 Lab: Dimensionality Reduction & Clustering with D3 | rk2546 | Observable"}] 4d:[{"id":"9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","href":"https://static.observableusercontent.com/files/9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","name":"Iris.csv","type":"text/csv","lastModified":1794586655605,"size":5107}] 49:{"id":"436ef03ee1447a6f","slug":"2026-infovis-cse_week-11-lab","title":"Week 11 Lab: Dimensionality Reduction & Clustering with D3","thumbnail":"f16df7576eeacd2e564c2e166d49bb56a20a08ebf0065fac5b2c8c6b13fde552","access_level":"public","create_time":"$D2026-11-13T17:12:17.929Z","update_time":"$D2026-11-13T17:12:48.377Z","view_time":null,"first_public_time":"$D2026-11-13T17:13:01.943Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":214,"publish_version":214,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 11 Lab: Dimensionality Reduction & Clustering with D3","cells":[{"id":1,"value":"# Week 11 Lab: Dimensionality Reduction & Clustering with D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"---\n## Dataset: Iris Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"Let's load in the Iris Dataset, which we've worked with before. Our specific lab will work on the one provided here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"### Loading Raw Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// Do not modify\nconst iris = await FileAttachment(\"Iris.csv\").csv({typed:true});\ndisplay(Inputs.table(iris));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### Extracting Numerical Features\n\nThis will be a very useful element later, as you'll see. We're just isolating which columns are numerical.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"// Do not modify\nconst features = [\n \"SepalLengthCm\",\n \"SepalWidthCm\",\n \"PetalLengthCm\",\n \"PetalWidthCm\"\n];\ndisplay(features)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"### Isolating Numeric Columns\n\nFor dimensionality reduction, let's isolate the columns that are numerical. We'll represent that filtered version as `X`, where each entry is a flower corresponding to the feature order established above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"// Do not modify\nconst X = iris.map(d => features.map(f => d[f]));\ndisplay(X)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"In this case `X` is comprised of arrays; each array is a flower sample. Each flower has 4 values; these correspond to the features defined in `features`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"---\n## Exercise #1: Visualizing high-dimensional data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Let's take the time to understand why a single 2D scatterplot cannot represent all four dimensions simultaneously.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

[TO-DO]

Try to accomplish the following:

Create a scatterplot of sepal length v.s. sepal width.
Color points by species
Explore different features (there are several features provided).

Which features along the X and Y axes best separates the species?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// === TO-DO ===\n\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n## Exercise #2: Dimensionality Reduction with PCA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"Principal Component Analysis (PCA) can be used to reduce four numerical dimensions to two \"principal components\". These principal components are close-to-orthogonal features that are estimated to best divide the data.\n\nLet's use a custom NPM module to help us; it's too much to calculate eigenvectors and the like naively. That module will be `ml-pca`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// Do not modify\nconst PCA = (await import(\"npm:ml-pca\")).PCA;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"We'll perform the PCA analysis for you, using `X` as our dataset. Remember that `X` only contains the numerical features of each flower. we'll use `PCA` that we just imported.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// Initialize our PCA engine\nconst pca = new PCA(X, {\n center: true,\n scale: true\n});\n\n// Use PCA to re-project our data based on what PCA predicts are principal components\nconst projected = pca.predict(X, {\n nComponents: 2\n}).to2DArray();\n\n// Re-format a new version of our dataset orienting around the first two principal components,\n// plus the species.\nconst pcaData = projected.map((d, i) => ({\n pc1: d[0],\n pc2: d[1],\n species: iris[i].Species\n}));\n\n// Explain the variance among our principal components.\nconst variance = pca.getExplainedVariance();\ndisplay(`Explained variance:\\n${variance}`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"In our cell above, we printed out variance values. What do these mean?\n\n**These tell us, among the principal components of our data, how much each principal component describes the difference between the observed data.** It doesn't tell us _WHICH_ features correspond to the principal components, but it's a good sanity check to see if any principal components optimally divide the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"

[TO-DO]

Try to accomplish the following:

Create a D3 scatterplot where the first principal component is along the X-axis and the second principal component is along the Y-axis.
Color points by species.
Compare your PCA-divided plot with that of Exercise #1

Does PCA necessarily produce the best separation between categories? Why or why not?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// === TO-DO ===\n\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"### Interpreting Principal Components\n\nWe managed to generate our PCA-based chart... but what exactly ARE our principal components? Observe below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// Do not modify\n\n// Let's extract some additional \"loadings\" metadata from our PCA analysis\nconst loadings = pca.getLoadings().to2DArray();\n\n// Let's create an array that lets us map each feature's contribution to the PCA analysis.\nconst contributions = features.map((feature, i) => ({\n feature,\n PC1: loadings[i][0],\n PC2: loadings[i][1]\n}));\n\ndisplay(contributions);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"A larger absolute coefficient means the feature contributes more strongly to that principal component. The sign indicates direction, although the sign of an entire principal component can be reversed without changing the PCA solution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"---\n## Exercise #3: Clustering with K-means","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"We can use K-Means clustering to cluster the observations without using species labels, and then compare the clusters with the known categories. We implicitly **already** know that there are 3 species; this implies that there are 3 separate clusters. So let's go with this assumption for our K-Means clustering analysis.\n\nLike before, we'll handle the K-Means analysis for you. We'll use an NPM module to make life a bit easier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Do not modify\nconst kmeans = (await import(\"npm:ml-kmeans\")).kmeans","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"To perform K-Means, it's rather simple with this NPM module:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Do not modify\n\n// We assume there are 3 means to cluster around\nconst k = 3;\n\n// Analysis. Note the `seed` parameter, which allows our analysis to be reproducible.\nconst result = kmeans(X, k, { seed: 42 });\n\n// What are our estimated clusters?\nconst clusters = result.clusters;\ndisplay(clusters);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"What kind of results is `clusters` returning? It's telling us that, for each observation, we are assigning them a group ID. If you look at the unique values inside of `clusters`, there are only 3 unique values: \"0\", \"1\", and \"2\".\n\nNow, normally this is the time when we plot. However, to make our life easier, why not just attach our clusters to our existing PCA data?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// Do not modify\n\n// Merely map the clusters to our existing PCA groupings.\nconst clusteredData = pcaData.map((d, i) => ({\n ...d,\n cluster: result.clusters[i]\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"

[TO-DO]

Try to accomplish the following:

Run K-means on the standardized four-dimensional data, with K = 3.
Visualize cluster assignments on the PCA scatterplot.
Compare the clusters with the original species labels.

Why might K-means assign observations from different species to the same cluster?