Heatmap / Highlight Table

New To Observable
1

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

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

Appreciate the help!

2

I would look at using Observable Plot…

3

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.