color showing density in plotly.js scatterplot

Question

I followed this https://plotly.com/javascript/3d-scatter-plots/ to create this:

However, I want to create something similar to this:

Which I made in python matplotlib. I just want to make the density of each point visible through a color (the more times a datapoint appears, the lighter the color along the colorbar)

Javascript code

var trace1 = {
    x: xvals,
    y: yvals,
    z: zvals,
    mode: 'markers',
    marker: {
        size: 12, 
        line: {
            color: 'rgba(217, 217, 217, 0.14)',
            width: 0.5}, 
        opacity: 0.8
        },
    type: 'scatter3d'
}

var data = [trace1]
var layout = {
    margin:{
        l: 0, 
        r: 0, 
        b: 0, 
        t: 0
    }
}

plot(data, layout)

Python code (I took out the code irrelevant to this question)

fig = plt.figure()
ax = plt.axes(projection='3d')
p = ax.scatter(x, y, z, c=density, cmap='viridis', linewidth=0.5)

ax.scatter([ux], [uy], [uz], c='red', marker="*", linewidths=0.3, label="You")

cbar = plt.colorbar(p, pad=0.3)

plt.show()

Javascript data

var x = [
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1,
  1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4,
  4, 4, 4, 4,
  ... 53 more items
]
var y = [
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2,
  2, 2, 2, 1,
  ... 53 more items
]
var z = [
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
  2, 2, 2, 2,
  ... 53 more items
]

Python data

x = [1, 1, 2, 2, 1, 1, 2, 2, 3, 4, 4, 3, 3, 4, 4]
y = [1, 2, 2, 1, 1, 2, 2, 1, 1, 2, 1, 1, 2, 2, 1]
z = [1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1]
density = [11, 2, 16, 30, 4, 1, 1, 28, 2, 4, 15, 6, 3, 4, 26]

TLDR: how to replicate matplotlib's c=density and color map in plotly.js?

ax.scatter(x, y, z, c=density, cmap='viridis')

Tario You · Accepted Answer · 2022-10-06 07:59:10Z

0

Writing this question helped me organize my thoughts and I googled different terms and found the answer!

Code

var trace1 = {
    x: xvals,
    y: yvals,
    z: zvals,
    mode: 'markers',
    marker: {
        size: 12, 
        color: density_vals,
        line: {
            width: 0.5
        }, 
        opacity: 0.8,
        colorbar:{
            title: "Frequency",
            titleside: "Top"
        }
    },
    type: 'scatter3d'
}

Data

x, y, z, density
1, 1, 1, 11
1, 2, 1, 2
2, 2, 1, 16
2, 1, 1, 30
1, 1, 2, 4
1, 2, 2, 1
2, 2, 2, 1
2, 1, 2, 28
3, 1, 2, 2
4, 2, 2, 4
4, 1, 2, 15
3, 1, 1, 6
3, 2, 1, 3
4, 2, 1, 4
4, 1, 1, 26

Result

answered Oct 6, 2022 at 7:59

Tario You

3622 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

color showing density in plotly.js scatterplot

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related