# Heatmap / Highlight Table

**URL:** <https://talk.observablehq.com/t/heatmap-highlight-table/8897>\
**Category:** Help\
**Created:** [March 6, 2024, 2:37am UTC](https://talk.observablehq.com/t/heatmap-highlight-table/8897 "2024-03-06T02:37:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zeetools](https://avatars.discourse-cdn.com/v4/letter/z/c2a13f/32.png) [@zeetools](https://talk.observablehq.com/u/zeetools)\
**Post date:** [March 6, 2024, 2:37am UTC](https://talk.observablehq.com/t/heatmap-highlight-table/8897/1 "2024-03-06T02:37:53Z")

</div>

Is there an equivalent to the what would be a “Tableau highlight table” or a heat map in Observable Framework (can also test this out in notebook)? The idea is that you organize data by columns and rows and color individual cells based on some calculation (margin for example) with text in each cell.

Example of an equivalent Tableau version is here: [Build a Highlight Table or Heat Map - Tableau](https://help.tableau.com/current/pro/desktop/en-us/buildexamples_highlight.htm)

This looks somewhat similar to what I’d want (outside of grouping data and not having the cells with the numbers inside).

> **[D3 Heatmap](https://observablehq.com/@eliaslevy/d3-heatmap)**

Appreciate the help!

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [March 6, 2024, 3:31am UTC](https://talk.observablehq.com/t/heatmap-highlight-table/8897/2 "2024-03-06T03:31:27Z")

</div>

I would look at using Observable Plot…

> **[Plot: Sorted heatmap](https://observablehq.com/@observablehq/plot-sorted-heatmap?intent=fork)**
>
> Grouping by x (hour of day) and y (location) produces a heatmap. Locations are sorted by the maximum highway traffic (measured as vehicles per hour) they have during the day. Data: Christopher Möller.

> **[Plot: Seattle temperature temporal heatmap](https://observablehq.com/@observablehq/plot-seattle-temperature-heatmap?intent=fork)**
>
> A calendar with a cell for each day (x) of each month (y), colored by maximum temperature on that day.

> **[Plot: Simpsons ratings](https://observablehq.com/@observablehq/plot-simpsons-ratings?intent=fork)**
>
> A text mark shows the rating of each of the Simpsons episode, organized by season. It is overlaid on a cell that redundantly encodes the same value as a color. Data: Internet Movie Data Base.

---

<div class="post-metadata">

**Author:** ![zeetools](https://avatars.discourse-cdn.com/v4/letter/z/c2a13f/32.png) [@zeetools](https://talk.observablehq.com/u/zeetools)\
**Post date:** [March 6, 2024, 1:02pm UTC](https://talk.observablehq.com/t/heatmap-highlight-table/8897/3 "2024-03-06T13:02:34Z")

</div>

Thanks, I did look at these, what I seemed to be unable to grasp is whether we can have “nested” columns in these table views?

I mocked up an array below trying to explain what I’d be wanting at the end.

[ {“Port”: “A”, “Bandwidth”: 10, Band: “1”, Measurement Value: 5},  
{“Port”: “A”, “Bandwidth”: 20, Band: “1”, Measurement Value: 10},  
{“Port”: “A”, “Bandwidth”: 40, Band: “1”, Measurement Value: 20},  
{“Port”: “B”, “Bandwidth”: 10, Band: “1”, Measurement Value: 5},  
{“Port”: “B”, “Bandwidth”: 20, Band: “1”, Measurement Value: 10},  
{“Port”: “A”, “Bandwidth”: 10, Band: “2”, Measurement Value: 5},  
{“Port”: “A”, “Bandwidth”: 20, Band: “2”, Measurement Value: 10},  
{“Port”: “A”, “Bandwidth”: 40, Band: “2”, Measurement Value: 20},  
{“Port”: “B”, “Bandwidth”: 10, Band: “2”, Measurement Value: 5},  
{“Port”: “B”, “Bandwidth”: 20, Band: “2”, Measurement Value: 10}]

I’d want to have the Port as the “parent” column with bandwidth underneath on the the x-axis. For the Y-axis, I’d split by “Band” and in the cell show the measurement value. I can create an example of this table visually if that helps clarify.