Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

# Heatmap and array of objects

Hej Everyone :),

I wonder, what will be the easiest way to build big heat map (around 3k cells) from array of objects? The structure of my array looks like:

``````[
{x: "abc", xId: 123, xValue: 456, y: "def", yId: 99, yValue: 888},
{x: "abcef", xId: 124, xValue: 456, y: "defgh", yId: 100, yValue: 888},
...
]
``````

At first i wanted to make a set of x and y names as a axis ticks and later map array to use it as a z-axis values

``````        const x = payload.map(item => item.x);
const xSet = new Set(x);

const y = payload.map(item => item.y);
const ySet = new Set(y);

var data = [
{
z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: xSet,
y: ySet,
type: 'heatmap'
}
];

Plotly.newPlot('myDiv', data);
``````

I’m bit worry about values order. Is there any easier way to solve it?

Cheers,
Daniel

You don’t have to convert your data for a 2D `z` array. Plotly accepts x/y/z columns as well.

Go to https://rreusser.github.io/plotly-mock-viewer/#heatmap_xyz-gaps-on-sides and open the console for an example.

Looks great, but i would prefer to pass array of objects where each of them contains x, y and z attributes. I don’t need to worry about data order then.