Creating different kind of Heatmap( with varying sizes based on z value)

plotly.js
1

Hello,

I want to create the following kind of heatmap in Plotly.
What are the ways that I can do that?
I was wondering if I have to use shapes to do this.

05%20AM
Screen Shot 2018-07-18 at 8.16.05 AM.png886×404 113 KB

Thanks & Regards,
Apurva

2

In plotly lingo, that looks more like a bubble chart to me: https://plot.ly/javascript/bubble-charts/

3

Hello,
Thank You for your reply.
Can I use the third dimension as a property for size of bubbles.
Size parameter in bubble chart accepts a 1-D array. But I have z parameter for all x and corresponding y values(i.e. 2D array).
Can I use that in bubble charts?

For example: My visualization looks like this:-

image
image.png961×824 27.9 KB

I want to use bubbles instead of rectangles and scale them based on score values(Blue color blocks should be larger)

Regards,
Apurva

4

Unfortunately, no. You’ll have to rearrange your 2D array into a long 1D array with the corresponding x and y coordinates to fill the grid.

5

That was really helpful.
Thank You so much.

image
image.png1413×642 133 KB

I created this image.
I am not able to display the colorscale, after setting ‘showscale:True’.

data_dict = {
    
        'x': hours,
        'y': metrics,            
        'mode':'markers',
        'marker' : {
                    'size': transformed_arr[0],
                    'color':colors_list[0],
                    'showscale': True
        }
}

Can you help me in displaying that.

Thank You so much for all your help.

Best Regards,
Apurva

6

Hello,
I was able to include colorscale as well.

image
image.png1166×667 167 KB

I used the following code:
data_dict = {
‘x’: hours,
‘y’: metrics,
‘mode’:‘markers’,
‘type’:‘scatter’,
‘marker’ : {
‘color’ : transformed_arr[day],
‘size’ : abc[day],#set color equal to a variable
‘colorscale’:‘Viridis’,
‘showscale’:True,
‘cmin’ : -10,
‘cmax’ : 10

        }
        }

Thank You so much for your help.