3d plotting using Plotly.js not supported in Notebook 2.0 or Framework?

[gganapat]

I see 3d plotting is supported quite well in Notebook 1.0 but not in Notebook 2.0 or Framework. For example when I try to plot this code

const trace = {
  type: 'scatter3d',
  mode: 'markers',
  x: data3D.map(d => d[0]),
  y: data3D.map(d => d[1]),
  z: data3D.map(d => d[2]),
  marker: {
    size: 5,
    color: data3D.map(d => d[2]), // Color by z-value
    colorscale: 'Viridis',
    opacity: 0.8
  }
};
const layout = {
  title: '3D Data Visualization',
  scene: {
    // Explicit axis configuration for proper 3D scene
    xaxis: {
      title: 'X'
    },
    yaxis: {
      title: 'Y'
    },
    zaxis: {
      title: 'Z'
    },
    // Camera and interaction settings
    camera: {
      eye: { x: 1.2, y: 1.2, z: 1.2 }
    }
  },
  margin: { l: 0, r: 0, b: 0, t: 40 },
  autosize: true
};

const data1 = [trace];
const div1 = display(htl.html`<div style="width: 600px; height: 500px;"></div>`);
Plotly.newPlot(div1, data1, layout);

I get this

where data1 is

[mbostock]

How did you import Plotly?

And you should probably retitle the issue to be specific to Plotly.js — if the library runs in the browser, there’s always a way to make it work in Notebooks, but there might be challenges depending on how Plotly distributes their software. I can try to debug this later if I find time. Certainly 3D and anything else you can do in a browser is supported.

[gganapat]

Your question gave me the clue - I changed it from

import Plotly from "npm:plotly.js-basic-dist-min";
to
import Plotly from "npm:plotly.js-dist"
and it worked fine now. Thanks for the tip-off!