# USDA Nutrients UMAP-Heatmap **URL:** \ **Category:** Show and tell\ **Created:** [December 23, 2020, 7:01pm UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372 "2020-12-23T19:01:19Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\ **Post date:** [December 23, 2020, 7:01pm UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/1 "2020-12-23T19:01:20Z")
Hi, I’ve been working on ways to show the relationship between visualizing data using dimensionality reduction (e.g. UMAP, using deck.gl for interactive visualization) and hierarchically clustered heatmaps (e.g. using our library Clustergrammer-GL) as well as show the benefits of making linked visualizations. This notebook shows how we can visualize a high-dimensional food nutrient dataset from the USDA (source [Nutrient Explorer](http://bl.ocks.org/syntagmatic/raw/3150059/)) ~7,000 foods and 14 nutrient dimensions. It works best when set to landscape and fullscreen. > **[USDA Nutrients UMAP-Heatmap](https://observablehq.com/@cornhundred/usda-umap-heatmap)** > > Overview This notebook visualizes USDA nutrient data (obtained from the Nutrient Explorer) using the dimensionality reduction technique UMAP and the interactive heatmap tool Clustergrammer-GL. This notebook is best viewed in landscape mode and in... Next, I would like to make a version using the techniques from this notebook [https://observablehq.com/@fil/umap-o-matic](https://observablehq.com/@fil/umap-o-matic) by @fil that enables users to upload their own data. ---
**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\ **Post date:** [December 23, 2020, 8:57pm UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/2 "2020-12-23T20:57:26Z")
This example is very similar and uses spatial transcriptomics data from 10x genomics > **[Clustergrammer-GL Visium Example / Nicolas Fernandez / Observable](https://observablehq.com/@cornhundred/clustergrammer-gl-visium-example)** > > Explore and visualize data. Share and publish your insights. Discover and be inspired. ---
**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\ **Post date:** [December 25, 2020, 10:34pm UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/3 "2020-12-25T22:34:31Z")
Here’s a variant made using NBA shot chart data > **[NBA Shot Chart Clustergrammer-GL](https://observablehq.com/@cornhundred/nba-shot-chart-clustergrammer-gl)** > > Overview This notebook visualizes NBA shooting data for all players who took at least 50 shots in the 2018-19 season. The scatterplot to the top/left shows regions of the basketball court colored by cluster (e.g. close to the basket is called the... ![Screen Shot 2020-12-25 at 5.33.37 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/466a25f7b1d8a45e4e4797afc17486fe9db4e046.png) ---
**Author:** ![enjalot](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/enjalot/32/5248_2.png) [@enjalot](https://talk.observablehq.com/u/enjalot)\ **Post date:** [December 26, 2020, 12:41am UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/4 "2020-12-26T00:41:16Z")
these are awesome! I’d been wanting to see nutrient UMAP for a long time, would be fun to also hook up parallel coordinates too: > **[Nutrient Parallel Coordinates II](http://bl.ocks.org/syntagmatic/0d1635533f6fb5ac4da3)** > > Kai’s Block 0d1635533f6fb5ac4da3 one issue I ran into is that on my phone the UMAP canvas takes up the full height so I can’t scroll past the canvas. ---
**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\ **Post date:** [December 26, 2020, 1:12am UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/5 "2020-12-26T01:12:09Z")
Thanks @enjalot! Yes, it would be cool to have parallel coordinates set up as well. Yeah, I also need to get Clustergrammer-gl to be more mobile friendly (as well as improve the fullscreen behavior - I tried using a button here with CitiBike data [https://observablehq.com/@cornhundred/citibike-clustergrammer-gl-and-deck-gl](https://observablehq.com/@cornhundred/citibike-clustergrammer-gl-and-deck-gl)). ---
**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\ **Post date:** [December 28, 2020, 3:24am UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/6 "2020-12-28T03:24:13Z")
Hi @enjalot, I recently gave a talk where I tried to relate scatter plots, dimensionally reduction, parallel coordinates, and heatmaps in a few slides (video [https://youtu.be/dSEy6XGoIi0](https://youtu.be/dSEy6XGoIi0) 6-9 minute mark and slides bit.ly/nci-clustergrammer2) - I’m basically making the argument that heatmaps can be thought of as parallel coordinates and parallel data. I’ll probably try to make a notebook out of these intro slides later. Let me know if you have any comments 🙂 ---
**Author:** ![enjalot](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/enjalot/32/5248_2.png) [@enjalot](https://talk.observablehq.com/u/enjalot)\ **Post date:** [January 25, 2021, 5:58pm UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/7 "2021-01-25T17:58:46Z")
I would love to see a notebook based on those slides! It’s an interesting perspective I hadn’t seen in that way though I’ve thought about the various representations independently before. I wonder if having a toy example that could be played with interactively could help illustrate the concepts. Some time ago I was playing with the idea of such a toy example around dimensionality reduction but couldn’t find a way to bring it home: > **[Triangle World](https://observablehq.com/collection/@enjalot/triangle-world)** > > A series of articles exploring advanced techniques in dimensionality reduction and data visualization with really easy data / An Observable collection by Ian Johnson wonder if it gives any ideas? ---
**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\ **Post date:** [January 25, 2021, 8:47pm UTC](https://talk.observablehq.com/t/usda-nutrients-umap-heatmap/4372/8 "2021-01-25T20:47:43Z")
Yeah, I have been thinking about making a notebook on those slides. I agree that a single dataset with linked views (scatterplot, parallel-coords, dimensionality reduction, and heatmap) would be very nice. I just have to find a good dataset (e.g. Iris flowers or NBA stats or something), right plotting tools (deck.gl has been working well), and some time 🙂 (I’ll update here once I have something working) > [@enjalot](#): > > Triangle World @enjalot Thanks for sharing the triangle world notebooks they look great and I look forward to checking them out in more detail.