Heatmap and array of objects

plotly.js
1

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

2

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.

3

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.